widgetized standard toolbar

src/public/javascripts/services/app_context.js

@@ -20,6 +20,8 @@ import WhatLinksHereWidget from "../widgets/what_links_here.js";
 import AttributesWidget from "../widgets/attributes.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
 import GlobalMenuWidget from "../widgets/global_menu.js";
+import HorizontalFlexContainer from "../widgets/horizontal_flex_container.js";
+import StandardTopWidget from "../widgets/standard_top_widget.js";
 
 class AppContext {
     constructor() {
@@ -32,18 +34,22 @@ class AppContext {
     }
 
     showWidgets() {
-        const $tabPane = $("#tab-pane");
 
         this.tabRow = new TabRowWidget(this);
 
-        const tabPaneWidgets = [
-            new GlobalMenuWidget(this),
-            this.tabRow,
-            new TitleBarButtonsWidget(this)
+        const topPaneWidgets = [
+            new HorizontalFlexContainer(this, [
+                new GlobalMenuWidget(this),
+                this.tabRow,
+                new TitleBarButtonsWidget(this)
+            ]),
+            new StandardTopWidget(this)
         ];
 
-        for (const widget of tabPaneWidgets) {
-            widget.renderTo($tabPane);
+        const $topPane = $("#top-pane");
+
+        for (const widget of topPaneWidgets) {
+            widget.renderTo($topPane);
         }
 
         const $leftPane = $("#left-pane");

src/public/javascripts/services/entrypoints.js

@@ -36,17 +36,6 @@ function registerEntrypoints() {
 
     keyboardActionService.setGlobalActionHandler("AddLinkToText", () => import(ADD_LINK).then(d => d.showDialog()));
 
-    const showJumpToNoteDialog = () => import(JUMP_TO_NOTE).then(d => d.showDialog());
-    $("#jump-to-note-dialog-button").on('click', showJumpToNoteDialog);
-    keyboardActionService.setGlobalActionHandler("JumpToNote", showJumpToNoteDialog);
-
-    const showRecentChanges = () => import(RECENT_CHANGES).then(d => d.showDialog());
-    $("#recent-changes-button").on('click', showRecentChanges);
-    keyboardActionService.setGlobalActionHandler("ShowRecentChanges", showRecentChanges);
-
-    $("#enter-protected-session-button").on('click', protectedSessionService.enterProtectedSession);
-    $("#leave-protected-session-button").on('click', protectedSessionService.leaveProtectedSession);
-
     keyboardActionService.setGlobalActionHandler('SearchNotes', searchNotesService.toggleSearch);
 
     const $noteTabContainer = $("#note-tab-container");
@@ -85,15 +74,6 @@ function registerEntrypoints() {
     $noteTabContainer.on("click", ".show-link-map-button", showLinkMapDialog);
     keyboardActionService.setGlobalActionHandler("ShowLinkMap", showLinkMapDialog);
 
-    if (utils.isElectron()) {
-        $("#history-navigation").show();
-        $("#history-back-button").on('click', window.history.back);
-        keyboardActionService.setGlobalActionHandler("BackInNoteHistory", window.history.back);
-
-        $("#history-forward-button").on('click', window.history.forward);
-        keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward);
-    }
-
     keyboardActionService.setGlobalActionHandler("InsertDateTimeToText", () => {
         const date = new Date();
         const dateString = utils.formatDateTime(date);

src/public/javascripts/widgets/history_navigation.js

@@ -0,0 +1,36 @@
+import BasicWidget from "./basic_widget.js";
+import utils from "../services/utils.js";
+import keyboardActionService from "../services/keyboard_actions.js";
+
+const TPL = `
+<div class="history-navigation">
+    <style>
+    .history-navigation {
+        margin: 0 15px 0 5px;
+    }
+    </style>
+
+    <a title="Go to previous note." class="history-back-button icon-action bx bx-left-arrow-circle"></a>
+
+    <a title="Go to next note." class="history-forward-button icon-action bx bx-right-arrow-circle"></a>
+</div>
+`;
+
+export default class HistoryNavigationWidget extends BasicWidget {
+    render() {
+        if (!utils.isElectron()) {
+            return;
+        }
+
+        this.$widget = $(TPL);
+
+        this.$widget.find(".history-back-button").on('click', window.history.back);
+        this.$widget.find(".history-forward-button").on('click', window.history.forward);
+
+        // FIXME: does not belong here
+        keyboardActionService.setGlobalActionHandler("BackInNoteHistory", window.history.back);
+        keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward);
+
+        return this.$widget;
+    }
+}

src/public/javascripts/widgets/horizontal_flex_container.js

@@ -0,0 +1,19 @@
+import BasicWidget from "./basic_widget.js";
+
+export default class HorizontalFlexContainer extends BasicWidget {
+    constructor(appContext, widgets) {
+        super(appContext);
+
+        this.childWidgets = widgets;
+    }
+
+    render() {
+        this.$widget = $(`<div style="display: flex; flex-direction: row;">`);
+
+        for (const widget of this.childWidgets) {
+            this.$widget.append(widget.render());
+        }
+
+        return this.$widget;
+    }
+}

src/public/javascripts/widgets/standard_top_widget.js

@@ -0,0 +1,92 @@
+import BasicWidget from "./basic_widget.js";
+import HistoryNavigationWidget from "./history_navigation.js";
+import keyboardActionService from "../services/keyboard_actions.js";
+import protectedSessionService from "../services/protected_session.js";
+
+const JUMP_TO_NOTE = "../dialogs/jump_to_note.js";
+const RECENT_CHANGES = "../dialogs/recent_changes.js";
+
+const TPL = `
+<div class="standard-top-widget">
+    <style>
+    .standard-top-widget {
+        background-color: var(--header-background-color);
+        display: flex;
+        align-items: center;
+        padding-top: 4px;
+    }
+    
+    .standard-top-widget button {
+        padding: 1px 5px 1px 5px;
+        font-size: smaller;
+        margin-bottom: 2px;
+        margin-top: 2px;
+        margin-right: 8px;
+        border-color: transparent !important;
+    }
+    
+    .standard-top-widget button.btn-sm .bx {
+        position: relative;
+        top: 1px;
+    }
+    
+    .standard-top-widget button:hover {
+        border-color: var(--button-border-color) !important;
+    }
+    </style>
+
+    <div style="flex-grow: 100; display: flex;">
+        <button class="btn btn-sm jump-to-note-dialog-button" data-kb-action="JumpToNote">
+            <span class="bx bx-crosshair"></span>
+            Jump to note
+        </button>
+    
+        <button class="btn btn-sm recent-changes-button" data-kb-action="ShowRecentChanges">
+            <span class="bx bx-history"></span>
+    
+            Recent changes
+        </button>
+    
+        <button class="btn btn-sm enter-protected-session-button"
+                title="Enter protected session to be able to find and view protected notes">
+            <span class="bx bx-log-in"></span>
+    
+            Enter protected session
+        </button>
+    
+        <button class="btn btn-sm leave-protected-session-button"
+                title="Leave protected session so that protected notes are not accessible any more."
+                style="display: none;">
+            <span class="bx bx-log-out"></span>
+    
+            Leave protected session
+        </button>
+    </div>
+    
+    <div id="plugin-buttons"></div>
+</div>`;
+
+export default class StandardTopWidget extends BasicWidget {
+    render() {
+        this.$widget = $(TPL);
+
+        const historyNavigationWidget = new HistoryNavigationWidget(this.appContext);
+
+        this.$widget.prepend(historyNavigationWidget.render());
+
+        const showJumpToNoteDialog = () => import(JUMP_TO_NOTE).then(d => d.showDialog());
+        this.$widget.find(".jump-to-note-dialog-button").on('click', showJumpToNoteDialog);
+
+        const showRecentChanges = () => import(RECENT_CHANGES).then(d => d.showDialog());
+        this.$widget.find(".recent-changes-button").on('click', showRecentChanges);
+
+        // FIXME
+        keyboardActionService.setGlobalActionHandler("JumpToNote", showJumpToNoteDialog);
+        keyboardActionService.setGlobalActionHandler("ShowRecentChanges", showRecentChanges);
+
+        this.$widget.find(".enter-protected-session-button").on('click', protectedSessionService.enterProtectedSession);
+        this.$widget.find(".leave-protected-session-button").on('click', protectedSessionService.leaveProtectedSession);
+
+        return this.$widget
+    }
+}

src/public/stylesheets/desktop.css

@@ -51,35 +51,6 @@ body {
     flex-direction: column;
 }
 
-#top-pane {
-    background-color: var(--header-background-color);
-    display: flex;
-    align-items: center;
-    padding-top: 4px;
-}
-
-#top-pane button {
-    padding: 1px 5px 1px 5px;
-    font-size: smaller;
-    margin-bottom: 2px;
-    margin-top: 2px;
-    margin-right: 8px;
-    border-color: transparent !important;
-}
-
-#top-pane button.btn-sm .bx {
-    position: relative;
-    top: 1px;
-}
-
-#top-pane button:hover {
-    border-color: var(--button-border-color) !important;
-}
-
-#history-navigation {
-    margin: 0 15px 0 5px;
-}
-
 .dropdown-menu {
     font-size: inherit;
 }

src/views/desktop.ejs

@@ -11,48 +11,7 @@
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
 <div id="container" style="display: none;">
-    <div id="tab-pane"></div>
-
-    <div id="top-pane" class="hide-in-zen-mode">
-        <div id="history-navigation" style="display: none;">
-            <a id="history-back-button" title="Go to previous note." class="icon-action bx bx-left-arrow-circle"></a>
-
-            <a id="history-forward-button" title="Go to next note." class="icon-action bx bx-right-arrow-circle"></a>
-        </div>
-
-        <div style="flex-grow: 100; display: flex;">
-            <button class="btn btn-sm" id="jump-to-note-dialog-button" data-kb-action="JumpToNote">
-                <span class="bx bx-crosshair"></span>
-                Jump to note
-            </button>
-
-            <button class="btn btn-sm" id="recent-changes-button" data-kb-action="ShowRecentChanges">
-                <span class="bx bx-history"></span>
-
-                Recent changes
-            </button>
-
-            <button class="btn btn-sm"
-                    id="enter-protected-session-button"
-                    title="Enter protected session to be able to find and view protected notes">
-                <span class="bx bx-log-in"></span>
-
-                Enter protected session
-            </button>
-
-            <button class="btn btn-sm"
-                    id="leave-protected-session-button"
-                    title="Leave protected session so that protected notes are not accessible any more."
-                    style="display: none;">
-                <span class="bx bx-log-out"></span>
-
-                Leave protected session
-            </button>
-        </div>
-
-        <div id="plugin-buttons">
-        </div>
-    </div>
+    <div id="top-pane" class="hide-in-zen-mode"></div>
 
     <div style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
         <div id="left-pane" class="hide-in-zen-mode"></div>