sidebar pulled outside of the tab content and added splitter

src/public/javascripts/dialogs/options/sidebar.js

@@ -194,7 +194,7 @@ export default class SidebarOptions {
         const sidebarMinWidth = this.$sidebarMinWidth.val();
 
         // need to find them dynamically since they change
-        const $sidebar = $(".note-detail-sidebar");
+        const $sidebar = $("#right-pane");
 
         const $content = $(".note-detail-content");
 

src/public/javascripts/services/entrypoints.js

@@ -287,10 +287,10 @@ function registerEntrypoints() {
         searchNotesService.searchInSubtree(node.data.noteId);
     });
 
-    Split(['#left-pane', '#center-pane'], {
+    Split(['#left-pane', '#center-pane', '#right-pane'], {
-        sizes: [25, 75],
+        sizes: [25, 50, 25],
         gutterSize: 5
-    })
+    });
 }
 
 export default {

src/public/javascripts/services/sidebar.js

@@ -2,6 +2,23 @@ import bundleService from "./bundle.js";
 import ws from "./ws.js";
 import optionsService from "./options.js";
 
+const $sidebar = $("#right-pane");
+const $sidebarContainer = $sidebar.find('.sidebar-container');
+
+const $showSideBarButton = $sidebar.find(".show-sidebar-button");
+const $hideSidebarButton = $sidebar.find(".hide-sidebar-button");
+
+$hideSidebarButton.on('click', () => {
+    $sidebar.hide();
+    $showSideBarButton.show();
+});
+
+// FIXME shoud run note loaded!
+$showSideBarButton.on('click', () => {
+    $sidebar.show();
+    $showSideBarButton.hide();
+});
+
 class Sidebar {
     /**
      * @param {TabContext} ctx
@@ -14,30 +31,18 @@ class Sidebar {
             widgets: []
         }, state);
         this.widgets = [];
-        this.$sidebar = ctx.$tabContent.find(".note-detail-sidebar");
-        this.$widgetContainer = this.$sidebar.find(".note-detail-widget-container");
-        this.$showSideBarButton = this.ctx.$tabContent.find(".show-sidebar-button");
-        this.$hideSidebarButton = this.$sidebar.find(".hide-sidebar-button");
 
-        this.$hideSidebarButton.on('click', () => {
+        this.$widgetContainer = $sidebar.find(`.sidebar-widget-container[data-tab-id=${this.ctx.tabId}]`);
-            this.$sidebar.hide();
-            this.$showSideBarButton.show();
-            this.ctx.stateChanged();
-        });
 
-        this.$showSideBarButton.on('click', () => {
+        if (this.$widgetContainer.length === 0) {
-            this.$sidebar.show();
+            this.$widgetContainer = $(`<div class="sidebar-widget-container">`).attr('data-tab-id', this.ctx.tabId);
-            this.$showSideBarButton.hide();
-            this.ctx.stateChanged();
-            this.noteLoaded();
-        });
 
-        this.$showSideBarButton.toggle(!state.visible);
+            $sidebarContainer.append(this.$widgetContainer);
-        this.$sidebar.toggle(state.visible);
+        }
     }
 
     isVisible() {
-        return this.$sidebar.css("display") !== "none";
+        return $sidebar.css("display") !== "none";
     }
 
     getSidebarState() {
@@ -91,6 +96,12 @@ class Sidebar {
         this.renderWidgets(widgets);
     }
 
+    show() {
+        $sidebarContainer.find('.sidebar-widget-container').each((i, el) => {
+            $(el).toggle($(el).attr('data-tab-id') === this.ctx.tabId);
+        });
+    }
+
     // it's important that this method is sync so that the whole render-update is atomic
     // otherwise we could get race issues (doubled widgets etc.)
     renderWidgets(widgets) {

src/public/javascripts/services/tab_context.js

@@ -251,6 +251,10 @@ class TabContext {
 
         this.$tabContent.show();
 
+        if (this.sidebar) {
+            this.sidebar.show();
+        }
+
         this.setCurrentNotePathToHash();
         this.setTitleBar();
     }

src/public/stylesheets/desktop.css

@@ -410,18 +410,18 @@ body {
     border-color: var(--button-border-color);
 }
 
-.note-detail-sidebar {
+#right-pane {
     overflow: auto;
     padding-top: 12px;
     padding-left: 7px;
     font-size: 90%;
 }
 
-.note-detail-sidebar .card {
+#right-pane .card {
     border: 0;
 }
 
-.note-detail-sidebar .card-header {
+#right-pane .card-header {
     background: inherit;
     padding: 5px 10px 5px 10px;
     width: 99%; /* to give minimal right margin */
@@ -434,7 +434,7 @@ body {
     justify-content: space-between;
 }
 
-.note-detail-sidebar .widget-title {
+#right-pane .widget-title {
     border-radius: 0;
     padding: 0;
     border: 0;
@@ -444,29 +444,29 @@ body {
     color: var(--muted-text-color) !important;
 }
 
-.note-detail-sidebar .widget-header-action {
+#right-pane .widget-header-action {
     color: var(--link-color) !important;
     cursor: pointer;
 }
 
-.note-detail-sidebar .widget-help {
+#right-pane .widget-help {
     color: var(--muted-text-color);
     position: relative;
     top: 2px;
 }
 
-.note-detail-sidebar .widget-help.no-link:hover {
+#right-pane .widget-help.no-link:hover {
     cursor: default;
     text-decoration: none;
 }
 
-.note-detail-sidebar .card-body {
+#right-pane .card-body {
     width: 100%;
     padding: 8px;
     border: 0;
 }
 
-.note-detail-sidebar .card-body ul {
+#right-pane .card-body ul {
     padding-left: 25px;
     margin-bottom: 5px;
 }

src/views/center.ejs

@@ -0,0 +1,39 @@
+<div id="center-pane">
+    <div id="note-tab-container">
+        <div class="note-tab-content note-tab-content-template">
+            <div class="note-detail-content" style="width: <%= contentWidthPercent %>%">
+                <% include title.ejs %>
+
+                <div class="note-detail-script-area"></div>
+
+                <table class="note-detail-promoted-attributes"></table>
+
+                <div class="note-detail-component-wrapper">
+                    <div class="note-detail-text note-detail-component">
+                        <div class="note-detail-text-editor" tabindex="10000"></div>
+                    </div>
+
+                    <div class="note-detail-code note-detail-component">
+                        <div class="note-detail-code-editor"></div>
+                    </div>
+
+                    <% include details/empty.ejs %>
+
+                    <% include details/search.ejs %>
+
+                    <% include details/render.ejs %>
+
+                    <% include details/file.ejs %>
+
+                    <% include details/image.ejs %>
+
+                    <% include details/relation_map.ejs %>
+
+                    <% include details/protected_session_password.ejs %>
+
+                    <% include details/book.ejs %>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/views/desktop.ejs

@@ -182,9 +182,9 @@
             <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
         </div>
 
-        <div id="center-pane">
+        <% include center.ejs %>
-            <% include tabs.ejs %>
+
-        </div>
+        <% include sidebar.ejs %>
     </div>
 
     <% include dialogs/about.ejs %>

src/views/sidebar.ejs

@@ -1,7 +1,8 @@
-<div class="note-detail-sidebar hide-in-zen-mode" style="width: <%= sidebarWidthPercent %>%; min-width: <%= sidebarMinWidth %>px">
+<div id="right-pane" class="hide-in-zen-mode">
     <div style="text-align: center; margin-bottom: 5px;">
         <button class="hide-sidebar-button">hide sidebar <span class="bx bx-chevrons-right"></span></button>
     </div>
 
-    <div class="note-detail-widget-container"></div>
+    <div class="sidebar-container">
+    </div>
 </div>

src/views/tabs.ejs

@@ -1,39 +0,0 @@
-<div id="note-tab-container">
-    <div class="note-tab-content note-tab-content-template">
-        <div class="note-detail-content" style="width: <%= contentWidthPercent %>%">
-            <% include title.ejs %>
-
-            <div class="note-detail-script-area"></div>
-
-            <table class="note-detail-promoted-attributes"></table>
-
-            <div class="note-detail-component-wrapper">
-                <div class="note-detail-text note-detail-component">
-                    <div class="note-detail-text-editor" tabindex="10000"></div>
-                </div>
-
-                <div class="note-detail-code note-detail-component">
-                    <div class="note-detail-code-editor"></div>
-                </div>
-
-                <% include details/empty.ejs %>
-
-                <% include details/search.ejs %>
-
-                <% include details/render.ejs %>
-
-                <% include details/file.ejs %>
-
-                <% include details/image.ejs %>
-
-                <% include details/relation_map.ejs %>
-
-                <% include details/protected_session_password.ejs %>
-
-                <% include details/book.ejs %>
-            </div>
-        </div>
-
-        <% include sidebar.ejs %>
-    </div>
-</div>