split window WIP

src/public/app/layouts/desktop_layout.js

@@ -40,6 +40,7 @@ import SpacerWidget from "../widgets/spacer.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import ButtonWidget from "../widgets/button_widget.js";
 import ProtectedSessionStatusWidget from "../widgets/protected_session_status.js";
+import PaneContainer from "../widgets/containers/pane_container.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -181,51 +182,48 @@ export default class DesktopLayout {
                     .child(new TitleBarButtonsWidget())
                     .css('height', '36px')
                 )
-                .child(new FlexContainer('row').class('title-row')
+                .child(new TabCachingWidget(() =>
-                    .css('align-items: center;')
+                    new PaneContainer(() =>
-                    .cssBlock('.title-row > * { margin: 5px; }')
+                        new FlexContainer('column')
-                    .overflowing()
+                            .css("flex-grow", "1")
-                    .child(new NoteIconWidget())
+                            .child(new FlexContainer('row').class('title-row')
-                    .child(new NoteTitleWidget())
+                                .css('align-items: center;')
-                    .child(new NotePathsWidget().hideInZenMode())
+                                .cssBlock('.title-row > * { margin: 5px; }')
-                    .child(new NoteTypeWidget().hideInZenMode())
+                                .overflowing()
-                    .child(new NoteActionsWidget().hideInZenMode())
+                                .child(new NoteIconWidget())
-                )
+                                .child(new NoteTitleWidget())
-                .child(
+                                .child(new NotePathsWidget().hideInZenMode())
-                    new TabCachingWidget(() => new CollapsibleSectionContainer()
+                                .child(new NoteTypeWidget().hideInZenMode())
-                        .child(new SearchDefinitionWidget())
+                                .child(new NoteActionsWidget().hideInZenMode())
-                        .child(new NotePropertiesWidget())
+                                .child(new ButtonWidget()
-                        .child(new FilePropertiesWidget())
+                                    .icon("bx-window-open bx-rotate-90")
-                        .child(new ImagePropertiesWidget())
+                                    .title("Create new pane")
-                        .child(new PromotedAttributesWidget())
+                                    .command("openNewPane"))
-                        .child(new OwnedAttributeListWidget())
+                            )
-                        .child(new InheritedAttributesWidget())
+                            .child(
+                                new CollapsibleSectionContainer()
+                                    .child(new SearchDefinitionWidget())
+                                    .child(new NotePropertiesWidget())
+                                    .child(new FilePropertiesWidget())
+                                    .child(new ImagePropertiesWidget())
+                                    .child(new PromotedAttributesWidget())
+                                    .child(new OwnedAttributeListWidget())
+                                    .child(new InheritedAttributesWidget())
+                            )
+                                .child(new NoteUpdateStatusWidget())
+                            .child(
+                                new ScrollingContainer()
+                                    .child(new SqlTableSchemasWidget())
+                                    .child(new NoteDetailWidget())
+                                    .child(new NoteListWidget())
+                                    .child(new SearchResultWidget())
+                                    .child(new SqlResultWidget())
+                            )
+                            .child(new SimilarNotesWidget())
+                            .child(...this.customWidgets.get('center-pane'))
+                        )
                     )
                 )
-                    .child(new NoteUpdateStatusWidget())
-                .child(
-                    new TabCachingWidget(() => new ScrollingContainer()
-                        .child(new SqlTableSchemasWidget())
-                        .child(new NoteDetailWidget())
-                        .child(new NoteListWidget())
-                        .child(new SearchResultWidget())
-                        .child(new SqlResultWidget())
-                    )
-                )
-                .child(new TabCachingWidget(() => new SimilarNotesWidget()))
-                .child(...this.customWidgets.get('center-pane'))
-                // .child(new SidePaneContainer('right')
-                //     .cssBlock(RIGHT_PANE_CSS)
-                //     .hideInZenMode()
-                //     .child(new NoteInfoWidget())
-                //     .child(new TabCachingWidget(() => new CalendarWidget()))
-                //     .child(new TabCachingWidget(() => new EditedNotesWidget()))
-                //     .child(new TabCachingWidget(() => new LinkMapWidget()))
-                //     .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
-                //     .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
-                //     .child(...this.customWidgets.get('right-pane'))
-                // )
-                // .child(new SidePaneToggles().hideInZenMode())
             );
     }
 }

src/public/app/services/tab_context.js

@@ -16,6 +16,7 @@ class TabContext extends Component {
 
         this.tabId = tabId || utils.randomString(4);
         this.hoistedNoteId = hoistedNoteId;
+        this.parentTabId = null;
     }
 
     setEmpty() {

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

@@ -0,0 +1,38 @@
+import FlexContainer from "./flex_container.js";
+import appContext from "../../services/app_context.js";
+import TabContext from "../../services/tab_context.js";
+
+export default class PaneContainer extends FlexContainer {
+    constructor(widgetFactory) {
+        super('row');
+
+        this.counter = 0;
+
+        this.widgetFactory = widgetFactory;
+
+        this.child(this.widgetFactory());
+
+        this.id('pane-container-widget');
+        this.css('flex-grow', '1');
+    }
+
+    async openNewPaneCommand() {
+        const newWidget = this.widgetFactory();
+
+        this.$widget.append(newWidget.render());
+
+        const tabContext = new TabContext();
+        appContext.tabManager.tabContexts.push(tabContext);
+        appContext.tabManager.child(tabContext);
+
+        tabContext.parentTabId = appContext.tabManager.getActiveTabContext().tabId;
+
+        await newWidget.handleEvent('setTabContext', { tabContext });
+
+        this.child(newWidget);
+
+        tabContext.setEmpty();
+
+        appContext.tabManager.activateTab(tabContext.tabId);
+    }
+}

src/public/app/widgets/tab_aware_widget.js

@@ -6,6 +6,10 @@ export default class TabAwareWidget extends BasicWidget {
         return this.tabContext && this.tabContext.tabId === tabId;
     }
 
+    isTabOrParent(tabId) {
+        return this.tabContext && (this.tabContext.tabId === tabId || this.tabContext.parentTabId === tabId);
+    }
+
     isNote(noteId) {
         return this.noteId === noteId;
     }

src/public/app/widgets/tab_caching_widget.js

@@ -53,7 +53,7 @@ export default class TabCachingWidget extends TabAwareWidget {
 
     toggleExt(show) {
         for (const tabId in this.widgets) {
-            this.widgets[tabId].toggleExt(show && this.isTab(tabId));
+            this.widgets[tabId].toggleExt(show && this.isTabOrParent(tabId));
         }
     }
 
@@ -65,7 +65,11 @@ export default class TabCachingWidget extends TabAwareWidget {
     handleEventInChildren(name, data) {
         if (['tabNoteSwitched', 'tabNoteSwitchedAndActivated'].includes(name)) {
             // this event is propagated only to the widgets of a particular tab
-            const widget = this.widgets[data.tabContext.tabId];
+            let widget = this.widgets[data.tabContext.tabId];
+
+            if (!widget) {
+                widget = this.widgets[data.tabContext.parentTabId];
+            }
 
             if (widget && (widget.hasBeenAlreadyShown || name === 'tabNoteSwitchedAndActivated')) {
                 widget.hasBeenAlreadyShown = true;
@@ -78,7 +82,11 @@ export default class TabCachingWidget extends TabAwareWidget {
         }
 
         if (name === 'activeTabChanged') {
-            const widget = this.widgets[data.tabContext.tabId];
+            let widget = this.widgets[data.tabContext.tabId];
+
+            if (!widget) {
+                widget = this.widgets[data.tabContext.parentTabId];
+            }
 
             if (widget.hasBeenAlreadyShown) {
                 return Promise.resolve();
@@ -92,4 +100,4 @@ export default class TabCachingWidget extends TabAwareWidget {
             return super.handleEventInChildren(name, data);
         }
     }
-}
+}

src/services/search/services/search.js

@@ -216,7 +216,7 @@ function highlightSearchResults(searchResults, highlightedTokens) {
             result.highlightedNotePathTitle += ` "mime: ${note.mime}'`;
         }
 
-        for (const attr of note.attributes) {
+        for (const attr of note.getAttributes()) {
             if (highlightedTokens.find(token => attr.name.toLowerCase().includes(token)
                 || attr.value.toLowerCase().includes(token))) {