open the pane on the correct position

src/public/app/layouts/desktop_layout.js

@@ -31,98 +31,6 @@ 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>
-#right-pane {
-    overflow: auto;
-}
-
-#right-pane .card {
-    border: 0;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-}
-
-#right-pane .card-header {
-    background: inherit;
-    padding: 6px 10px 3px 0;
-    width: 99%; /* to give minimal right margin */
-    background-color: var(--button-background-color);
-    border-color: var(--button-border-color);
-    border-width: 0 0 1px 0;
-    border-radius: 4px;
-    border-style: solid;
-    display: flex;
-    justify-content: space-between;
-}
-
-#right-pane .widget-title {
-    border-radius: 0;
-    padding: 0;
-    border: 0;
-    background: inherit;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: var(--muted-text-color) !important;
-}
-
-#right-pane .widget-header-action {
-    cursor: pointer;
-    color: var(--main-text-color) !important;
-    text-decoration: none;
-    font-size: large;
-    position: relative;
-    top: 2px;
-}
-
-#right-pane .widget-help {
-    color: var(--muted-text-color);
-    position: relative;
-    top: 2px;
-    font-size: large;
-}
-
-#right-pane .widget-help.no-link:hover {
-    cursor: default;
-    text-decoration: none;
-}
-
-#right-pane .widget-toggle-button {
-    cursor: pointer;
-    color: var(--main-text-color) !important;
-}
-
-#right-pane .widget-toggle-button:hover {
-    text-decoration: none !important;
-}
-
-#right-pane .widget-toggle-icon {
-    position: relative;
-    top: 2px;
-    font-size: large;
-    padding-left: 5px;
-}
-
-#right-pane .body-wrapper {
-    overflow: auto;
-}
-
-#right-pane .card-body {
-    width: 100%;
-    padding: 8px;
-    border: 0;
-    height: 100%;
-    overflow: auto;
-    max-height: 300px;
-}
-
-#right-pane .card-body ul {
-    padding-left: 25px;
-    margin-bottom: 5px;
-}
-</style>`;
-
 export default class DesktopLayout {
     constructor(customWidgets) {
         this.customWidgets = customWidgets;
@@ -186,7 +94,7 @@ export default class DesktopLayout {
                                 .icon("bx-window-open bx-rotate-90")
                                 .title("Create new pane")
                                 .titlePlacement("bottom")
-                                .command("openNewPane")
+                                .onClick(widget => widget.triggerCommand("openNewPane", { ntxId: widget.getNtxId() }))
                             )
                         )
                         .child(

src/public/app/services/link.js

@@ -81,7 +81,7 @@ function goToLink(e) {
             appContext.tabManager.openTabWithNoteWithHoisting(notePath);
         }
         else if (e.which === 1) {
-            const ntxId = $(e.target).closest("[data-tab-id]").attr("data-tab-id");
+            const ntxId = $(e.target).closest("[data-ntx-id]").attr("data-ntx-id");
 
             const noteContext = ntxId
                 ? appContext.tabManager.getNoteContextById(ntxId)

src/public/app/services/tab_manager.js

@@ -329,8 +329,25 @@ export default class TabManager extends Component {
     tabReorderEvent({ntxIdsInOrder}) {
         const order = {};
 
-        for (const i in ntxIdsInOrder) {
+        let i = 0;
-            order[ntxIdsInOrder[i]] = i;
+
+        for (const ntxId in ntxIdsInOrder) {
+            for (const noteContext of this.noteContexts[ntxId].getSubContexts()) {
+                order[noteContext.ntxId] = i++;
+            }
+        }
+
+        this.children.sort((a, b) => order[a.ntxId] < order[b.ntxId] ? -1 : 1);
+
+        this.tabsUpdate.scheduleUpdate();
+    }
+
+    noteContextReorderEvent({ntxIdsInOrder}) {
+        const order = {};
+        let i = 0;
+
+        for (const ntxId in ntxIdsInOrder) {
+            order[ntxId] = i++;
         }
 
         this.children.sort((a, b) => order[a.ntxId] < order[b.ntxId] ? -1 : 1);

src/public/app/widgets/basic_widget.js

@@ -123,6 +123,15 @@ class BasicWidget extends Component {
         }
     }
 
+    getNtxId() {
+        if (this.$widget) {
+            return this.$widget.closest("[data-ntx-id]").attr("data-ntx-id");
+        }
+        else {
+            return null;
+        }
+    }
+
     cleanup() {}
 }
 

src/public/app/widgets/button_widget.js

@@ -21,7 +21,14 @@ export default class ButtonWidget extends BasicWidget {
         this.$widget = $(TPL);
         this.overflowing();
 
-        this.$widget.on("click", () => this.triggerCommand(this.settings.command));
+        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({
@@ -64,4 +71,9 @@ export default class ButtonWidget extends BasicWidget {
         this.settings.command = command;
         return this;
     }
+
+    onClick(handler) {
+        this.settings.onClick = handler;
+        return this;
+    }
 }

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

@@ -17,7 +17,7 @@ export default class PaneContainer extends FlexContainer {
 
         const $renderedWidget = widget.render();
 
-        $renderedWidget.attr("data-tab-id", noteContext.ntxId);
+        $renderedWidget.attr("data-ntx-id", noteContext.ntxId);
 
         $renderedWidget.on('click', () => appContext.tabManager.activateNoteContext(noteContext.ntxId));
 
@@ -34,9 +34,19 @@ export default class PaneContainer extends FlexContainer {
         this.child(widget);
     }
 
-    async openNewPaneCommand() {
+    async openNewPaneCommand({ntxId}) {
         const noteContext = await appContext.tabManager.openEmptyTab(null, 'root', appContext.tabManager.getActiveContext().ntxId);
 
+        const ntxIds = appContext.tabManager.children.map(c => c.ntxId)
+            .filter(id => id !== noteContext.ntxId);
+
+        ntxIds.splice(ntxIds.indexOf(ntxId) + 1, 0, noteContext.ntxId);
+
+        this.triggerCommand("noteContextReorder", ntxIds);
+
+        this.$widget.find(`[data-ntx-id="${noteContext.ntxId}"]`)
+            .insertAfter(this.$widget.find(`[data-ntx-id="${ntxId}"]`))
+
         await appContext.tabManager.activateNoteContext(noteContext.ntxId);
 
         await noteContext.setEmpty();