#406 keyboard shortcut to show/hide sidebar

app/src/mainMenuDefinition.js

@@ -69,6 +69,7 @@ module.exports = ({ editMenu }) => [
       { command: 'app.toggleDevTools', hideDisabled: true },
       { command: 'app.toggleFullScreen', hideDisabled: true },
       { command: 'app.minimize', hideDisabled: true },
+      { command: 'toggle.sidebar' },
       { divider: true },
       { command: 'theme.changeTheme', hideDisabled: true },
       { command: 'settings.show' },

packages/web/src/Screen.svelte

@@ -8,6 +8,7 @@
     leftPanelWidth,
     openedSnackbars,
     selectedWidget,
+    visibleWidgetSideBar,
     visibleCommandPalette,
     visibleTitleBar,
     visibleToolbar,
@@ -63,7 +64,7 @@
   <div class="statusbar">
     <StatusBar />
   </div>
-  {#if $selectedWidget}
+  {#if $selectedWidget && $visibleWidgetSideBar}
     <div class="leftpanel">
       <WidgetContainer />
     </div>
@@ -74,7 +75,7 @@
   <div class="content">
     <TabRegister />
   </div>
-  {#if $selectedWidget}
+  {#if $selectedWidget && $visibleWidgetSideBar}
     <div
       class="horizontal-split-handle splitter"
       use:splitterDrag={'clientX'}

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -180,6 +180,7 @@
       });
       currentArchive.set(resp.archiveFolder);
       selectedWidget.set('archive');
+      visibleWidgetSideBar.set(true);
       showSnackbarSuccess(`Saved to archive ${resp.archiveFolder}`);
     };
 
@@ -338,6 +339,7 @@
     openedSingleDatabaseConnections,
     pinnedDatabases,
     selectedWidget,
+    visibleWidgetSideBar,
   } from '../stores';
   import getElectron from '../utility/getElectron';
   import openNewTab from '../utility/openNewTab';

packages/web/src/commands/stdCommands.ts

@@ -6,6 +6,7 @@ import {
   getExtensions,
   getVisibleToolbar,
   visibleToolbar,
+  visibleWidgetSideBar,
 } from '../stores';
 import registerCommand from './registerCommand';
 import { get } from 'svelte/store';
@@ -83,6 +84,15 @@ registerCommand({
   onClick: () => showModal(AboutModal),
 });
 
+registerCommand({
+  id: 'toggle.sidebar',
+  category: 'Sidebar',
+  name: 'Show',
+  toolbarName: 'Toggle sidebar',
+  keyText: 'CtrlOrCommand+B',
+  onClick: () => visibleWidgetSideBar.update(x => !x),
+});
+
 registerCommand({
   id: 'new.connection',
   toolbar: true,

packages/web/src/modals/ImportExportModal.svelte

@@ -16,7 +16,7 @@
   import { getDefaultFileFormat } from '../plugins/fileformats';
   import RunnerOutputFiles from '../query/RunnerOutputFiles.svelte';
   import SocketMessageView from '../query/SocketMessageView.svelte';
-  import { currentArchive, currentDatabase, extensions, getCurrentConfig, selectedWidget } from '../stores';
+  import { currentArchive, currentDatabase, extensions, visibleWidgetSideBar, selectedWidget } from '../stores';
   import { apiCall, apiOff, apiOn } from '../utility/api';
   import createRef from '../utility/createRef';
   import openNewTab from '../utility/openNewTab';
@@ -85,6 +85,7 @@
       apiCall('archive/refresh-files', { folder: refreshArchiveFolderRef.get() });
       $currentArchive = refreshArchiveFolderRef.get();
       $selectedWidget = 'archive';
+      $visibleWidgetSideBar = true;
     }
   };
 

packages/web/src/settings/SettingsModal.svelte

@@ -18,7 +18,13 @@
   import { closeCurrentModal } from '../modals/modalTools';
   import { EDITOR_THEMES, FONT_SIZES } from '../query/AceEditor.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
-  import { currentEditorFontSize, currentEditorTheme, extensions, selectedWidget } from '../stores';
+  import {
+    currentEditorFontSize,
+    currentEditorTheme,
+    extensions,
+    selectedWidget,
+    visibleWidgetSideBar,
+  } from '../stores';
   import { isMac } from '../utility/common';
   import getElectron from '../utility/getElectron';
   import ThemeSkeleton from './ThemeSkeleton.svelte';
@@ -47,6 +53,7 @@ ORDER BY
   function openThemePlugins() {
     closeCurrentModal();
     $selectedWidget = 'plugins';
+    $visibleWidgetSideBar = true;
   }
 </script>
 
@@ -123,7 +130,6 @@ ORDER BY
               { value: 'lowerCase', label: 'lower case' },
             ]}
           />
-
         </svelte:fragment>
         <svelte:fragment slot="2">
           <div class="heading">Application theme</div>

packages/web/src/stores.ts

@@ -50,6 +50,11 @@ function subscribeCssVariable(store, transform, cssVariable) {
 }
 
 export const selectedWidget = writableWithStorage('database', 'selectedWidget');
+export const visibleWidgetSideBar = writableWithStorage(true, 'visibleWidgetSideBar');
+export const visibleSelectedWidget = derived(
+  [selectedWidget, visibleWidgetSideBar],
+  ([$selectedWidget, $visibleWidgetSideBar]) => ($visibleWidgetSideBar ? $selectedWidget : null)
+);
 export const emptyConnectionGroupNames = writableWithStorage([], 'emptyConnectionGroupNames');
 export const openedConnections = writable([]);
 export const openedSingleDatabaseConnections = writable([]);
@@ -128,7 +133,7 @@ export const visibleHamburgerMenuWidget = derived(useSettings(), $settings => {
   return !!$settings['app.fullscreen'];
 });
 
-subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
+subscribeCssVariable(visibleSelectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
 // subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');
 subscribeCssVariable(leftPanelWidth, x => `${x}px`, '--dim-left-panel-width');
 subscribeCssVariable(visibleTitleBar, x => (x ? 1 : 0), '--dim-visible-titlebar');

packages/web/src/utility/openArchiveFolder.ts

@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 import getElectron from './getElectron';
-import { currentArchive, extensions, selectedWidget } from '../stores';
+import { currentArchive, extensions, selectedWidget, visibleWidgetSideBar } from '../stores';
 import { showSnackbarSuccess } from './snackbar';
 import { apiCall } from './api';
 
@@ -16,5 +16,6 @@ export async function openArchiveFolder() {
 
   currentArchive.set(resp);
   selectedWidget.set('archive');
+  visibleWidgetSideBar.set(true);
   showSnackbarSuccess(`Created link ${resp}`);
 }

packages/web/src/widgets/WidgetContainer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { selectedWidget } from '../stores';
+  import { visibleSelectedWidget } from '../stores';
   import ArchiveWidget from './ArchiveWidget.svelte';
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
@@ -9,23 +9,23 @@
   import AppWidget from './AppWidget.svelte';
 </script>
 
-<DatabaseWidget hidden={$selectedWidget != 'database'} />
+<DatabaseWidget hidden={$visibleSelectedWidget != 'database'} />
 
-{#if $selectedWidget == 'file'}
+{#if $visibleSelectedWidget == 'file'}
   <FilesWidget />
 {/if}
-{#if $selectedWidget == 'history'}
+{#if $visibleSelectedWidget == 'history'}
   <HistoryWidget />
 {/if}
-{#if $selectedWidget == 'archive'}
+{#if $visibleSelectedWidget == 'archive'}
   <ArchiveWidget />
 {/if}
-{#if $selectedWidget == 'plugins'}
+{#if $visibleSelectedWidget == 'plugins'}
   <PluginsWidget />
 {/if}
-{#if $selectedWidget == 'cell-data'}
+{#if $visibleSelectedWidget == 'cell-data'}
   <CellDataWidget />
 {/if}
-{#if $selectedWidget == 'app'}
+{#if $visibleSelectedWidget == 'app'}
   <AppWidget />
 {/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { currentDropDownMenu, selectedWidget, visibleCommandPalette, visibleHamburgerMenuWidget } from '../stores';
+  import {
+    currentDropDownMenu,
+    selectedWidget,
+    visibleSelectedWidget,
+    visibleWidgetSideBar,
+    visibleHamburgerMenuWidget,
+  } from '../stores';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
   import { useConfig } from '../utility/metadataLoaders';
   import hasPermission from '../utility/hasPermission';
@@ -60,7 +66,12 @@
   ];
 
   function handleChangeWidget(name) {
-    $selectedWidget = name == $selectedWidget ? null : name;
+    if ($visibleSelectedWidget == name) {
+      $visibleWidgetSideBar = false;
+    } else {
+      $selectedWidget = name;
+      $visibleWidgetSideBar = true;
+    }
   }
   //const handleChangeWidget= e => (selectedWidget.set(item.name))
 
@@ -90,7 +101,11 @@
     </div>
   {/if}
   {#each widgets.filter(x => hasPermission(`widgets/${x.name}`)) as item}
-    <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
+    <div
+      class="wrapper"
+      class:selected={item.name == $visibleSelectedWidget}
+      on:click={() => handleChangeWidget(item.name)}
+    >
       <FontIcon icon={item.icon} title={item.title} />
     </div>
   {/each}