refactoring of pane => split, "pane" keeps its old meaning (left-pane, center-pane, right-pane)

db/TODO.txt

@@ -2,7 +2,4 @@
 - 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
 - migrate black theme to dark theme

src/public/app/layouts/desktop_layout.js

@@ -2,7 +2,7 @@ import FlexContainer from "../widgets/containers/flex_container.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
-import TreeSidebarContainer from "../widgets/containers/tree_sidebar_container.js";
+import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteTitleWidget from "../widgets/note_title.js";
 import OwnedAttributeListWidget from "../widgets/ribbon_widgets/owned_attribute_list.js";
@@ -28,8 +28,8 @@ import SpacerWidget from "../widgets/spacer.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import ButtonWidget from "../widgets/buttons/button_widget.js";
 import ProtectedSessionStatusWidget from "../widgets/buttons/protected_session_status.js";
-import PaneContainer from "../widgets/containers/pane_container.js";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import SidebarToggleWidget from "../widgets/buttons/sidebar_toggle.js";
+import LeftPaneToggleWidget from "../widgets/buttons/left_pane_toggle.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
 import BasicPropertiesWidget from "../widgets/ribbon_widgets/basic_properties.js";
@@ -50,7 +50,7 @@ export default class DesktopLayout {
         return new RootContainer()
             .setParent(appContext)
             .child(new FlexContainer("column")
-                .id("launcher-sidebar")
+                .id("launcher-pane")
                 .child(new GlobalMenuWidget())
                 .child(new ButtonWidget()
                     .icon("bx-file-blank")
@@ -71,15 +71,15 @@ export default class DesktopLayout {
                 .child(new SpacerWidget())
                 .child(new ProtectedSessionStatusWidget())
                 .child(new SyncStatusWidget())
-                .child(new SidebarToggleWidget())
+                .child(new LeftPaneToggleWidget())
                 .css("width", "54px")
             )
-            .child(new TreeSidebarContainer()
+            .child(new LeftPaneContainer()
                 .hideInZenMode()
                 .css("width", "300px")
                 .child(new QuickSearchWidget())
                 .child(appContext.mainTreeWidget)
-                .child(...this.customWidgets.get('tree-sidebar'))
+                .child(...this.customWidgets.get('left-pane'))
             )
             .child(new FlexContainer('column')
                 .id('center-pane')
@@ -89,7 +89,7 @@ export default class DesktopLayout {
                     .child(new TitleBarButtonsWidget())
                     .css('height', '40px')
                 )
-                .child(new PaneContainer(() =>
+                .child(new SplitNoteContainer(() =>
                     new FlexContainer('column')
                         .css("flex-grow", "1")
                         .child(new FlexContainer('row').class('title-row')

src/public/app/services/link.js

@@ -133,18 +133,18 @@ function linkContextMenu(e) {
         y: e.pageY,
         items: [
             {title: "Open note in a new tab", command: "openNoteInNewTab", uiIcon: "empty"},
-            {title: "Open note in a new pane", command: "openNoteInNewPane", uiIcon: "dock-right"},
+            {title: "Open note in a new split", command: "openNoteInNewSplit", uiIcon: "dock-right"},
             {title: "Open note in a new window", command: "openNoteInNewWindow", uiIcon: "window-open"}
         ],
         selectMenuItemHandler: ({command}) => {
             if (command === 'openNoteInNewTab') {
                 appContext.tabManager.openTabWithNoteWithHoisting(notePath);
             }
-            else if (command === 'openNoteInNewPane') {
+            else if (command === 'openNoteInNewSplit') {
                 const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
                 const {ntxId} = subContexts[subContexts.length - 1];
 
-                appContext.triggerCommand("openNewPane", {ntxId, notePath});
+                appContext.triggerCommand("openNewNoteSplit", {ntxId, notePath});
             }
             else if (command === 'openNoteInNewWindow') {
                 appContext.triggerCommand('openInWindow', {notePath, hoistedNoteId: 'root'});

src/public/app/services/split.js

@@ -8,7 +8,7 @@ function setupSplit(leftPaneVisible) {
         instance = null;
     }
 
-    $("#tree-sidebar").toggle(leftPaneVisible);
+    $("#left-pane").toggle(leftPaneVisible);
 
     if (!leftPaneVisible) {
         $("#center-pane").css('width', '100%');
@@ -22,7 +22,7 @@ function setupSplit(leftPaneVisible) {
     }
 
     if (leftPaneVisible) {
-        instance = Split(['#tree-sidebar', '#center-pane'], {
+        instance = Split(['#left-pane', '#center-pane'], {
             sizes: [leftPaneWidth, 100 - leftPaneWidth],
             gutterSize: 5,
             onDragEnd: sizes => options.save('leftPaneWidth', Math.round(sizes[0]))

src/public/app/services/tree_context_menu.js

@@ -55,7 +55,7 @@ class TreeContextMenu {
 
         return [
             { title: 'Open in a new tab <kbd>Ctrl+Click</kbd>', command: "openInTab", uiIcon: "empty", enabled: noSelectedNotes },
-            { title: 'Open in a new pane', command: "openNoteInPane", uiIcon: "dock-right", enabled: noSelectedNotes },
+            { title: 'Open in a new split', command: "openNoteInSplit", uiIcon: "dock-right", enabled: noSelectedNotes },
             { title: 'Insert note after <kbd data-command="createNoteAfter"></kbd>', command: "insertNoteAfter", uiIcon: "plus",
                 items: insertNoteAfterEnabled ? this.getNoteTypeItems("insertNoteAfter") : null,
                 enabled: insertNoteAfterEnabled && noSelectedNotes },
@@ -130,11 +130,11 @@ class TreeContextMenu {
                 isProtected: this.node.data.isProtected
             });
         }
-        else if (command === 'openNoteInPane') {
+        else if (command === 'openNoteInSplit') {
             const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
             const {ntxId} = subContexts[subContexts.length - 1];
 
-            this.treeWidget.triggerCommand("openNewPane", {ntxId, notePath});
+            this.treeWidget.triggerCommand("openNewNoteSplit", {ntxId, notePath});
         }
         else {
             this.treeWidget.triggerCommand(command, {node: this.node, notePath: notePath});

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

@@ -13,6 +13,6 @@ export default class ClosePaneButton extends ButtonWidget {
         this.icon("bx-x")
             .title("Close this pane")
             .titlePlacement("bottom")
-            .onClick(widget => widget.triggerCommand("closeThisPane", { ntxId: widget.getNtxId() }));
+            .onClick(widget => widget.triggerCommand("closeThisNoteSplit", { ntxId: widget.getNtxId() }));
     }
 }

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

@@ -5,8 +5,8 @@ export default class CreatePaneButton extends ButtonWidget {
         super();
 
         this.icon("bx-dock-right")
-            .title("Create new pane")
+            .title("Create new split")
             .titlePlacement("bottom")
-            .onClick(widget => widget.triggerCommand("openNewPane", { ntxId: widget.getNtxId() }));
+            .onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getNtxId() }));
     }
 }

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

@@ -2,7 +2,7 @@ import ButtonWidget from "./button_widget.js";
 import options from "../../services/options.js";
 import splitService from "../../services/split.js";
 
-export default class SidebarToggleWidget extends ButtonWidget {
+export default class LeftPaneToggleWidget extends ButtonWidget {
     refreshIcon() {
         const isLeftPaneVisible = options.is('leftPaneVisible');
 

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

@@ -1,11 +1,11 @@
 import options from "../../services/options.js";
 import FlexContainer from "./flex_container.js";
 
-export default class TreeSidebarContainer extends FlexContainer {
+export default class LeftPaneContainer extends FlexContainer {
     constructor() {
         super('column');
 
-        this.id('tree-sidebar');
+        this.id('left-pane');
         this.css('height', '100%');
     }
 

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

@@ -1,14 +1,14 @@
 import FlexContainer from "./flex_container.js";
 import appContext from "../../services/app_context.js";
 
-export default class PaneContainer extends FlexContainer {
+export default class SplitNoteContainer extends FlexContainer {
     constructor(widgetFactory) {
         super('row');
 
         this.widgetFactory = widgetFactory;
         this.widgets = {};
 
-        this.class('pane-container-widget');
+        this.class('note-split-container-widget');
         this.css('flex-grow', '1');
     }
 
@@ -34,7 +34,7 @@ export default class PaneContainer extends FlexContainer {
         this.child(widget);
     }
 
-    async openNewPaneEvent({ntxId, notePath}) {
+    async openNewNoteSplitEvent({ntxId, notePath}) {
         const noteContext = await appContext.tabManager.openEmptyTab(null, 'root', appContext.tabManager.getActiveMainContext().ntxId);
 
         // remove the original position of newly created note context
@@ -60,7 +60,7 @@ export default class PaneContainer extends FlexContainer {
         }
     }
 
-    closeThisPaneCommand({ntxId}) {
+    closeThisNoteSplitCommand({ntxId}) {
         appContext.tabManager.removeNoteContext(ntxId);
     }
 

src/public/stylesheets/style.css

@@ -883,7 +883,7 @@ ul.fancytree-container li {
     margin: 10px;
 }
 
-#launcher-sidebar .icon-action {
+#launcher-pane .icon-action {
     font-size: 150%;
     display: inline-block;
     padding: 15px 15px;
@@ -892,18 +892,18 @@ ul.fancytree-container li {
     color: var(--button-text-color);
 }
 
-#launcher-sidebar .icon-action:hover {
+#launcher-pane .icon-action:hover {
     background-color: var(--hover-item-background-color);
 }
 
-#tree-sidebar {
+#left-pane {
-    color: var(--tree-sidebar-text-color);
+    color: var(--left-pane-text-color);
-    background-color: var(--tree-sidebar-background-color);
+    background-color: var(--left-pane-background-color);
 }
 
-#launcher-sidebar {
+#launcher-pane {
-    color: var(--launcher-sidebar-text-color);
+    color: var(--launcher-pane-text-color);
-    background-color: var(--launcher-sidebar-background-color);
+    background-color: var(--launcher-pane-background-color);
 }
 
 input {

src/public/stylesheets/themes.css

@@ -45,11 +45,11 @@
     --modal-background-color: white;
     --modal-backdrop-color: black;
 
-    --tree-sidebar-background-color: #F3F3F3;
+    --left-pane-background-color: #F3F3F3;
-    --tree-sidebar-text-color: #333;
+    --left-pane-text-color: #333;
 
-    --launcher-sidebar-background-color: #F3F3F3;
+    --launcher-pane-background-color: #F3F3F3;
-    --launcher-sidebar-text-color: #333;
+    --launcher-pane-text-color: #333;
 
     --active-tab-background-color: #ddd;
     --active-tab-text-color: black;
@@ -109,11 +109,11 @@ body.theme-dark {
     --modal-background-color: #333;
     --modal-backdrop-color: #444;
 
-    --tree-sidebar-background-color: #1f1f1f;
+    --left-pane-background-color: #1f1f1f;
-    --tree-sidebar-text-color: #8D8888;
+    --left-pane-text-color: #8D8888;
 
-    --launcher-sidebar-background-color: #1f1f1f;
+    --launcher-pane-background-color: #1f1f1f;
-    --launcher-sidebar-text-color: #8D8888;
+    --launcher-pane-text-color: #8D8888;
 
     --active-tab-background-color: #666;
     --active-tab-text-color: #ccc;