fix: re-layout the Workbench when StatusBar is hidden (#557)

Author: kiwiwong

src/controller/menuBar.ts

@@ -11,6 +11,8 @@ import {
     LayoutService,
     IBuiltinService,
     BuiltinService,
+    ActivityBarService,
+    IActivityBarService,
 } from 'mo/services';
 import { ID_APP, ID_SIDE_BAR } from 'mo/common/id';
 import { IMonacoService, MonacoService } from 'mo/monaco/monacoService';
@@ -41,6 +43,7 @@ export class MenuBarController
     private readonly layoutService: ILayoutService;
     private readonly monacoService: IMonacoService;
     private readonly builtinService: IBuiltinService;
+    private readonly activityBarService: IActivityBarService;
     private focusinEle: HTMLElement | null = null;
 
     private automation = {};
@@ -51,6 +54,7 @@ export class MenuBarController
         this.layoutService = container.resolve(LayoutService);
         this.monacoService = container.resolve(MonacoService);
         this.builtinService = container.resolve(BuiltinService);
+        this.activityBarService = container.resolve(ActivityBarService);
     }
 
     public initView() {
@@ -119,6 +123,9 @@ export class MenuBarController
          */
         this.emit(MenuBarEvent.onSelect, menuId);
         this.automation[menuId]?.();
+
+        // Update the check status of MenuBar in the contextmenu of ActivityBar
+        this.updateActivityBarContextMenu(menuId);
     };
 
     public createFile = () => {
@@ -271,4 +278,14 @@ export class MenuBarController
         const menuBarData = this.getFilteredMenuBarData(menuData, ids);
         return menuBarData;
     }
+
+    private updateActivityBarContextMenu(menuId: UniqueId) {
+        const {
+            MENU_VIEW_MENUBAR,
+            CONTEXT_MENU_MENU,
+        } = this.builtinService.getConstants();
+        if (CONTEXT_MENU_MENU && menuId === MENU_VIEW_MENUBAR) {
+            this.activityBarService.toggleContextMenuChecked(CONTEXT_MENU_MENU);
+        }
+    }
 }

src/workbench/style.scss

@@ -50,6 +50,10 @@
             height: calc(100% - 25px);
         }
     }
+
+    &--with-hidden-statusBar {
+        height: 100%;
+    }
 }
 
 #{$compositeBar} {

src/workbench/workbench.tsx

@@ -36,6 +36,10 @@ const workbenchWithHorizontalMenuBarClassName = getBEMModifier(
     workbenchClassName,
     'with-horizontal-menuBar'
 );
+const withHiddenStatusBar = getBEMModifier(
+    workbenchClassName,
+    'with-hidden-statusBar'
+);
 
 const layoutController = container.resolve(LayoutController);
 const layoutService = container.resolve(LayoutService);
@@ -82,13 +86,19 @@ export function WorkbenchView(props: IWorkbench & ILayout & ILayoutController) {
 
     const isMenuBarHorizontal =
         !menuBar.hidden && menuBar.mode === MenuBarMode.horizontal;
-    const horizontal = isMenuBarHorizontal
+    const horizontalMenuBar = isMenuBarHorizontal
         ? workbenchWithHorizontalMenuBarClassName
         : null;
+    const hideStatusBar = statusBar.hidden ? withHiddenStatusBar : null;
+    const workbenchFinalClassName = classNames(
+        workbenchClassName,
+        horizontalMenuBar,
+        hideStatusBar
+    );
 
     return (
         <div id={ID_APP} className={appClassName} tabIndex={0}>
-            <div className={classNames(workbenchClassName, horizontal)}>
+            <div className={workbenchFinalClassName}>
                 {isMenuBarHorizontal && (
                     <MenuBarView mode={MenuBarMode.horizontal} />
                 )}