Merge pull request #8671 from weseek/imprv/page-title-header-border-hover

imprv: Add border to the page title header when editing

apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx

@@ -12,7 +12,7 @@ export const EditorNavbar = (): JSX.Element => {
   const { data: editingUsers } = useEditingUsers();
 
   return (
-    <div className={`${moduleClass} d-flex justify-content-between px-4 py-1 ms-3`}>
+    <div className={`${moduleClass} d-flex justify-content-between px-4 py-1`}>
       <PageHeader />
       <EditingUserList
         userList={editingUsers?.userList ?? []}

apps/app/src/components/PageHeader/PageHeader.tsx

@@ -21,9 +21,8 @@ export const PageHeader: FC = () => {
       <PagePathHeader
         currentPage={currentPage}
       />
-      <div className="row mt-1">
+      <div className="mt-1">
         <PageTitleHeader
-          className="col"
           currentPage={currentPage}
         />
       </div>

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -23,12 +23,13 @@ const moduleClass = styles['page-path-header'];
 
 
 type Props = {
-  currentPage: IPagePopulatedToShowRevision
+  currentPage: IPagePopulatedToShowRevision,
+  className?: string,
 }
 
 export const PagePathHeader: FC<Props> = memo((props: Props) => {
   const { t } = useTranslation();
-  const { currentPage } = props;
+  const { currentPage, className } = props;
 
   const dPagePath = new DevidedPagePath(currentPage.path, true);
   const parentPagePath = dPagePath.former;
@@ -102,7 +103,7 @@ export const PagePathHeader: FC<Props> = memo((props: Props) => {
   return (
     <div
       id="page-path-header"
-      className={`d-flex ${moduleClass} small position-relative`}
+      className={`d-flex ${moduleClass} ${className ?? ''} small position-relative ms-2`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >

apps/app/src/components/PageHeader/PageTitleHeader.module.scss

@@ -5,6 +5,16 @@
     min-height: unset;
     padding: 0 0.5rem;
     line-height: 1em;
-    transform: translateX(-0.55rem) translateY(-0.05rem);
+    transform: translateX(0.05rem) translateY(0.05rem);
+  }
+}
+
+.page-title-header-border-color {
+  --bs-border-color: transparent;
+
+  &:global {
+    &:hover {
+      --bs-border-color: var(--bs-primary-border-subtle);
+    }
   }
 }

apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -6,6 +6,7 @@ import nodePath from 'path';
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { pathUtils } from '@growi/core/dist/utils';
+import { isMovablePage } from '@growi/core/dist/utils/page-path-utils';
 import { useTranslation } from 'next-i18next';
 
 import { ValidationTarget } from '~/client/util/input-validator';
@@ -16,7 +17,8 @@ import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 
 import styles from './PageTitleHeader.module.scss';
 
-const moduleClass = styles['page-title-header'];
+const moduleClass = styles['page-title-header'] ?? '';
+const borderColorClass = styles['page-title-header-border-color'] ?? '';
 
 type Props = {
   currentPage: IPagePopulatedToShowRevision,
@@ -29,6 +31,8 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const currentPagePath = currentPage.path;
 
+  const isMovable = isMovablePage(currentPagePath);
+
   const dPagePath = new DevidedPagePath(currentPage.path, true);
   const pageTitle = dPagePath.latter;
 
@@ -64,9 +68,13 @@ export const PageTitleHeader: FC<Props> = (props) => {
   }, [currentPagePath]);
 
   const onClickPageTitle = useCallback(() => {
+    if (!isMovable) {
+      return;
+    }
+
     setEditedPagePath(currentPagePath);
     setRenameInputShown(true);
-  }, [currentPagePath]);
+  }, [currentPagePath, isMovable]);
 
 
   return (
@@ -86,7 +94,13 @@ export const PageTitleHeader: FC<Props> = (props) => {
             />
           </div>
         ) }
-        <h1 className={`mb-0 fs-4 ${isRenameInputShown ? 'invisible' : ''} text-truncate`} onClick={onClickPageTitle}>
+        <h1
+          className={`mb-0 px-2 fs-4
+            ${isRenameInputShown ? 'invisible' : ''} text-truncate
+            ${isMovable ? 'border border-2 rounded-2' : ''} ${borderColorClass}
+          `}
+          onClick={onClickPageTitle}
+        >
           {pageTitle}
         </h1>
       </div>
@@ -100,7 +114,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
           pageId={currentPage._id}
           pagePath={currentPage.path}
           dropdownToggleId={`copydropdown-${currentPage._id}`}
-          dropdownToggleClassName="ms-2 p-1"
+          dropdownToggleClassName="p-1"
         >
           <span className="material-symbols-outlined fs-6">content_paste</span>
         </CopyDropdown>