refactored TOC and Highlights close buttons and added a button to quickly access options

src/public/app/widgets/basic_widget.js

@@ -84,7 +84,8 @@ class BasicWidget extends Component {
         this.doRender();
 
         this.$widget.attr('data-component-id', this.componentId);
-        this.$widget.addClass('component')
+        this.$widget
+            .addClass('component')
             .prop('component', this);
 
         if (!this.isEnabled()) {
@@ -126,7 +127,7 @@ class BasicWidget extends Component {
      * Method used for rendering the widget.
      *
      * Your class should override this method.
-     * @returns {JQuery<HTMLElement>} Your widget.
+     * The method is expected to create a this.$widget containing jQuery object
      */
     doRender() {}
 

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

@@ -6,6 +6,7 @@ export default class OnClickButtonWidget extends AbstractButtonWidget {
 
         if (this.settings.onClick) {
             this.$widget.on("click", e => {
+                e.stopPropagation();
                 this.$widget.tooltip("hide");
 
                 this.settings.onClick(this, e);

src/public/app/widgets/highlights_list.js

@@ -9,6 +9,7 @@ import attributeService from "../services/attributes.js";
 import RightPanelWidget from "./right_panel_widget.js";
 import options from "../services/options.js";
 import OnClickButtonWidget from "./buttons/onclick_button.js";
+import appContext from "../components/app_context.js";
 
 const TPL = `<div class="highlights-list-widget">
     <style>
@@ -35,29 +36,33 @@ const TPL = `<div class="highlights-list-widget">
         .highlights-list li:hover {
             font-weight: bold;
         }
-        
-        .close-highlights-list {
-            position: absolute;
-            top: 2px;
-            right: 0px;
-        }
     </style>
 
     <span class="highlights-list"></span>
 </div>`;
 
 export default class HighlightsListWidget extends RightPanelWidget {
-    constructor() {
-        super();
-
-        this.closeHltButton = new CloseHltButton();
-        this.child(this.closeHltButton);
-    }
-
     get widgetTitle() {
         return "Highlights List";
     }
 
+    get widgetButtons() {
+        return [
+            new OnClickButtonWidget()
+                .icon("bx-slider")
+                .title("Options")
+                .titlePlacement("left")
+                .onClick(() => appContext.tabManager.openContextWithNote('_optionsTextNotes', {activate: true}))
+                .class("icon-action"),
+            new OnClickButtonWidget()
+                .icon("bx-x")
+                .title("Close Highlights List")
+                .titlePlacement("left")
+                .onClick(widget => widget.triggerCommand("closeHlt"))
+                .class("icon-action")
+        ];
+    }
+
     isEnabled() {
         return super.isEnabled()
             && this.note.type === 'text'
@@ -68,7 +73,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
     async doRenderBody() {
         this.$body.empty().append($(TPL));
         this.$highlightsList = this.$body.find('.highlights-list');
-        this.$body.find('.highlights-list-widget').append(this.closeHltButton.render());
     }
 
     async refreshWithNote(note) {
@@ -241,19 +245,3 @@ export default class HighlightsListWidget extends RightPanelWidget {
         }
     }
 }
-
-class CloseHltButton extends OnClickButtonWidget {
-    constructor() {
-        super();
-
-        this.icon("bx-x")
-            .title("Close HighlightsListWidget")
-            .titlePlacement("left")
-            .onClick((widget, e) => {
-                e.stopPropagation();
-
-                widget.triggerCommand("closeHlt");
-            })
-            .class("icon-action close-highlights-list");
-    }
-}

src/public/app/widgets/right_panel_widget.js

@@ -2,7 +2,10 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
 
 const WIDGET_TPL = `
 <div class="card widget">
-    <div class="card-header"></div>
+    <div class="card-header">
+        <div class="card-header-title"></div>
+        <div class="card-header-buttons"></div>
+    </div>
 
     <div id="[to be set]" class="body-wrapper">
         <div class="card-body"></div>
@@ -17,9 +20,18 @@ class RightPanelWidget extends NoteContextAwareWidget {
     /** Title to show in the panel. */
     get widgetTitle() { return "Untitled widget"; }
 
+    get widgetButtons() { return []; }
+
     get help() { return {}; }
 
+    constructor() {
+        super();
+
+        this.child(...this.widgetButtons);
+    }
+
     /**
+     * Do not override this method unless you know what you're doing.
      * Do not override this method unless you know what you're doing.
      */
     doRender() {
@@ -32,19 +44,26 @@ class RightPanelWidget extends NoteContextAwareWidget {
 
         this.$body = this.$bodyWrapper.find('.card-body');
 
-        this.$title = this.$widget.find('.card-header');
+        this.$title = this.$widget.find('.card-header .card-header-title');
         this.$title.text(this.widgetTitle);
 
+        this.$buttons = this.$widget.find('.card-header .card-header-buttons');
+        this.$buttons.empty();
+
+        for (const buttonWidget of this.children) {
+            this.$buttons.append(buttonWidget.render());
+        }
+
         this.initialized = this.doRenderBody();
     }
 
     /**
-     * Method used for rendering the body of the widget.
+     * Method used for rendering the body of the widget (via existing this.$body)
-     * 
+     *
      * Your class should override this method.
-     * @returns {JQuery<HTMLElement>} The body of your widget.
+     * @returns {Promise|undefined} if widget needs async operation to initialize, it can return a Promise
      */
     async doRenderBody() {}
 }
 
-export default RightPanelWidget;
+export default RightPanelWidget;

src/public/app/widgets/toc.js

@@ -18,6 +18,7 @@ import attributeService from "../services/attributes.js";
 import RightPanelWidget from "./right_panel_widget.js";
 import options from "../services/options.js";
 import OnClickButtonWidget from "./buttons/onclick_button.js";
+import appContext from "../components/app_context.js";
 
 const TPL = `<div class="toc-widget">
     <style>
@@ -47,29 +48,33 @@ const TPL = `<div class="toc-widget">
         .toc li:hover {
             font-weight: bold;
         }
-        
-        .close-toc {
-            position: absolute;
-            top: 2px;
-            right: 0px;
-        }
     </style>
 
     <span class="toc"></span>
 </div>`;
 
 export default class TocWidget extends RightPanelWidget {
-    constructor() {
-        super();
-
-        this.closeTocButton = new CloseTocButton();
-        this.child(this.closeTocButton);
-    }
-
     get widgetTitle() {
         return "Table of Contents";
     }
 
+    get widgetButtons() {
+        return [
+            new OnClickButtonWidget()
+                .icon("bx-slider")
+                .title("Options")
+                .titlePlacement("left")
+                .onClick(() => appContext.tabManager.openContextWithNote('_optionsTextNotes', {activate: true}))
+                .class("icon-action"),
+            new OnClickButtonWidget()
+                .icon("bx-x")
+                .title("Close Table of Contents")
+                .titlePlacement("left")
+                .onClick(widget => widget.triggerCommand("closeToc"))
+                .class("icon-action")
+        ];
+    }
+
     isEnabled() {
         return super.isEnabled()
             && this.note.type === 'text'
@@ -80,7 +85,6 @@ export default class TocWidget extends RightPanelWidget {
     async doRenderBody() {
         this.$body.empty().append($(TPL));
         this.$toc = this.$body.find('.toc');
-        this.$body.find('.toc-widget').append(this.closeTocButton.render());
     }
 
     async refreshWithNote(note) {
@@ -238,20 +242,3 @@ export default class TocWidget extends RightPanelWidget {
         }
     }
 }
-
-
-class CloseTocButton extends OnClickButtonWidget {
-    constructor() {
-        super();
-
-        this.icon("bx-x")
-            .title("Close TOC")
-            .titlePlacement("left")
-            .onClick((widget, e) => {
-                e.stopPropagation();
-
-                widget.triggerCommand("closeToc");
-            })
-            .class("icon-action close-toc");
-    }
-}

src/public/stylesheets/style.css

@@ -505,7 +505,7 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 }
 
 .algolia-autocomplete-container .aa-dropdown-menu {
-    position: inherit !important;    
+    position: inherit !important;
     overflow: auto;
 }
 
@@ -967,7 +967,7 @@ input {
 
 #right-pane .card-header {
     background: inherit;
-    padding: 6px 10px 3px 0;
+    padding: 6px 0 3px 0;
     width: 99%; /* to give minimal right margin */
     background-color: var(--button-background-color);
     border-color: var(--button-border-color);
@@ -976,11 +976,19 @@ input {
     border-style: solid;
     display: flex;
     justify-content: space-between;
+    align-items: baseline;
     font-weight: bold;
     text-transform: uppercase;
     color: var(--muted-text-color) !important;
 }
 
+#right-pane .card-header-buttons {
+    display: flex;
+    transform: scale(0.9);
+    position: relative;
+    top: 2px;
+}
+
 #right-pane .body-wrapper {
     overflow: auto;
 }