Add content width switcher to PageItemControl

https://youtrack.weseek.co.jp/issue/GW-7826
- Remove SwitchContentWidthButton component
- Remove implementation of SwitchContentWidthButton from SubNavButton
- Add content width switcher to PageItemControl dropdown menu
- Implement content width switcher to SubNavButton and PageListItemL component
- Remove SwitchContentWidthButton styling

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -37,10 +37,12 @@ type CommonProps = {
   onClickDuplicateMenuItem?: (pageId: string) => Promise<void> | void,
   onClickDeleteMenuItem?: (pageId: string, pageInfo: IPageInfoAll | undefined) => Promise<void> | void,
   onClickRevertMenuItem?: (pageId: string) => Promise<void> | void,
+  onClickSwitchContentWidthMenuItem?: (pageId: string, isContainerFluid?: boolean) => Promise<void>,
 
   additionalMenuItemRenderer?: React.FunctionComponent<AdditionalMenuItemsRendererProps>,
   isInstantRename?: boolean,
   alignRight?: boolean,
+  isContainerFluid?: boolean
 }
 
 
@@ -55,10 +57,16 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
   const {
     pageId, isLoading,
     pageInfo, isEnableActions, forceHideMenuItems,
-    onClickBookmarkMenuItem, onClickRenameMenuItem, onClickDuplicateMenuItem, onClickDeleteMenuItem, onClickRevertMenuItem,
+    onClickBookmarkMenuItem, onClickRenameMenuItem, onClickDuplicateMenuItem, onClickDeleteMenuItem, onClickRevertMenuItem, onClickSwitchContentWidthMenuItem,
     additionalMenuItemRenderer: AdditionalMenuItems, isInstantRename, alignRight,
   } = props;
 
+  const switchContentWidthHandler = useCallback(async() => {
+    if (!isIPageInfoForOperation(pageInfo) || onClickSwitchContentWidthMenuItem == null) {
+      return;
+    }
+    await onClickSwitchContentWidthMenuItem(pageId, pageInfo.isContainerFluid);
+  }, [onClickSwitchContentWidthMenuItem, pageId, pageInfo]);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const bookmarkItemClickedHandler = useCallback(async() => {
@@ -132,6 +140,16 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
           </DropdownItem>
         ) }
 
+        { isEnableActions && !pageInfo.isEmpty && isIPageInfoForOperation(pageInfo) && (
+          <DropdownItem
+            onClick={switchContentWidthHandler}
+            className="grw-page-control-dropdown-item"
+          >
+            <i className="fa fa-fw fa-text-width grw-page-control-dropdown-icon"></i>
+            { !pageInfo.isContainerFluid ? t('Full Width') : t('Default Width') }
+          </DropdownItem>
+        ) }
+
         {/* Bookmark */}
         { !forceHideMenuItems?.includes(MenuItemType.BOOKMARK) && isEnableActions && !pageInfo.isEmpty && isIPageInfoForOperation(pageInfo) && (
           <DropdownItem
@@ -224,7 +242,7 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
   const {
     pageId, pageInfo: presetPageInfo, fetchOnInit,
     children,
-    onClickBookmarkMenuItem, onClickRenameMenuItem, onClickDuplicateMenuItem, onClickDeleteMenuItem,
+    onClickBookmarkMenuItem, onClickRenameMenuItem, onClickDuplicateMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidthMenuItem,
   } = props;
 
   const [isOpen, setIsOpen] = useState(false);
@@ -242,6 +260,16 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
     }
   }, [isOpen, presetPageInfo, shouldFetch]);
 
+  const switchContentWidthMenuItemHandler = useCallback(async(_pageId: string, _isContainerFluid: boolean) => {
+    if (onClickSwitchContentWidthMenuItem != null) {
+      await onClickSwitchContentWidthMenuItem(_pageId, _isContainerFluid);
+    }
+
+    if (shouldFetch) {
+      mutatePageInfo();
+    }
+  }, [mutatePageInfo, onClickSwitchContentWidthMenuItem, shouldFetch]);
+
   // mutate after handle event
   const bookmarkMenuItemClickHandler = useCallback(async(_pageId: string, _newValue: boolean) => {
     if (onClickBookmarkMenuItem != null) {
@@ -292,6 +320,7 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
         onClickRenameMenuItem={renameMenuItemClickHandler}
         onClickDuplicateMenuItem={duplicateMenuItemClickHandler}
         onClickDeleteMenuItem={deleteMenuItemClickHandler}
+        onClickSwitchContentWidthMenuItem={switchContentWidthMenuItemHandler}
       />
     </Dropdown>
   );

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

@@ -18,7 +18,6 @@ import {
 } from '../Common/Dropdown/PageItemControl';
 import LikeButtons from '../LikeButtons';
 import SubscribeButton from '../SubscribeButton';
-import SwitchContentWidthButton from '../SwitchContentWidthButton';
 import SeenUserInfo from '../User/SeenUserInfo';
 
 
@@ -167,12 +166,6 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
 
   return (
     <div className="d-flex" style={{ gap: '2px' }}>
-      <SwitchContentWidthButton
-        isContainerFluid={isContainerFluid}
-        onSwitchContentWidthClicked={switchContentWidthClickHandler}
-      >
-
-      </SwitchContentWidthButton>
       <span>
         <SubscribeButton
           status={pageInfo.subscriptionStatus}
@@ -211,6 +204,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
           onClickRenameMenuItem={renameMenuItemClickHandler}
           onClickDuplicateMenuItem={duplicateMenuItemClickHandler}
           onClickDeleteMenuItem={deleteMenuItemClickHandler}
+          onClickSwitchContentWidthMenuItem={switchContentWidthClickHandler}
         />
       )}
     </div>

packages/app/src/components/PageList/PageListItemL.tsx

@@ -14,7 +14,7 @@ import urljoin from 'url-join';
 
 
 import { ISelectable } from '~/client/interfaces/selectable-all';
-import { bookmark, unbookmark } from '~/client/services/page-operation';
+import { bookmark, unbookmark, toggleContentWidth } from '~/client/services/page-operation';
 import {
   IPageInfoAll, IPageInfoForEntity, IPageInfoForListing, IPageWithMeta, isIPageInfoForListing, isIPageInfoForEntity,
 } from '~/interfaces/page';
@@ -124,6 +124,10 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
     await bookmarkOperation(_pageId);
   };
 
+  const switchContentWidthMenuItemClickHandler = async(_pageId: string, _isContainerFluid: boolean): Promise<void> => {
+    await toggleContentWidth(_pageId, _isContainerFluid);
+  };
+
   const duplicateMenuItemClickHandler = useCallback(() => {
     const page = {
       pageId: pageData._id,
@@ -235,6 +239,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
                   onClickDuplicateMenuItem={duplicateMenuItemClickHandler}
                   onClickDeleteMenuItem={deleteMenuItemClickHandler}
                   onClickRevertMenuItem={revertMenuItemClickHandler}
+                  onClickSwitchContentWidthMenuItem={switchContentWidthMenuItemClickHandler}
                 />
               </div>
             </div>

packages/app/src/components/SwitchContentWidthButton.tsx

@@ -1,51 +0,0 @@
-import React, { FC } from 'react';
-
-import { useTranslation } from 'react-i18next';
-import { UncontrolledTooltip } from 'reactstrap';
-
-
-interface Props {
-  isContainerFluid?: boolean,
-  onSwitchContentWidthClicked: () => void;
-}
-
-const SwitchContentWidthButton: FC<Props> = (props: Props) => {
-  const { t } = useTranslation();
-  const { isContainerFluid, onSwitchContentWidthClicked } = props;
-
-
-  const handleClick = async() => {
-    if (onSwitchContentWidthClicked != null) {
-      onSwitchContentWidthClicked();
-    }
-  };
-  return (
-    <div className="btn-group" role="group" aria-label="Switch content width">
-      <button
-        type="button"
-        id="default-container-button"
-        onClick={handleClick}
-        className={`btn btn-switch-content-width border-1 ${!isContainerFluid ? 'active' : ''}`}
-      >
-        <i className="fa fa-compress" aria-hidden="true"></i>
-
-      </button>
-      <UncontrolledTooltip placement="top" target="default-container-button" fade={false}>
-        Default container width
-      </UncontrolledTooltip>
-      <button
-        type="button"
-        id="fluid-container-button"
-        onClick={handleClick}
-        className={`btn btn-switch-content-width border-1 ${isContainerFluid ? 'active' : ''}`}
-      >
-        <i className="fa fa-expand" aria-hidden="true"></i>
-      </button>
-      <UncontrolledTooltip placement="top" target="fluid-container-button" fade={false}>
-        Fluid container width
-      </UncontrolledTooltip>
-    </div>
-  );
-};
-
-export default SwitchContentWidthButton;

packages/app/src/styles/atoms/_buttons.scss

@@ -33,17 +33,6 @@
   }
 }
 
-.btn.btn-switch-content-width {
-  @include button-outline-variant(rgba($secondary, 50%), $info, rgba(lighten($info, 10%), 0.15), rgba(lighten($info, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten($info, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-}
-
 .btn.btn-seen-user {
   $color-seen-user: #549c79;