Merge pull request #8544 from weseek/imprv/refactor-editor-navbar

imprv: Refactor editor navbar

apps/app/src/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -9,5 +9,9 @@
   .grw-contextual-sub-navigation {
     position: fixed;
     right: 0;
+
+    // unset colors
+    background-color: unset;
+    backdrop-filter: unset;
   }
 }

apps/app/src/components/PageControls/_button-styles.scss

@@ -2,7 +2,7 @@
 
 %btn-basis {
   --bs-btn-padding-x: 6px;
-  --bs-btn-padding-y: 8px;
+  --bs-btn-padding-y: 6px;
   --bs-btn-line-height: 1em;
   --bs-btn-border-width: 0;
   --bs-btn-box-shadow: none;

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

@@ -0,0 +1,57 @@
+import { type FC, useState } from 'react';
+
+import type { IUserHasId } from '@growi/core';
+import { UserPicture } from '@growi/ui/dist/components';
+import { Popover, PopoverBody } from 'reactstrap';
+
+import UserPictureList from '../../Common/UserPictureList';
+
+import styles from './EditingUserList.module.scss';
+
+const userListPopoverClass = styles['user-list-popover'] ?? '';
+
+type Props = {
+  userList: IUserHasId[]
+}
+
+export const EditingUserList: FC<Props> = ({ userList }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
+
+  const firstFourUsers = userList.slice(0, 4);
+  const remainingUsers = userList.slice(4);
+
+  if (userList.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="d-flex flex-column justify-content-end">
+      <div className="d-flex justify-content-end">
+        {firstFourUsers.map(user => (
+          <div className="ms-1">
+            <UserPicture
+              user={user}
+              noLink
+              additionalClassName="border border-info"
+            />
+          </div>
+        ))}
+
+        {remainingUsers.length > 0 && (
+          <div className="ms-1">
+            <button type="button" id="btn-editing-user" className="btn border-0 bg-info-subtle rounded-pill p-0">
+              <span className="fw-bold text-info p-1">+{remainingUsers.length}</span>
+            </button>
+            <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-editing-user" toggle={togglePopover} trigger="legacy">
+              <PopoverBody className={userListPopoverClass}>
+                <UserPictureList users={remainingUsers} />
+              </PopoverBody>
+            </Popover>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss

@@ -0,0 +1,3 @@
+.editor-navbar :global {
+  min-height: 72px;
+}

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

@@ -0,0 +1,22 @@
+
+import { PageHeader } from '~/components/PageHeader';
+import { useEditingUsers } from '~/stores/use-editing-users';
+
+import { EditingUserList } from './EditingUserList';
+
+import styles from './EditorNavbar.module.scss';
+
+const moduleClass = styles['editor-navbar'] ?? '';
+
+export const EditorNavbar = (): JSX.Element => {
+  const { data: editingUsers } = useEditingUsers();
+
+  return (
+    <div className={`${moduleClass} d-flex justify-content-between px-4 py-1`}>
+      <PageHeader />
+      <EditingUserList
+        userList={editingUsers?.userList ?? []}
+      />
+    </div>
+  );
+};

apps/app/src/components/PageEditor/EditorNavbar/index.ts

@@ -0,0 +1 @@
+export * from './EditorNavbar';

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

@@ -57,16 +57,15 @@ import { useEditingUsers } from '~/stores/use-editing-users';
 import { useNextThemes } from '~/stores/use-next-themes';
 import loggerFactory from '~/utils/logger';
 
-import { PageHeader } from '../PageHeader/PageHeader';
-
-// import { ConflictDiffModal } from './PageEditor/ConflictDiffModal';
-// import { ConflictDiffModal } from './ConflictDiffModal';
+import { EditorNavbar } from './EditorNavbar';
 import EditorNavbarBottom from './EditorNavbarBottom';
 import Preview from './Preview';
 import { scrollEditor, scrollPreview } from './ScrollSyncHelper';
 
 import '@growi/editor/dist/style.css';
 
+// import { ConflictDiffModal } from './PageEditor/ConflictDiffModal';
+// import { ConflictDiffModal } from './ConflictDiffModal';
 
 const logger = loggerFactory('growi:PageEditor');
 
@@ -433,9 +432,9 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   return (
     <div data-testid="page-editor" id="page-editor" className={`flex-expand-vert ${props.visibility ? '' : 'd-none'}`}>
-      <div className="px-4 py-2">
-        <PageHeader />
-      </div>
+
+      <EditorNavbar />
+
       <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>
         <div className="page-editor-editor-container flex-expand-vert">
           <CodeMirrorEditorMain
@@ -476,7 +475,9 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
         />
         */}
       </div>
+
       <EditorNavbarBottom />
+
     </div>
   );
 });

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

@@ -1,53 +0,0 @@
-import { type FC, useState } from 'react';
-
-import type { IUserHasId } from '@growi/core';
-import { UserPicture } from '@growi/ui/dist/components';
-import { Popover, PopoverBody } from 'reactstrap';
-
-import UserPictureList from '../Common/UserPictureList';
-
-import popoverStyles from './user-list-popover.module.scss';
-
-type Props = {
-  className: string,
-  userList: IUserHasId[]
-}
-
-export const EditingUserList: FC<Props> = ({ className, userList }) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
-
-  const firstFourUsers = userList.slice(0, 4);
-  const remainingUsers = userList.slice(4);
-
-  return (
-    <div className={className}>
-      {userList.length > 0 && (
-        <div className="d-flex justify-content-end">
-          {firstFourUsers.map(user => (
-            <div className="ms-1">
-              <UserPicture
-                user={user}
-                noLink
-                additionalClassName="border border-info"
-              />
-            </div>
-          ))}
-          {remainingUsers.length > 0 && (
-            <div className="ms-1">
-              <button type="button" id="btn-editing-user" className="btn border-0 bg-info-subtle rounded-pill p-0">
-                <span className="fw-bold text-info p-1">+{remainingUsers.length}</span>
-              </button>
-              <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-editing-user" toggle={togglePopover} trigger="legacy">
-                <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
-                  <UserPictureList users={remainingUsers} />
-                </PopoverBody>
-              </Popover>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

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

@@ -1,11 +1,7 @@
 import type { FC } from 'react';
 
-import { DevidedPagePath } from '@growi/core/dist/models';
-
 import { useSWRxCurrentPage } from '~/stores/page';
-import { useEditingUsers } from '~/stores/use-editing-users';
 
-import { EditingUserList } from './EditingUserList';
 import { PagePathHeader } from './PagePathHeader';
 import { PageTitleHeader } from './PageTitleHeader';
 
@@ -15,28 +11,21 @@ const moduleClass = styles['page-header'] ?? '';
 
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
-  const { data: editingUsers } = useEditingUsers();
 
   if (currentPage == null) {
     return <></>;
   }
 
-  const dPagePath = new DevidedPagePath(currentPage.path, true);
-
   return (
     <div className={moduleClass}>
       <PagePathHeader
         currentPage={currentPage}
       />
-      <div className="row mt-2">
+      <div className="row mt-1">
         <PageTitleHeader
           className="col"
           currentPage={currentPage}
         />
-        <EditingUserList
-          className={`${dPagePath.isRoot ? 'mt-1' : 'col mt-2'}`}
-          userList={editingUsers?.userList ?? []}
-        />
       </div>
     </div>
   );

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

@@ -13,7 +13,7 @@
     .btn {
       width: 24px;
       height: 24px;
-      transform: translateY(8px);
+      transform: translateY(12px);
     }
   }
 }

apps/app/src/components/PageHeader/index.ts

@@ -0,0 +1 @@
+export * from './PageHeader';