left sidebar can now be also collapsible

2020-02-04 20:42:40 +07:00 · 2020-02-04 20:42:40 +07:00 · 0cc013c13f
parent c5475765e5
commit 0cc013c13f
9 changed files with 76 additions and 61 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -2661,9 +2661,9 @@
      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA=="
    },
    "electron": {
-      "version": "8.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-8.0.0-beta.9.tgz",
-      "integrity": "sha512-5aVB7ixySU5WF4p4NiGN/378idgOLSggEh80FfvKzbE5kKmegWA4m0mppkypwMWAVFzNcVubkI6vE0rerFQZKw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-8.0.0.tgz",
+      "integrity": "sha512-vBXUKRqTUq0jv1upvISdvScDDH3uCPwXj4eA5BeR3UDbJp2hOhq7eJxwjIQbfLQql98aYz4X6pSlzBnhfyQqHA==",
      "dev": true,
      "requires": {
        "@electron/get": "^1.0.1",
--- a/package.json
+++ b/package.json
@ -27,7 +27,7 @@
    "commonmark": "0.29.1",
    "cookie-parser": "1.4.4",
    "csurf": "1.11.0",
-    "dayjs": "1.8.19",
+    "dayjs": "1.8.20",
    "debug": "4.1.1",
    "ejs": "2.7.4",
    "electron-debug": "3.0.1",
@ -76,7 +76,7 @@
    "ws": "7.2.1"
  },
  "devDependencies": {
-    "electron": "8.0.0-beta.9",
+    "electron": "8.0.0",
    "electron-builder": "22.3.2",
    "electron-packager": "14.2.0",
    "electron-rebuild": "1.10.0",
--- a/src/public/javascripts/desktop.js
+++ b/src/public/javascripts/desktop.js
@ -145,38 +145,33 @@ if (utils.isElectron()) {
    import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
 }

-const rightPane = $("#right-pane");
+optionService.waitForOptions().then(options => {
+    toggleSidebar('left', options.is('leftPaneVisible'));
+    toggleSidebar('right', options.is('rightPaneVisible'));

-const $showRightPaneButton = $("#show-right-pane-button");
-const $hideRightPaneButton = $("#hide-right-pane-button");
+    splitService.setupSplit(paneVisible.left, paneVisible.right);
+});

-optionService.waitForOptions().then(options => toggleSidebar(options.is('rightPaneVisible')));
+const paneVisible = {};

-function toggleSidebar(show) {
-    rightPane.toggle(show);
-    $showRightPaneButton.toggle(!show);
-    $hideRightPaneButton.toggle(show);
+function toggleSidebar(side, show) {
+    $(`#${side}-pane`).toggle(show);
+    $(`#show-${side}-pane-button`).toggle(!show);
+    $(`#hide-${side}-pane-button`).toggle(show);

-    if (show) {
-        splitService.setupSplitWithSidebar();
-    }
-    else {
-        splitService.setupSplitWithoutSidebar();
-    }
+    paneVisible[side] = show;
 }

-$hideRightPaneButton.on('click', () => {
-    toggleSidebar(false);
+function toggleAndSave(side, show) {
+    toggleSidebar(side, show);

-    server.put('options/rightPaneVisible/false');
-});
+    splitService.setupSplit(paneVisible.left, paneVisible.right);

-$showRightPaneButton.on('click', async () => {
-    toggleSidebar(true);
+    server.put(`options/${side}PaneVisible/` + show.toString());
+}

-    await server.put('options/rightPaneVisible/true');
+$("#show-right-pane-button").on('click', () => toggleAndSave('right', true));
+$("#hide-right-pane-button").on('click', () => toggleAndSave('right', false));

-    const {sidebar} = appContext.getActiveTabContext();
-    await sidebar.noteLoaded();
-    sidebar.show();
-});
+$("#show-left-pane-button").on('click', () => toggleAndSave('left', true));
+$("#hide-left-pane-button").on('click', () => toggleAndSave('left', false));
--- a/src/public/javascripts/services/app_context.js
+++ b/src/public/javascripts/services/app_context.js
@ -196,8 +196,8 @@ class AppContext {

        this.components = [
            new Entrypoints(),
-            this.tabRow,
            new DialogEventComponent(this),
+            ...topPaneWidgets,
            ...leftPaneWidgets,
            ...centerPaneWidgets,
            ...rightPaneWidgets
--- a/src/public/javascripts/services/split.js
+++ b/src/public/javascripts/services/split.js
@ -12,40 +12,50 @@ async function getPaneWidths() {
    };
 }

-async function setupSplitWithSidebar() {
+async function setupSplit(left, right) {
    if (instance) {
        instance.destroy();
+        instance = null;
    }

-    const {leftPaneWidth, rightPaneWidth} = await getPaneWidths();
-
-    instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
-        sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
-        gutterSize: 5,
-        onDragEnd: sizes => {
-            server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
-            server.put('options/rightPaneWidth/' + Math.round(sizes[2]));
-        }
-    });
-}
+    if (!left && !right) {
+        $("#center-pane").css('width', '100%');

-async function setupSplitWithoutSidebar() {
-    if (instance) {
-        instance.destroy();
+        return;
    }

-    const {leftPaneWidth} = await getPaneWidths();
+    const {leftPaneWidth, rightPaneWidth} = await getPaneWidths();

-    instance = Split(['#left-pane', '#center-pane'], {
-        sizes: [leftPaneWidth, 100 - leftPaneWidth],
-        gutterSize: 5,
-        onDragEnd: sizes => {
-            server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
-        }
-    });
+    if (left && right) {
+        instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
+            sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => {
+                server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
+                server.put('options/rightPaneWidth/' + Math.round(sizes[2]));
+            }
+        });
+    }
+    else if (left) {
+        instance = Split(['#left-pane', '#center-pane'], {
+            sizes: [leftPaneWidth, 100 - leftPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => {
+                server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
+            }
+        });
+    }
+    else if (right) {
+        instance = Split(['#center-pane', '#right-pane'], {
+            sizes: [100 - rightPaneWidth, rightPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => {
+                server.put('options/rightPaneWidth/' + Math.round(sizes[1]));
+            }
+        });
+    }
 }

 export default {
-    setupSplitWithSidebar,
-    setupSplitWithoutSidebar
+    setupSplit
 };
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@ -153,6 +153,13 @@ body {
    z-index: 1000;
 }

+#hide-left-pane-button, #show-left-pane-button {
+    position: fixed;
+    bottom: 10px;
+    left: 10px;
+    z-index: 1000;
+}
+
 #right-pane {
    overflow: auto;
    padding-top: 4px;
--- a/src/routes/api/options.js
+++ b/src/routes/api/options.js
@ -34,6 +34,7 @@ const ALLOWED_OPTIONS = new Set([
    'imageJpegQuality',
    'leftPaneWidth',
    'rightPaneWidth',
+    'leftPaneVisible',
    'rightPaneVisible',
    'nativeTitleBarVisible'
 ]);
--- a/src/services/options_init.js
+++ b/src/services/options_init.js
@ -78,6 +78,7 @@ const defaultOptions = [
    { name: 'autoFixConsistencyIssues', value: 'true', isSynced: false },
    { name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-swift","text/xml","text/x-yaml"]', isSynced: true },
    { name: 'leftPaneWidth', value: '25', isSynced: false },
+    { name: 'leftPaneVisible', value: 'true', isSynced: false },
    { name: 'rightPaneWidth', value: '25', isSynced: false },
    { name: 'rightPaneVisible', value: 'true', isSynced: false },
    { name: 'nativeTitleBarVisible', value: 'false', isSynced: false },
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@ -13,17 +13,18 @@
 <div id="container" style="display: none;">
    <div id="top-pane"></div>

-    <div style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
-        <div id="left-pane" class="hide-in-zen-mode"></div>
+    <div id="main-pane" style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
+        <button id="hide-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>
+        <button id="show-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
+
+        <div id="left-pane"></div>

        <div id="center-pane"></div>

        <button id="hide-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
        <button id="show-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>

-        <div id="right-pane" class="hide-in-zen-mode">
-            <div id="sidebar-container"></div>
-        </div>
+        <div id="right-pane"></div>
    </div>

    <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>