added sidebar toggle button

db/TODO.txt

@@ -2,3 +2,6 @@
 - drop options.utcDateCreated - not used for anything
 - isDeleted = 0 by default
 - rename openTabs to openNoteContexts
+- rename leftPaneVisible to leftSidebarVisible
+  - pane is now used for side by side notes
+  - "left" should be preserved since custom widgets may create right sidebar

src/public/app/layouts/desktop_layout.js

@@ -41,6 +41,7 @@ import QuickSearchWidget from "../widgets/quick_search.js";
 import ButtonWidget from "../widgets/button_widget.js";
 import ProtectedSessionStatusWidget from "../widgets/protected_session_status.js";
 import PaneContainer from "../widgets/containers/pane_container.js";
+import SidebarToggleWidget from "../widgets/sidebar_toggle.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -165,6 +166,7 @@ export default class DesktopLayout {
                 .child(new SpacerWidget())
                 .child(new ProtectedSessionStatusWidget())
                 .child(new SyncStatusWidget())
+                .child(new SidebarToggleWidget())
                 .css("width", "50px")
             )
             .child(new SidePaneContainer('left')

src/public/app/services/load_results.js

@@ -100,7 +100,7 @@ export default class LoadResults {
     }
 
     isOptionReloaded(name) {
-        this.options.includes(name);
+        return this.options.includes(name);
     }
 
     /**

src/public/app/services/split.js

@@ -2,13 +2,15 @@ import options from "./options.js";
 
 let instance;
 
-function setupSplit(left, right) {
+function setupSplit(leftPaneVisible) {
     if (instance) {
         instance.destroy();
         instance = null;
     }
 
-    if (!left && !right) {
+    $("#left-pane").toggle(leftPaneVisible);
+
+    if (!leftPaneVisible) {
         $("#center-pane").css('width', '100%');
 
         return;
@@ -19,37 +21,11 @@ function setupSplit(left, right) {
         leftPaneWidth = 5;
     }
 
-    let rightPaneWidth = options.getInt('rightPaneWidth');
+    if (leftPaneVisible) {
-    if (!rightPaneWidth || rightPaneWidth < 5) {
-        rightPaneWidth = 5;
-    }
-
-    if (left && right) {
-        instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
-            sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
-            gutterSize: 5,
-            onDragEnd: sizes => {
-                options.save('leftPaneWidth', Math.round(sizes[0]));
-                options.save('rightPaneWidth', Math.round(sizes[2]));
-            }
-        });
-    }
-    else if (left) {
         instance = Split(['#left-pane', '#center-pane'], {
             sizes: [leftPaneWidth, 100 - leftPaneWidth],
             gutterSize: 5,
-            onDragEnd: sizes => {
+            onDragEnd: sizes => options.save('leftPaneWidth', Math.round(sizes[0]))
-                options.save('leftPaneWidth', Math.round(sizes[0]));
-            }
-        });
-    }
-    else if (right) {
-        instance = Split(['#center-pane', '#right-pane'], {
-            sizes: [100 - rightPaneWidth, rightPaneWidth],
-            gutterSize: 5,
-            onDragEnd: sizes => {
-                options.save('rightPaneWidth', Math.round(sizes[1]));
-            }
         });
     }
 }

src/public/app/widgets/button_widget.js

@@ -11,39 +11,42 @@ export default class ButtonWidget extends BasicWidget {
     constructor() {
         super();
 
-        this.options = {};
+        this.settings = {};
     }
 
     doRender() {
         this.$widget = $(TPL);
-        this.refreshIcon();
         this.overflowing();
 
-        this.$widget.on("click", () => this.triggerCommand(this.options.command));
+        this.$widget.on("click", () => this.triggerCommand(this.settings.command));
 
         super.doRender();
     }
 
     refreshIcon() {
-        this.$widget.attr("title", this.options.title);
+        this.$widget.attr("title", this.settings.title);
         this.$widget.find("span.bx")
             .removeClass()
             .addClass("bx")
-            .addClass(this.options.icon);
+            .addClass(this.settings.icon);
+    }
+
+    initialRenderCompleteEvent() {
+        this.refreshIcon();
     }
 
     icon(icon) {
-        this.options.icon = icon;
+        this.settings.icon = icon;
         return this;
     }
 
     title(title) {
-        this.options.title = title;
+        this.settings.title = title;
         return this;
     }
 
     command(command) {
-        this.options.command = command;
+        this.settings.command = command;
         return this;
     }
 }

src/public/app/widgets/containers/side_pane_container.js

@@ -2,24 +2,20 @@ import options from "../../services/options.js";
 import FlexContainer from "./flex_container.js";
 
 export default class SidePaneContainer extends FlexContainer {
-    constructor(side) {
+    constructor() {
         super('column');
 
-        this.side = side;
+        this.id('left-pane');
-
-        this.id(side + '-pane');
         this.css('height', '100%');
     }
 
     isEnabled() {
-        return super.isEnabled() && options.is(this.side + 'PaneVisible');
+        return super.isEnabled() && options.is( 'leftPaneVisible');
     }
 
-    sidebarVisibilityChangedEvent({side, show}) {
+    entitiesReloadedEvent({loadResults}) {
-        this.toggleInt(this.isEnabled());
+        if (loadResults.isOptionReloaded("leftPaneVisible")) {
-
+            this.toggleInt(this.isEnabled());
-        if (this.side === side && show) {
-            this.handleEvent('lazyLoaded');
         }
     }
 }

src/public/app/widgets/note_context_aware_widget.js

@@ -100,12 +100,4 @@ export default class NoteContextAwareWidget extends BasicWidget {
     async frocaReloadedEvent() {
         await this.refresh();
     }
-
-    async lazyLoadedEvent() {
-        if (!this.noteContext) { // has not been loaded yet
-            this.noteContext = appContext.tabManager.getActiveContext();
-        }
-
-        await this.refresh();
-    }
 }

src/public/app/widgets/protected_session_status.js

@@ -2,32 +2,28 @@ import ButtonWidget from "./button_widget.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 
 export default class ProtectedSessionStatusWidget extends ButtonWidget {
-    constructor() {
-        super();
-    }
-
     doRender() {
-        this.updateOptions();
+        this.updateSettings();
 
         super.doRender();
     }
 
-    updateOptions() {
+    updateSettings() {
-        this.options.icon = protectedSessionHolder.isProtectedSessionAvailable()
+        this.settings.icon = protectedSessionHolder.isProtectedSessionAvailable()
             ? "bx-shield-quarter"
             : "bx-log-in";
 
-        this.options.title = protectedSessionHolder.isProtectedSessionAvailable()
+        this.settings.title = protectedSessionHolder.isProtectedSessionAvailable()
             ? "Protected session is active. Click to leave protected session."
             : "Click to enter protected session";
 
-        this.options.command = protectedSessionHolder.isProtectedSessionAvailable()
+        this.settings.command = protectedSessionHolder.isProtectedSessionAvailable()
             ? "leaveProtectedSession"
             : "enterProtectedSession";
     }
 
     protectedSessionStartedEvent() {
-        this.updateOptions();
+        this.updateSettings();
         this.refreshIcon();
     }
 }

src/public/app/widgets/side_pane_toggles.js

@@ -3,15 +3,8 @@ import splitService from "../services/split.js";
 import BasicWidget from "./basic_widget.js";
 
 const TPL = `
-<div class="hide-in-zen-mode">
+<div>
     <style>
-    .hide-right-pane-button, .show-right-pane-button {
-        position: fixed;
-        bottom: 10px;
-        right: 10px;
-        z-index: 100;
-    }
-    
     .hide-left-pane-button, .show-left-pane-button {
         position: fixed;
         bottom: 10px;

src/public/app/widgets/sidebar_toggle.js

@@ -0,0 +1,39 @@
+import ButtonWidget from "./button_widget.js";
+import options from "../services/options.js";
+import splitService from "../services/split.js";
+
+export default class SidebarToggleWidget extends ButtonWidget {
+    refreshIcon() {
+        const isLeftPaneVisible = options.is('leftPaneVisible');
+
+        this.settings.icon = isLeftPaneVisible
+            ? "bx-chevrons-left"
+            : "bx-chevrons-right";
+
+        this.settings.title = isLeftPaneVisible
+            ? "Hide sidebar."
+            : "Open sidebar.";
+
+        this.settings.command = isLeftPaneVisible
+            ? "hideSidebar"
+            : "showSidebar";
+
+        super.refreshIcon();
+
+        splitService.setupSplit(isLeftPaneVisible);
+    }
+
+    hideSidebarCommand() {
+        options.save(`leftPaneVisible`, "false");
+    }
+
+    showSidebarCommand() {
+        options.save(`leftPaneVisible`, "true");
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isOptionReloaded("leftPaneVisible")) {
+            this.refreshIcon();
+        }
+    }
+}