closing panes

src/public/app/widgets/buttons/button_widget.js

@@ -0,0 +1,83 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+
+const TPL = `
+<span class="button-widget" 
+      data-toggle="tooltip"
+      title="">
+    <span class="bx"></span>
+</span>
+`;
+
+export default class ButtonWidget extends NoteContextAwareWidget {
+    isEnabled() {
+        return true;
+    }
+
+    constructor() {
+        super();
+
+        this.settings = {
+            titlePlacement: 'right'
+        };
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        if (this.settings.command) {
+            this.$widget.on("click", () => this.triggerCommand(this.settings.command));
+        }
+
+        if (this.settings.onClick) {
+            this.$widget.on("click", () => this.settings.onClick(this));
+        }
+
+        this.$widget.attr("data-placement", this.settings.titlePlacement);
+
+        this.$widget.tooltip({
+            html: true,
+            title: () => this.settings.title
+        });
+
+        super.doRender();
+    }
+
+    refreshIcon() {
+        this.$widget
+            .attr("title", this.settings.title)
+        this.$widget.find("span.bx")
+            .removeClass()
+            .addClass("bx")
+            .addClass(this.settings.icon);
+    }
+
+    initialRenderCompleteEvent() {
+        this.refreshIcon();
+    }
+
+    icon(icon) {
+        this.settings.icon = icon;
+        return this;
+    }
+
+    title(title) {
+        this.settings.title = title;
+        return this;
+    }
+
+    titlePlacement(placement) {
+        this.settings.titlePlacement = placement;
+        return this;
+    }
+
+    command(command) {
+        this.settings.command = command;
+        return this;
+    }
+
+    onClick(handler) {
+        this.settings.onClick = handler;
+        return this;
+    }
+}

src/public/app/widgets/buttons/close_pane_button.js

@@ -0,0 +1,18 @@
+import ButtonWidget from "./button_widget.js";
+
+export default class ClosePaneButton extends ButtonWidget {
+    isEnabled() {
+        return super.isEnabled()
+            // main note context should not be closeable
+            && this.noteContext && !!this.noteContext.mainNtxId;
+    }
+
+    constructor() {
+        super();
+
+        this.icon("bx-x")
+            .title("Close this pane")
+            .titlePlacement("bottom")
+            .onClick(widget => widget.triggerCommand("closeThisPane", { ntxId: widget.getNtxId() }));
+    }
+}

src/public/app/widgets/buttons/create_pane_button.js

@@ -0,0 +1,12 @@
+import ButtonWidget from "./button_widget.js";
+
+export default class CreatePaneButton extends ButtonWidget {
+    constructor() {
+        super();
+
+        this.icon("bx-window-open bx-rotate-90")
+            .title("Create new pane")
+            .titlePlacement("bottom")
+            .onClick(widget => widget.triggerCommand("openNewPane", { ntxId: widget.getNtxId() }));
+    }
+}

src/public/app/widgets/buttons/global_menu.js

@@ -0,0 +1,117 @@
+import BasicWidget from "../basic_widget.js";
+import utils from "../../services/utils.js";
+
+const TPL = `
+<div class="global-menu-wrapper">
+    <style>
+    .global-menu-wrapper {
+        box-sizing: border-box;
+    }
+    
+    .global-menu {
+        box-sizing: border-box;
+    }
+    
+    .global-menu button {
+        padding: 15px 15px;
+        font-size: 150%;
+        border: none;
+        border-radius: 0 !important;
+    }
+    
+    .global-menu button:hover {
+        background-color: var(--hover-item-background-color);
+    }
+    
+    .global-menu .dropdown-menu {
+        width: 20em;
+    }
+    </style>
+
+    <div class="dropdown global-menu dropright">
+        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm bx bx-menu" title="Menu"></button>
+        <div class="dropdown-menu dropdown-menu-right">
+            <a class="dropdown-item options-button" data-trigger-command="showOptions">
+                <span class="bx bx-slider"></span>
+                Options
+            </a>
+
+            <a class="dropdown-item" data-trigger-command="openNewWindow">
+                <span class="bx bx-window-open"></span>
+                Open new window
+                <kbd data-command="openNewWindow"></kbd>
+            </a>
+
+            <a class="dropdown-item open-dev-tools-button" data-trigger-command="openDevTools">
+                <span class="bx bx-terminal"></span>
+                Open Dev Tools
+                <kbd data-command="openDevTools"></kbd>
+            </a>
+
+            <a class="dropdown-item" data-trigger-command="showSQLConsole">
+                <span class="bx bx-data"></span>
+                Open SQL Console
+                <kbd data-command="showSQLConsole"></kbd>
+            </a>
+
+            <a class="dropdown-item" data-trigger-command="showBackendLog">
+                <span class="bx bx-empty"></span>
+                Show backend log
+                <kbd data-command="showBackendLog"></kbd>
+            </a>
+
+            <a class="dropdown-item" data-trigger-command="reloadFrontendApp" 
+                title="Reload can help with some visual glitches without restarting the whole app.">
+                <span class="bx bx-empty"></span>
+                Reload frontend
+                <kbd data-command="reloadFrontendApp"></kbd>
+            </a>
+
+            <a class="dropdown-item" data-trigger-command="toggleZenMode">
+                <span class="bx bx-empty"></span>
+                Toggle Zen mode
+                <kbd data-command="toggleZenMode"></kbd>
+            </a>
+
+            <a class="dropdown-item" data-trigger-command="toggleFullscreen">
+                <span class="bx bx-empty"></span>
+                Toggle fullscreen
+                <kbd data-command="toggleFullscreen"></kbd>
+            </a>
+
+            <a class="dropdown-item" data-trigger-command="showHelp">
+                <span class="bx bx-info-circle"></span>
+                Show Help
+                <kbd data-command="showHelp"></kbd>
+            </a>
+
+            <a class="dropdown-item show-about-dialog-button">
+                <span class="bx bx-empty"></span>
+                About Trilium Notes
+            </a>
+
+            <a class="dropdown-item logout-button" data-trigger-command="logout">
+                <span class="bx bx-log-out"></span>
+                Logout
+            </a>
+        </div>
+    </div>
+</div>
+`;
+
+export default class GlobalMenuWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        this.$widget.find(".show-about-dialog-button").on('click',
+            () => import("../../dialogs/about.js").then(d => d.showDialog()));
+
+        this.$widget.find(".logout-button").toggle(!utils.isElectron());
+
+        this.$widget.find(".open-dev-tools-button").toggle(utils.isElectron());
+
+        this.$widget.on('click', '.dropdown-item',
+            () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
+    }
+}

src/public/app/widgets/buttons/note_actions.js

@@ -0,0 +1,159 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import protectedSessionService from "../../services/protected_session.js";
+import utils from "../../services/utils.js";
+
+const TPL = `
+<div class="dropdown note-actions">
+    <style>
+    .note-actions-button {
+        font-size: 120% !important;
+    }
+    
+    .note-actions-button::after {
+        display: none !important; // disabling the standard caret
+    }
+    
+    .note-actions .dropdown-menu {
+        width: 20em;
+    }
+    
+    .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
+        color: var(--muted-text-color) !important;
+        background-color: transparent !important;
+        pointer-events: none; /* makes it unclickable */
+    }
+    
+    /* The switch - the box around the slider */
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 50px;
+        height: 24px;
+        float: right;
+    }
+    
+    /* The slider */
+    .slider {
+        border-radius: 24px;
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--more-accented-background-color);
+        transition: .4s;
+    }
+    
+    .slider:before {
+        border-radius: 50%;
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 4px;
+        bottom: 4px;
+        background-color: var(--main-background-color);
+        -webkit-transition: .4s;
+        transition: .4s;
+    }
+    
+    .slider.checked {
+        background-color: var(--main-text-color);
+    }
+    
+    .slider.checked:before {
+        transform: translateX(26px);
+    }
+    </style>
+
+    <button type="button" data-toggle="dropdown" aria-haspopup="true" 
+        aria-expanded="false" class="note-actions-button btn btn-sm dropdown-toggle bx bx-cog"></button>
+
+    <div class="dropdown-menu dropdown-menu-right">
+        <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
+        <div class="dropdown-item protect-button">
+            Protect the note
+        
+            <span title="Note is not protected, click to make it protected">
+                <label class="switch">
+                <span class="slider"></span>
+            </span>
+        </div>
+        <div class="dropdown-item unprotect-button">
+            Unprotect the note
+        
+            <span title="Note is protected, click to make it unprotected">
+                <label class="switch">
+                <span class="slider checked"></span>
+            </span>
+        </div>
+        <a data-trigger-command="findInText" class="dropdown-item">Search in note <kbd data-command="findInText"></a>
+        <a data-trigger-command="showNoteRevisions" class="dropdown-item show-note-revisions-button">Revisions</a>
+        <a data-trigger-command="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-command="showLinkMap"></kbd> Link map</a>
+        <a data-trigger-command="showNoteSource" class="dropdown-item show-source-button"><kbd data-command="showNoteSource"></kbd> Note source</a>
+        <a data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button"><kbd data-command="openNoteExternally"></kbd> Open note externally</a>
+        <a class="dropdown-item import-files-button">Import files</a>
+        <a class="dropdown-item export-note-button">Export note</a>
+        <a data-trigger-command="printActiveNote" class="dropdown-item print-note-button"><kbd data-command="printActiveNote"></kbd> Print note</a>
+        <a data-trigger-command="showNoteInfo" class="dropdown-item show-note-info-button"><kbd data-command="showNoteInfo"></kbd> Note info</a>
+    </div>
+</div>`;
+
+export default class NoteActionsWidget extends NoteContextAwareWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        this.$showSourceButton = this.$widget.find('.show-source-button');
+        this.$renderNoteButton = this.$widget.find('.render-note-button');
+
+        this.$exportNoteButton = this.$widget.find('.export-note-button');
+        this.$exportNoteButton.on("click", () => {
+            if (this.$exportNoteButton.hasClass("disabled")) {
+                return;
+            }
+
+            import('../../dialogs/export.js').then(d => d.showDialog(this.noteContext.notePath, 'single'));
+        });
+
+        this.$importNoteButton = this.$widget.find('.import-files-button');
+        this.$importNoteButton.on("click", () => import('../../dialogs/import.js').then(d => d.showDialog(this.noteId)));
+
+        this.$protectButton = this.$widget.find(".protect-button");
+        this.$protectButton.on('click', () => protectedSessionService.protectNote(this.noteId, true, false));
+
+        this.$unprotectButton = this.$widget.find(".unprotect-button");
+        this.$unprotectButton.on('click', () => protectedSessionService.protectNote(this.noteId, false, false));
+
+        this.$widget.on('click', '.dropdown-item',
+            () => this.$widget.find('.dropdown-toggle').dropdown('toggle'));
+
+        this.$openNoteExternallyButton = this.$widget.find(".open-note-externally-button");
+    }
+
+    refreshWithNote(note) {
+        this.toggleDisabled(this.$showSourceButton, ['text', 'relation-map', 'search', 'code'].includes(note.type));
+
+        this.$renderNoteButton.toggle(note.type === 'render');
+
+        this.$protectButton.toggle(!note.isProtected);
+        this.$unprotectButton.toggle(!!note.isProtected);
+
+        this.$openNoteExternallyButton.toggle(utils.isElectron());
+    }
+
+    toggleDisabled($el, enable) {
+        if (enable) {
+            $el.removeAttr('disabled');
+        } else {
+            $el.attr('disabled', 'disabled');
+        }
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isNoteReloaded(this.noteId)) {
+            this.refresh();
+        }
+    }
+}

src/public/app/widgets/buttons/protected_session_status.js

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

src/public/app/widgets/buttons/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();
+        }
+    }
+}