Domů Procházet Nápověda
Přihlásit se
wiki
/
weseek__growi
zrcadlo https://github.com/weseek/growi
2
0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Procházet zdrojové kódy

Merge pull request #6357 from weseek/fix/gw7844-fix-flickering-problem-on-view-change

fix: gw7844 fix flickering problem on view change
Mudana-Grune před 3 roky
rodič
08f7ce2c77 4160bce3eb
revize
d9628c32d1
4 změnil soubory, kde provedl 21 přidání a 12 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 3 9
      packages/app/src/components/Common/Dropdown/PageItemControl.tsx
  2. 5 2
      packages/app/src/components/SearchPage/SearchResultContent.tsx
  3. 1 1
      packages/app/src/server/views/layout/layout.html
  4. 12 0
      packages/app/src/stores/ui.tsx

+ 3 - 9
packages/app/src/components/Common/Dropdown/PageItemControl.tsx
Zobrazit soubor 

@@ -10,6 +10,7 @@ import {
 
 } from '~/interfaces/page';
 
 import { IPageOperationProcessData } from '~/interfaces/page-operation';
 
 import { useSWRxPageInfo } from '~/stores/page';
 
+import { updateBodyClassByView } from '~/stores/ui';
 
 import loggerFactory from '~/utils/logger';
 
 
 const logger = loggerFactory('growi:cli:PageItemControl');
 
@@ -71,6 +72,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
 
       return;
 
     }
 
     await onClickSwitchContentWidthMenuItem(pageId, pageInfo.isContainerFluid);
 
+    updateBodyClassByView(!pageInfo.isContainerFluid);
 
   }, [onClickSwitchContentWidthMenuItem, pageId, pageInfo]);
 
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
 
@@ -177,7 +179,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
 
             </div>
 
           </DropdownItem>
 
         ) }
 
-        { !forceHideMenuItems?.includes(MenuItemType.SWITCH_CONTENT_WIDTH) && <DropdownItem divider /> }
 
+        { !forceHideMenuItems?.includes(MenuItemType.SWITCH_CONTENT_WIDTH) && !pageInfo.isEmpty && <DropdownItem divider /> }
 
 
 
         {/* Bookmark */}
 
@@ -300,14 +302,6 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
 
     if (!isIPageInfoForOperation(presetPageInfo) && isOpen) {
 
       setShouldFetch(true);
 
     }
 
-    if (presetPageInfo?.isContainerFluid && !$('body').hasClass('on-search')) {
 
-      if (!$('body').hasClass('growi-layout-fluid')) {
 
-        $('body').addClass('growi-layout-fluid');
 
-      }
 
-    }
 
-    else if ($('body').hasClass('growi-layout-fluid')) {
 
-      $('body').removeClass('growi-layout-fluid');
 
-    }
 
   }, [isOpen, presetPageInfo, shouldFetch]);
 
 
   const switchContentWidthMenuItemHandler = useCallback(async(_pageId: string, _isContainerFluid: boolean) => {

+ 5 - 2
packages/app/src/components/SearchPage/SearchResultContent.tsx
Zobrazit soubor 

@@ -21,7 +21,7 @@ import { useFullTextSearchTermManager } from '~/stores/search';
 
 
 
 import AppContainer from '../../client/services/AppContainer';
 
-import { AdditionalMenuItemsRendererProps, ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 
+import { AdditionalMenuItemsRendererProps, ForceHideMenuItems, MenuItemType } from '../Common/Dropdown/PageItemControl';
 
 import { GrowiSubNavigation } from '../Navbar/GrowiSubNavigation';
 
 import { SubNavButtons } from '../Navbar/SubNavButtons';
 
 import RevisionLoader from '../Page/RevisionLoader';
 
@@ -176,6 +176,9 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
 
       ? page.revision
 
       : page.revision._id;
 
 
+    const forceHideMenuItemsWithSwitchContentWidth = forceHideMenuItems ?? [];
 
+    forceHideMenuItemsWithSwitchContentWidth.push(MenuItemType.SWITCH_CONTENT_WIDTH);
 
+
 
     return (
 
       <div className="d-flex flex-column align-items-end justify-content-center py-md-2">
 
         <SubNavButtons
 
@@ -183,7 +186,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
 
           revisionId={revisionId}
 
           path={page.path}
 
           showPageControlDropdown={showPageControlDropdown}
 
-          forceHideMenuItems={forceHideMenuItems}
 
+          forceHideMenuItems={forceHideMenuItemsWithSwitchContentWidth}
 
           additionalMenuItemRenderer={props => <AdditionalMenuItems {...props} pageId={page._id} revisionId={revisionId} />}
 
           isCompactMode
 
           onClickDuplicateMenuItem={duplicateItemClickedHandler}

+ 1 - 1
packages/app/src/server/views/layout/layout.html
Zobrazit soubor 

@@ -61,7 +61,7 @@
 
 {% block html_body %}
 
 {% set additionalBodyClasses = []; %}
 
 {% block html_additional_body_classes %}{% endblock %}
 
-{% if getConfig('crowi', 'customize:isContainerFluid') %}
 
+{% if getConfig('crowi', 'customize:isContainerFluid') || page.isContainerFluid %}
 
   {% set additionalBodyClasses = additionalBodyClasses|push('growi-layout-fluid') %}
 
 {% endif %}
 
 <body

+ 12 - 0
packages/app/src/stores/ui.tsx
Zobrazit soubor 

@@ -467,3 +467,15 @@ export const useIsAbleToShowPageAuthors = (): SWRResponse<boolean, Error> => {
 
     () => isPageExist && !isUserPage,
 
   );
 
 };
 
+
 
+export const updateBodyClassByView = (isContainerFluid: boolean): void => {
 
+  const bodyClasses = document.body.classList;
 
+  const isLayoutFluid = bodyClasses.contains('growi-layout-fluid');
 
+
 
+  if (isContainerFluid && !isLayoutFluid) {
 
+    bodyClasses.add('growi-layout-fluid');
 
+  }
 
+  else if (isLayoutFluid) {
 
+    bodyClasses.remove('growi-layout-fluid');
 
+  }
 
+};