right pane restoration for custom widgets

TODO

@@ -0,0 +1 @@
+- remove zen mode

src/public/app/layouts/desktop_layout.js

@@ -38,6 +38,7 @@ import BookPropertiesWidget from "../widgets/ribbon_widgets/book_properties.js";
 import LinkMapWidget from "../widgets/ribbon_widgets/link_map.js";
 import NotePathsWidget from "../widgets/ribbon_widgets/note_paths.js";
 import SimilarNotesWidget from "../widgets/ribbon_widgets/similar_notes.js";
+import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -76,19 +77,22 @@ export default class DesktopLayout {
             )
             .child(new LeftPaneContainer()
                 .hideInZenMode()
-                .css("width", "300px")
                 .child(new QuickSearchWidget())
                 .child(appContext.mainTreeWidget)
                 .child(...this.customWidgets.get('left-pane'))
             )
             .child(new FlexContainer('column')
-                .id('center-pane')
                 .css("flex-grow", "1")
                 .child(new FlexContainer('row').overflowing()
                     .child(new TabRowWidget())
                     .child(new TitleBarButtonsWidget())
                     .css('height', '40px')
                 )
+                .child(new FlexContainer('row')
+                    .filling()
+                    .child(new FlexContainer('column')
+                        .filling()
+                        .id('center-pane')
                         .child(new SplitNoteContainer(() =>
                             new FlexContainer('column')
                                 .css("flex-grow", "1")
@@ -136,6 +140,13 @@ export default class DesktopLayout {
                                 .child(...this.customWidgets.get('center-pane'))
                             )
                         )
+                    )
+                    .child(new RightPaneContainer()
+                        .hideInZenMode()
+                        .css("width", "300px")
+                        .child(...this.customWidgets.get('right-pane'))
+                    )
+                )
             );
     }
 }

src/public/app/widgets/collapsible_widget.js

@@ -1,30 +1,10 @@
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import options from "../services/options.js";
 
 const WIDGET_TPL = `
 <div class="card widget">
-    <div class="card-header">    
+    <div class="card-header"></div>
-        <div>           
-            <a class="widget-toggle-button no-arrow" 
-                title="Minimize/maximize widget"
-                data-toggle="collapse" data-target="#[to be set]">
 
-                <span class="widget-toggle-icon bx"></span>
+    <div id="[to be set]" class="body-wrapper">
-                
-                <span class="widget-title">
-                    Collapsible Group Item
-                </span>    
-            </a>
-        
-            <span class="widget-header-actions"></span>
-        </div>
-        
-        <div>
-            <a class="widget-help external no-arrow bx bx-info-circle"></a>
-        </div>
-    </div>
-
-    <div id="[to be set]" class="collapse body-wrapper" style="transition: none; ">
         <div class="card-body"></div>
     </div>
 </div>`;
@@ -32,8 +12,6 @@ const WIDGET_TPL = `
 export default class CollapsibleWidget extends NoteContextAwareWidget {
     get widgetTitle() { return "Untitled widget"; }
 
-    get headerActions() { return []; }
-
     get help() { return {}; }
 
     doRender() {
@@ -44,85 +22,14 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
         this.$bodyWrapper = this.$widget.find('.body-wrapper');
         this.$bodyWrapper.attr('id', this.componentId); // for toggle to work we need id
 
-        // not using constructor name because of webpack mangling class names ...
-        this.widgetName = this.widgetTitle.replace(/[^[a-zA-Z0-9]/g, "_");
-
-        this.$toggleButton = this.$widget.find('.widget-toggle-button');
-        this.$toggleIcon = this.$widget.find('.widget-toggle-icon');
-
-        const collapsed = options.is(this.widgetName + 'Collapsed');
-        if (!collapsed) {
-            this.$bodyWrapper.collapse("show");
-        }
-
-        this.updateToggleIcon(collapsed);
-
-        // using immediate variants of the event so that the previous collapse is not caught
-        this.$bodyWrapper.on('hide.bs.collapse', () => this.toggleCollapsed(true));
-        this.$bodyWrapper.on('show.bs.collapse', () => this.toggleCollapsed(false));
-
         this.$body = this.$bodyWrapper.find('.card-body');
 
-        this.$title = this.$widget.find('.widget-title');
+        this.$title = this.$widget.find('.card-header');
         this.$title.text(this.widgetTitle);
 
-        this.$help = this.$widget.find('.widget-help');
-
-        if (this.help.title) {
-            this.$help.attr("title", this.help.title);
-            this.$help.attr("href", this.help.url || "javascript:");
-
-            if (!this.help.url) {
-                this.$help.addClass('no-link');
-            }
-        }
-        else {
-            this.$help.hide();
-        }
-
-        this.$headerActions = this.$widget.find('.widget-header-actions');
-        this.$headerActions.append(this.headerActions);
-
         this.initialized = this.doRenderBody();
-
-        this.decorateWidget();
     }
 
-    toggleCollapsed(collapse) {
-        this.updateToggleIcon(collapse);
-
-        options.save(this.widgetName + 'Collapsed', collapse.toString());
-
-        this.triggerEvent(`widgetCollapsedStateChanged`, {widgetName: this.widgetName, collapse});
-    }
-
-    updateToggleIcon(collapse) {
-        if (collapse) {
-            this.$toggleIcon
-                .addClass("bx-chevron-right")
-                .removeClass("bx-chevron-down")
-                .attr("title", "Show");
-        } else {
-            this.$toggleIcon
-                .addClass("bx-chevron-down")
-                .removeClass("bx-chevron-right")
-                .attr("title", "Hide");
-        }
-    }
-
-    /**
-     * This event is used to synchronize collapsed state of all the tab-cached widgets since they are all rendered
-     * separately but should behave uniformly for the user.
-     */
-    widgetCollapsedStateChangedEvent({widgetName, collapse}) {
-        if (widgetName === this.widgetName) {
-            this.$bodyWrapper.toggleClass('show', !collapse);
-        }
-    }
-
-    /** for overriding */
-    decorateWidget() {}
-
     /** for overriding */
     async doRenderBody() {}
 

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

@@ -0,0 +1,27 @@
+import FlexContainer from "./flex_container.js";
+
+export default class RightPaneContainer extends FlexContainer {
+    constructor() {
+        super('column');
+
+        this.id('right-pane');
+        this.css('height', '100%');
+    }
+
+    isEnabled() {
+        return super.isEnabled() && this.children.length > 0 && !!this.children.find(ch => ch.isEnabled());
+    }
+
+    handleEventInChildren(name, data) {
+        const promise = super.handleEventInChildren(name, data);
+
+        if (['activeContextChanged', 'noteSwitchedAndActivated', 'noteSwitched'].includes(name)) {
+            // right pane is displayed only if some child widget is active
+            // we'll reevaluate the visibility based on events which are probable to cause visibility change
+            // but these events needs to be finished and only then we check
+            promise.then(() => this.toggleInt(this.isEnabled()));
+        }
+
+        return promise;
+    }
+}

src/public/stylesheets/style.css

@@ -909,3 +909,49 @@ ul.fancytree-container li {
 input {
     background-color: transparent !important;
 }
+
+
+#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;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: var(--muted-text-color) !important;
+}
+
+#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;
+}