feat: appearance needs re layout after show or hide (#171)

Author: mumiao

src/style/common.scss

@@ -30,7 +30,7 @@ $breadcrumb: prefix('breadcrumb');
 $search: prefix('search');
 
 // ============= The Workbench core component =============
-$activityBar: prefix('activityBar');
+$compositeBar: prefix('compositeBar');
 $editor: prefix('editor');
 $menuBar: prefix('menuBar');
 $panel: prefix('panel');
@@ -39,6 +39,7 @@ $sidebar: prefix('sidebar');
 $statusBar: prefix('statusBar');
 $workbench: prefix('workbench');
 $mainBench: prefix('mainBench');
+$activityBar: prefix('activityBar');
 $notification: prefix('notification');
 $problems: prefix('problems');
 

src/workbench/activityBar/style.scss

@@ -1,12 +1,9 @@
 @import 'mo/style/common';
 
 #{$activityBar} {
-    bottom: 22px;
-    left: 0;
-    position: absolute;
-    top: 35px;
+    flex: 1;
+    padding-bottom: 20px;
     width: 48px;
-    z-index: 1;
 
     &__container {
         display: flex;

src/workbench/menuBar/style.scss

@@ -7,7 +7,6 @@
     font-size: 13px;
     height: 35px;
     justify-content: center;
-    position: absolute;
     width: 48px;
 
     &--left {

src/workbench/style.scss

@@ -3,20 +3,24 @@
 #{$workbench} {
     bottom: 0;
     left: 0;
-    padding-bottom: 22px;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1;
 }
 
+#{$compositeBar} {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    width: auto;
+}
+
 #{$mainBench} {
-    bottom: 22px;
-    height: auto;
-    left: 48px;
-    position: absolute;
-    right: 0;
-    top: 0;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    left: 0;
     width: auto;
 
     /* stylelint-disable */

src/workbench/workbench.tsx

@@ -38,6 +38,7 @@ import { IWorkbench } from 'mo/model';
 
 const mainBenchClassName = prefixClaName('mainBench');
 const workbenchClassName = prefixClaName('workbench');
+const compositeBarClassName = prefixClaName('compositeBar');
 const appClassName = classNames(APP_PREFIX, Utils.isMacOs() ? 'mac' : '');
 
 const panelService = container.resolve<IPanelService>(PanelService);
@@ -65,9 +66,11 @@ export function WorkbenchView(props: IWorkbench & IWorkbenchController) {
     return (
         <div id={ID_APP} className={appClassName} tabIndex={0}>
             <div className={workbenchClassName}>
-                {!menuBar.hidden && <MenuBarView />}
-                {!activityBar.hidden && <ActivityBarView />}
                 <div className={mainBenchClassName}>
+                    <div className={compositeBarClassName}>
+                        {!menuBar.hidden && <MenuBarView />}
+                        {!activityBar.hidden && <ActivityBarView />}
+                    </div>
                     <SplitPane
                         split="vertical"
                         primary="first"
@@ -96,7 +99,7 @@ export function WorkbenchView(props: IWorkbench & IWorkbenchController) {
                                             ? '100%'
                                             : horizontalSplitPanePos[0]
                                     }
-                                    maxSize="99%"
+                                    maxSize="100%"
                                     minSize="10%"
                                 >
                                     <EditorView />