Change icon and set body style

https://youtrack.weseek.co.jp/issue/GW-7826
- Change icon of switch content width conditionally
- Update body style based on isContainerFluid value
- Update IPageInfo interface
- Update translation label for switch content width menu

packages/app/resource/locales/en_US/translation.json

@@ -161,6 +161,7 @@
   "No bookmarks yet": "No bookmarks yet",
   "add_bookmark": "Add to Bookmarks",
   "remove_bookmark": "Remove from Bookmarks",
+  "wide_view": "Wide View",
   "Recent Created": "Recent Created",
   "Recent Changes": "Recent Changes",
   "Page Tree": "Page Tree",

packages/app/resource/locales/ja_JP/translation.json

@@ -163,6 +163,7 @@
   "No bookmarks yet": "No bookmarks yet",
   "add_bookmark": "ブックマークに追加",
   "remove_bookmark": "ブックマークから削除",
+  "wide_view": "ワイドビュー",
   "Recent Created": "最新の作成",
   "Recent Changes": "最新の変更",
   "Page Tree": "ページツリー",

packages/app/resource/locales/zh_CN/translation.json

@@ -169,6 +169,7 @@
   "No bookmarks yet": "暂无书签",
   "add_bookmark": "添加到书签",
   "remove_bookmark": "从书签中删除",
+  "wide_view": "视野开阔",
 	"Recent Created": "最新创建",
   "Recent Changes": "最新修改",
   "Page Tree": "页面树",

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

@@ -145,8 +145,9 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
             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') }
+            <i className={`fa fa-fw ${!pageInfo.isContainerFluid ? 'fa-toggle-off' : 'fa-toggle-on'} grw-page-control-dropdown-icon`}>
+            </i>
+            { t('wide_view') }
           </DropdownItem>
         ) }
 
@@ -258,6 +259,14 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
     if (!isIPageInfoForOperation(presetPageInfo) && isOpen) {
       setShouldFetch(true);
     }
+    if (presetPageInfo?.isContainerFluid) {
+      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) => {

packages/app/src/interfaces/page.ts

@@ -53,6 +53,7 @@ export type IPageInfo = {
   isDeletable: boolean,
   isAbleToDeleteCompletely: boolean,
   isRevertible: boolean,
+  isContainerFluid?: boolean,
 }
 
 export type IPageInfoForEntity = IPageInfo & {
@@ -67,7 +68,6 @@ export type IPageInfoForOperation = IPageInfoForEntity & {
   isBookmarked?: boolean,
   isLiked?: boolean,
   subscriptionStatus?: SubscriptionStatusType,
-  isContainerFluid?: boolean,
 }
 
 export type IPageInfoForListing = IPageInfoForEntity & HasRevisionShortbody;