Add button to switch content width

https://youtrack.weseek.co.jp/issue/GW-7826
- Add icon in switch content width button
- Add style for switch content width button
- Add route to update content width
- Create method to update content width in page-operation
- Implement toggleContentWidth in SubNavButtons and adjust the props

packages/app/src/client/services/page-operation.ts

@@ -36,6 +36,15 @@ export const toggleBookmark = async(pageId: string, currentValue?: boolean): Pro
   }
 };
 
+export const toggleContentWidth = async(pageId: string, currentValue?: boolean): Promise<void> => {
+  try {
+    await apiv3Put('/page/content-width', { pageId, bool: !currentValue });
+  }
+  catch (err) {
+    toastError(err);
+  }
+};
+
 export const bookmark = async(pageId: string): Promise<void> => {
   try {
     await apiv3Put('/bookmarks', { pageId, bool: true });

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

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 
-import { toggleBookmark, toggleLike, toggleSubscribe } from '~/client/services/page-operation';
+import {
+  toggleBookmark, toggleLike, toggleSubscribe, toggleContentWidth,
+} from '~/client/services/page-operation';
 import {
   IPageInfoAll, IPageToDeleteWithMeta, IPageToRenameWithMeta, isIPageInfoForEntity, isIPageInfoForOperation,
 } from '~/interfaces/page';
@@ -141,14 +143,21 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
     onClickDeleteMenuItem(pageToDelete);
   }, [onClickDeleteMenuItem, pageId, pageInfo, path, revisionId]);
 
+  const switchContentWidthClickHandler = useCallback(async() => {
+    if (isGuestUser == null || isGuestUser) {
+      return;
+    }
+    if (!isIPageInfoForOperation(pageInfo)) {
+      return;
+    }
+    await toggleContentWidth(pageId, pageInfo.isContainerFluid);
+    mutatePageInfo();
+  }, [isGuestUser, mutatePageInfo, pageId, pageInfo]);
+
   if (!isIPageInfoForOperation(pageInfo)) {
     return <></>;
   }
 
-  const switchContentWidthHandler = () => {
-    // TODO Implement switch content width
-  };
-
   const {
     sumOfLikers, sumOfSeenUsers, isLiked, bookmarkCount, isBookmarked, isContainerFluid,
   } = pageInfo;
@@ -160,7 +169,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
     <div className="d-flex" style={{ gap: '2px' }}>
       <SwitchContentWidthButton
         isContainerFluid={isContainerFluid}
-        onSwitchContentWidthClicked={switchContentWidthHandler}
+        onSwitchContentWidthClicked={switchContentWidthClickHandler}
       >
 
       </SwitchContentWidthButton>

packages/app/src/components/SwitchContentWidthButton.tsx

@@ -27,7 +27,8 @@ const SwitchContentWidthButton: FC<Props> = (props: Props) => {
         onClick={handleClick}
         className={`btn btn-switch-content-width border-1 ${!isContainerFluid ? 'active' : ''}`}
       >
-        Default
+        <i className="fa fa-compress" aria-hidden="true"></i>
+
       </button>
       <UncontrolledTooltip placement="top" target="default-container-button" fade={false}>
         Default container width
@@ -38,7 +39,7 @@ const SwitchContentWidthButton: FC<Props> = (props: Props) => {
         onClick={handleClick}
         className={`btn btn-switch-content-width border-1 ${isContainerFluid ? 'active' : ''}`}
       >
-        Full Width
+        <i className="fa fa-expand" aria-hidden="true"></i>
       </button>
       <UncontrolledTooltip placement="top" target="fluid-container-button" fade={false}>
         Fluid container width

packages/app/src/server/routes/apiv3/page.js

@@ -215,6 +215,10 @@ module.exports = (crowi) => {
     subscribeStatus: [
       query('pageId').isString(),
     ],
+    contentWidth: [
+      body('pageId').isString(),
+      body('bool').isBoolean(),
+    ],
   };
 
   /**
@@ -785,5 +789,18 @@ module.exports = (crowi) => {
     }
   });
 
+  router.put('/content-width', accessTokenParser, loginRequiredStrictly, csrf, validator.contentWidth, apiV3FormValidator, async(req, res) => {
+    const { pageId, bool: isContainerFluid } = req.body;
+
+    try {
+      const page = await Page.updateOne({ _id: pageId }, { $set: { isContainerFluid } });
+      return res.apiv3({ page });
+    }
+    catch (err) {
+      logger.error('update-content-width-failed', err);
+      return res.apiv3Err(err, 500);
+    }
+  });
+
   return router;
 };

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

@@ -33,6 +33,17 @@
   }
 }
 
+.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;