Merge pull request #6220 from weseek/imprv/99348-next-GrowiSuvNavigation

imprv: next GrowiSubNavigation

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -36,7 +36,7 @@ import PageEditorModeManager from './PageEditorModeManager';
 import { SubNavButtons } from './SubNavButtons';
 
 
-type AdditionalMenuItemsProps = AdditionalMenuItemsRendererProps & {
+type AdditionalMenuItemsProps = {
   pageId: string,
   revisionId: string,
   isLinkSharingDisabled?: boolean,
@@ -142,7 +142,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
 };
 
 type GrowiContextualSubNavigationProps = {
-  isCompactMode: boolean,
+  isCompactMode?: boolean,
   isLinkSharingDisabled: boolean,
 };
 
@@ -259,18 +259,19 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
       mutateEditorMode(viewType);
     }
 
-    let additionalMenuItemsRenderer;
-    if (revisionId != null) {
-      additionalMenuItemsRenderer = props => (
+    const additionalMenuItemsRenderer = () => {
+      if (revisionId == null || pageId == null) {
+        return <></>;
+      }
+      return (
         <AdditionalMenuItems
-          {...props}
           pageId={pageId}
           revisionId={revisionId}
           isLinkSharingDisabled={isLinkSharingDisabled}
           onClickTemplateMenuItem={templateMenuItemClickHandler}
         />
       );
-    }
+    };
     return (
       <>
         <div className="d-flex flex-column align-items-end justify-content-center py-md-2" style={{ gap: `${isCompactMode ? '5px' : '7px'}` }}>

packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -0,0 +1,199 @@
+@use '~/styles/variables' as var;
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
+// https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976
+// workaround to use '&' in global scope
+.grw-subnav {
+  :grobal {
+    min-height: var.$grw-subnav-min-height;
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    @include bs.media-breakpoint-up(md) {
+      min-height: var.$grw-subnav-min-height-md;
+    }
+
+    .grw-drawer-toggler {
+      width: 50px;
+      height: 50px;
+      font-size: 24px;
+    }
+
+    h1 {
+      @include mixins.variable-font-size(32px);
+      line-height: 1.4em;
+    }
+
+    .grw-taglabels-container {
+      margin-bottom: 0.5rem;
+    }
+
+    .grw-page-path-nav {
+      .separator {
+        margin-right: 0.2em;
+        margin-left: 0.2em;
+      }
+    }
+
+    .btn-subscribe {
+      height: 40px;
+      font-size: 20px;
+    }
+
+    .btn-like,
+    .btn-bookmark,
+    .btn-seen-user {
+      height: 40px;
+      padding-right: 6px;
+      padding-left: 8px;
+      font-size: 20px;
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .total-likes,
+    .total-bookmarks {
+      display: flex;
+      align-items: flex-end;
+      padding-right: 8px;
+      padding-left: 6px;
+      font-size: 14px;
+      font-weight: bs.$font-weight-bold;
+    }
+    .seen-user-count {
+      padding-right: 6px;
+      padding-left: 6px;
+      font-size: 14px;
+      font-weight: bs.$font-weight-bold;
+      vertical-align: bottom;
+    }
+
+    .btn-page-item-control {
+      height: 40px;
+      font-size: 16px;
+    }
+
+    ul.authors {
+      li {
+        font-size: 12px;
+        list-style: none;
+      }
+
+      .text-date {
+        font-size: 11px;
+      }
+
+      .picture {
+        width: 22px;
+        height: 22px;
+        border: 1px solid bs.$gray-300;
+
+        &.picture-xs {
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      .user-list-popover {
+        max-width: 200px;
+
+        .user-list-content {
+          direction: rtl;
+
+          .liker-user-count,
+          .seen-user-count {
+            font-size: 12px;
+            font-weight: bolder;
+          }
+        }
+        .cls-1 {
+          isolation: isolate;
+        }
+      }
+    }
+  }
+
+  &:global {
+    &:hover {
+      .btn-copy,
+      .btn-edit,
+      .btn-edit-tags {
+        // change button opacity
+        opacity: unset;
+      }
+    }
+
+    /*
+     * Compact Mode
+     */
+    &.grw-subnav-compact {
+      min-height: 70px;
+
+      @include bs.media-breakpoint-up(md) {
+        min-height: 90px;
+      }
+
+      .btn-like,
+      .btn-bookmark,
+      .btn-subscribe {
+        width: 32px;
+        height: 32px;
+        padding: 4px;
+        font-size: 16px;
+      }
+      .btn-seen-user {
+        width: 48px;
+        height: 32px;
+        padding: 4px;
+        font-size: 16px;
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+      .btn-page-item-control {
+        width: 32px;
+        height: 32px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+/*
+ * shadow
+ */
+.grw-subnav-append-shadow-container {
+  .grw-subnav {
+    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
+  }
+}
+
+/*
+ * Fixed ver
+ */
+$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
+
+.grw-subnav-fixed-container {
+  top: var.$grw-navbar-border-width;
+  z-index: bs.$zindex-sticky - 5;
+}
+
+/*
+ * Switching show/hide
+ */
+.grw-subnav-switcher {
+  .grw-subnav-fixed-container {
+    transition: transform 150ms $easeInOutCubic;
+  }
+
+  &.grw-subnav-switcher-hidden {
+    .grw-subnav-fixed-container {
+      transition: unset;
+      transform: translateY(-100%);
+    }
+  }
+}

packages/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -12,6 +12,8 @@ import PagePathNav from '../PagePathNav';
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
+import styles from './GrowiSubNavigation.module.scss';
+
 
 type Props = {
   page: Partial<IPageHasId>,
@@ -57,7 +59,7 @@ export const GrowiSubNavigation = (props: Props): JSX.Element => {
 
   return (
     <div className={
-      'grw-subnav d-flex align-items-center justify-content-between'
+      `grw-subnav ${styles['grw-subnav']} d-flex align-items-center justify-content-between`
       + ` ${additionalClasses.join(' ')}`
       + ` ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}
     >

packages/app/src/components/Navbar/PageEditorModeManager.jsx

@@ -7,6 +7,8 @@ import { UncontrolledTooltip } from 'reactstrap';
 import { useCurrentUser, useHackmdUri } from '~/stores/context';
 import { EditorMode, useIsDeviceSmallerThanMd } from '~/stores/ui';
 
+import styles from './PageEditorModeManager.module.scss';
+
 /* eslint-disable react/prop-types */
 const PageEditorModeButtonWrapper = React.memo(({
   editorMode, isBtnDisabled, onClick, targetMode, icon, label, id,
@@ -63,7 +65,7 @@ function PageEditorModeManager(props) {
   return (
     <>
       <div
-        className="btn-group grw-page-editor-mode-manager"
+        className={`btn-group grw-page-editor-mode-manager ${styles['grw-page-editor-mode-manager']}`}
         role="group"
         aria-label="page-editor-mode-manager"
         id="grw-page-editor-mode-manager"

packages/app/src/styles/molecules/page-editor-mode-manager.scss → packages/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -1,15 +1,18 @@
 // @mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
 .grw-page-editor-mode-manager .btn {
   width: 70px;
   white-space: nowrap;
 
-  @include border-vertical('before', 70%, 1, true);
+  @include mixins.border-vertical('before', 70%, 1, true);
 
   &.view-button,
   &.edit-button {
     line-height: 1.2rem;
     .grw-page-editor-mode-manager-icon {
-      @include media-breakpoint-down(sm) {
+      @include bs.media-breakpoint-down(sm) {
         font-size: 1.2rem;
       }
     }
@@ -17,7 +20,7 @@
   &.hackmd-button {
     line-height: 1.2rem;
     .grw-page-editor-mode-manager-icon {
-      @include media-breakpoint-down(sm) {
+      @include bs.media-breakpoint-down(sm) {
         font-size: 1.2rem;
       }
     }

packages/app/src/pages/[[...path]].page.tsx

@@ -39,7 +39,7 @@ import {
   useOwnerOfCurrentPage, useIsUserPage, useCurrentPageId,
   useIsForbidden, useIsNotFoundPermalink, useIsTrashPage, useShareLinkId, useIsSharedUser, useIsAbleToDeleteCompletely,
   useAppTitle, useSiteUrl, useConfidential, useIsEnabledStaleNotification, useIsGuestUser, useIsNotCreatable,
-  useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsMailerSetup, useIsIdenticalPath,
+  useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsMailerSetup, useIsIdenticalPath, useDisableLinkSharing,
   useAclEnabled, useHasSlackConfig, useDrawioUri, useHackmdUri, useMathJax, useNoCdn, useEditorConfig, useCsrfToken, useIsSearchScopeChildrenAsDefault,
 } from '../stores/context';
 
@@ -84,6 +84,7 @@ type Props = CommonProps & {
   // isEnabledLinebreaksInComments: boolean,
   // adminPreferredIndentSize: number,
   // isIndentSizeForced: boolean,
+  disableLinkSharing: boolean,
 };
 
 const GrowiPage: NextPage<Props> = (props: Props) => {
@@ -123,6 +124,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // useMathJax(props.mathJax);
   // useNoCdn(props.noCdn);
   // useIndentSize(props.adminPreferredIndentSize);
+  useDisableLinkSharing(props.disableLinkSharing);
 
   // useRendererSettings({
   //   isEnabledLinebreaks: props.isEnabledLinebreaks,
@@ -182,9 +184,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
       {/* <BasicLayout title={useCustomTitle(props, t('GROWI'))} className={classNames.join(' ')}> */}
       <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
         <header className="py-0">
-          {/* <GrowiSubNavigation /> */}
-          GrowiSubNavigation
-          <GrowiContextualSubNavigation />
+          <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
         </header>
         <div className="d-edit-none">
           {/* <GrowiSubNavigationSwitcher /> */}
@@ -310,6 +310,7 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
   // props.isEnabledStaleNotification = configManager.getConfig('crowi', 'customize:isEnabledStaleNotification');
   // props.isEnabledLinebreaks = configManager.getConfig('markdown', 'markdown:isEnabledLinebreaks');
   // props.isEnabledLinebreaksInComments = configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments');
+  props.disableLinkSharing = configManager.getConfig('crowi', 'security:disableLinkSharing');
   // props.editorConfig = {
   //   upload: {
   //     image: crowi.fileUploadService.getIsUploadable(),

packages/app/src/stores/context.tsx

@@ -108,6 +108,10 @@ export const useShareLinkId = (initialData?: Nullable<string>): SWRResponse<Null
   return useStaticSWR<Nullable<string>, Error>('shareLinkId', initialData);
 };
 
+export const useDisableLinkSharing = (initialData?: Nullable<boolean>): SWRResponse<Nullable<boolean>, Error> => {
+  return useStaticSWR<Nullable<boolean>, Error>('disableLinkSharing', initialData);
+};
+
 export const useRevisionIdHackmdSynced = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
   return useStaticSWR<Nullable<any>, Error>('revisionIdHackmdSynced', initialData);
 };

packages/app/src/styles/_subnav.scss

@@ -1,189 +0,0 @@
-.grw-subnav {
-  min-height: $grw-subnav-min-height;
-  padding-top: 8px;
-  padding-bottom: 8px;
-
-  @include media-breakpoint-up(md) {
-    min-height: $grw-subnav-min-height-md;
-  }
-
-  &:hover {
-    .btn-copy,
-    .btn-edit,
-    .btn-edit-tags {
-      // change button opacity
-      opacity: unset;
-    }
-  }
-
-  .grw-drawer-toggler {
-    width: 50px;
-    height: 50px;
-    font-size: 24px;
-  }
-
-  h1 {
-    @include variable-font-size(32px);
-    line-height: 1.4em;
-  }
-
-  .grw-taglabels-container {
-    margin-bottom: 0.5rem;
-  }
-
-  .grw-page-path-nav {
-    .separator {
-      margin-right: 0.2em;
-      margin-left: 0.2em;
-    }
-  }
-
-  .btn-subscribe {
-    height: 40px;
-    font-size: 20px;
-  }
-
-  .btn-like,
-  .btn-bookmark,
-  .btn-seen-user {
-    height: 40px;
-    padding-right: 6px;
-    padding-left: 8px;
-    font-size: 20px;
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-  .total-likes,
-  .total-bookmarks {
-    display: flex;
-    align-items: flex-end;
-    padding-right: 8px;
-    padding-left: 6px;
-    font-size: 14px;
-    font-weight: $font-weight-bold;
-  }
-  .seen-user-count {
-    padding-right: 6px;
-    padding-left: 6px;
-    font-size: 14px;
-    font-weight: $font-weight-bold;
-    vertical-align: bottom;
-  }
-
-  .btn-page-item-control {
-    height: 40px;
-    font-size: 16px;
-  }
-
-  ul.authors {
-    li {
-      font-size: 12px;
-      list-style: none;
-    }
-
-    .text-date {
-      font-size: 11px;
-    }
-
-    .picture {
-      width: 22px;
-      height: 22px;
-      border: 1px solid $gray-300;
-
-      &.picture-xs {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-
-  /*
-   * Compact Mode
-   */
-  &.grw-subnav-compact {
-    min-height: 70px;
-
-    @include media-breakpoint-up(md) {
-      min-height: 90px;
-    }
-
-    .btn-like,
-    .btn-bookmark,
-    .btn-subscribe {
-      width: 32px;
-      height: 32px;
-      padding: 4px;
-      font-size: 16px;
-    }
-    .btn-seen-user {
-      width: 48px;
-      height: 32px;
-      padding: 4px;
-      font-size: 16px;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-    .btn-page-item-control {
-      width: 32px;
-      height: 32px;
-      font-size: 12px;
-    }
-  }
-}
-
-/*
- * shadow
- */
-.grw-subnav-append-shadow-container {
-  .grw-subnav {
-    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
-  }
-}
-
-/*
- * Fixed ver
- */
-$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
-
-.grw-subnav-fixed-container {
-  top: $grw-navbar-border-width;
-  z-index: $zindex-sticky - 5;
-}
-
-/*
- * Switching show/hide
- */
-.grw-subnav-switcher {
-  .grw-subnav-fixed-container {
-    transition: transform 150ms $easeInOutCubic;
-  }
-
-  &.grw-subnav-switcher-hidden {
-    .grw-subnav-fixed-container {
-      transition: unset;
-      transform: translateY(-100%);
-    }
-  }
-}
-
-.user-list-popover {
-  max-width: 200px;
-
-  .user-list-content {
-    direction: rtl;
-
-    .liker-user-count,
-    .seen-user-count {
-      font-size: 12px;
-      font-weight: bolder;
-    }
-  }
-  .cls-1 {
-    isolation: isolate;
-  }
-}