add toggle statusbar (codesandbox#2427)

* add toggle statusbar

* replace with vscode id

* toggle in old state management

* work always

Author: SaraVieira

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -355,6 +355,10 @@ export const errorsCleared: Action = ({ state }) => {
   state.editor.errors = [];
 };
 
+export const toggleStatusBar: Action = ({ state }) => {
+  state.editor.statusBar = !state.editor.statusBar;
+};
+
 export const projectViewToggled: Action = ({ state }) => {
   state.editor.isInProjectView = !state.editor.isInProjectView;
 };

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -55,6 +55,7 @@ type State = {
   quickActionsOpen: boolean;
   previewWindowVisible: boolean;
   workspaceConfigCode: string;
+  statusBar: boolean;
   previewWindowOrientation: WindowOrientation;
   isAllModulesSynced: Derive<State, boolean>;
   currentSandbox: Derive<State, Sandbox>;
@@ -103,6 +104,7 @@ export const state: State = {
   isUpdatingPrivacy: false,
   quickActionsOpen: false,
   previewWindowVisible: true,
+  statusBar: true,
   previewWindowOrientation:
     window.innerHeight / window.innerWidth > 0.9
       ? WindowOrientation.HORIZONTAL

packages/app/src/app/pages/Sandbox/Editor/index.js

@@ -16,7 +16,7 @@ import getVSCodeTheme from './utils/get-vscode-theme';
 
 const STATUS_BAR_SIZE = 22;
 
-const AOverride = styled.div`
+const StatusBar = styled.div`
   a {
     color: inherit;
   }
@@ -68,6 +68,8 @@ class ContentSplit extends React.Component {
     const hideNavigation =
       store.preferences.settings.zenMode && store.workspace.workspaceHidden;
 
+    const statusBar = store.editor.statusBar;
+
     const templateDef = sandbox && getTemplateDefinition(sandbox.template);
 
     const topOffset = store.preferences.settings.zenMode ? 0 : 3 * 16;
@@ -99,6 +101,7 @@ class ContentSplit extends React.Component {
                 top: topOffset,
                 right: 0,
                 bottom: bottomOffset,
+                height: statusBar ? 'auto' : 'calc(100% - 3.5rem)',
               }}
             >
               <SplitPane
@@ -132,9 +135,10 @@ class ContentSplit extends React.Component {
               </SplitPane>
 
               {vscode && (
-                <AOverride
+                <StatusBar
                   style={{
                     position: 'fixed',
+                    display: statusBar ? 'block' : 'none',
                     bottom: 0,
                     left: 0,
                     right: 0,
@@ -146,7 +150,7 @@ class ContentSplit extends React.Component {
                     className="part statusbar"
                     id="workbench.parts.statusbar"
                   />
-                </AOverride>
+                </StatusBar>
               )}
             </div>
           </Fullscreen>

packages/app/src/app/store/modules/editor/index.js

@@ -45,6 +45,7 @@ export default Module({
     isUpdatingPrivacy: false,
     quickActionsOpen: false,
     previewWindowVisible: true,
+    statusBar: true,
     previewWindowOrientation:
       window.innerHeight / window.innerWidth > 0.9 ? 'horizontal' : 'vertical',
     themes,
@@ -101,6 +102,7 @@ export default Module({
     prettifyClicked: sequences.prettifyCode,
     errorsCleared: sequences.clearErrors,
     projectViewToggled: sequences.toggleProjectView,
+    toggleStatusBar: sequences.toggleStatusBar,
     previewActionReceived: sequences.handlePreviewAction,
     privacyUpdated: sequences.updatePrivacy,
     frozenUpdated: sequences.updateFrozen,

packages/app/src/app/store/modules/editor/model.js

@@ -214,4 +214,5 @@ export default {
     tabPosition: types.number,
   }),
   workspaceConfigCode: types.string,
+  statusBar: types.boolean,
 };

packages/app/src/app/store/modules/editor/sequences.js

@@ -29,6 +29,8 @@ export const openQuickActions = set(state`editor.quickActionsOpen`, true);
 
 export const closeQuickActions = set(state`editor.quickActionsOpen`, false);
 
+export const toggleStatusBar = toggle(state`editor.statusBar`);
+
 export const toggleProjectView = toggle(state`editor.isInProjectView`);
 
 const hasEnoughTabs = when(state`editor.tabs`, tabs => tabs.length > 1);

packages/app/src/app/vscode/index.ts

@@ -51,6 +51,15 @@ class VSCodeManager {
   }
 
   private addWorkbenchActions() {
+    this.addWorkbenchAction({
+      id: 'workbench.action.toggleStatusbarVisibility',
+      label: 'Toggle Status Bar Visibility',
+      commandLabel: 'Toggle Status Bar Visibility',
+      category: 'View',
+      run: () => {
+        this.controller.getSignal('editor.toggleStatusBar')();
+      },
+    });
     this.addWorkbenchAction({
       id: 'view.preview.flip',
       label: 'Flip Preview Layout',