diff --git a/src/public/app/widgets/basic_widget.js b/src/public/app/widgets/basic_widget.js index 1c1896abf..0f94a1c0f 100644 --- a/src/public/app/widgets/basic_widget.js +++ b/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} Your widget. + * The method is expected to create a this.$widget containing jQuery object */ doRender() {} diff --git a/src/public/app/widgets/buttons/onclick_button.js b/src/public/app/widgets/buttons/onclick_button.js index ea4fafd5f..11aa53e4a 100644 --- a/src/public/app/widgets/buttons/onclick_button.js +++ b/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); diff --git a/src/public/app/widgets/highlights_list.js b/src/public/app/widgets/highlights_list.js index 8b6a80024..285d9634d 100644 --- a/src/public/app/widgets/highlights_list.js +++ b/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 = `
`; 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"); - } -} diff --git a/src/public/app/widgets/right_panel_widget.js b/src/public/app/widgets/right_panel_widget.js index 12e3c71a0..a9831fb5a 100644 --- a/src/public/app/widgets/right_panel_widget.js +++ b/src/public/app/widgets/right_panel_widget.js @@ -2,7 +2,10 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js"; const WIDGET_TPL = `
-
+
+
+
+
@@ -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} 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; \ No newline at end of file +export default RightPanelWidget; diff --git a/src/public/app/widgets/toc.js b/src/public/app/widgets/toc.js index 1c0dbc496..3824c960f 100644 --- a/src/public/app/widgets/toc.js +++ b/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 = `
`; 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"); - } -} diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 943faf852..c64b527d5 100644 --- a/src/public/stylesheets/style.css +++ b/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; }