diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 8d9e875e5..85be98b11 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -146,6 +146,7 @@ export default class DesktopLayout { return new RootContainer() .setParent(appContext) .child(new FlexContainer("column") + .id("launcher-pane") .child(new GlobalMenuWidget()) .child(new ButtonWidget() .icon("bx-file-blank") @@ -199,7 +200,9 @@ export default class DesktopLayout { .child(new ButtonWidget() .icon("bx-window-open bx-rotate-90") .title("Create new pane") - .command("openNewPane")) + .titlePlacement("bottom") + .command("openNewPane") + ) ) .child( new CollapsibleSectionContainer() diff --git a/src/public/app/widgets/button_widget.js b/src/public/app/widgets/button_widget.js index 83ac19f41..9be541344 100644 --- a/src/public/app/widgets/button_widget.js +++ b/src/public/app/widgets/button_widget.js @@ -3,7 +3,6 @@ import BasicWidget from "./basic_widget.js"; const TPL = ` @@ -13,7 +12,9 @@ export default class ButtonWidget extends BasicWidget { constructor() { super(); - this.settings = {}; + this.settings = { + titlePlacement: 'right' + }; } doRender() { @@ -31,7 +32,9 @@ export default class ButtonWidget extends BasicWidget { } refreshIcon() { - this.$widget.attr("title", this.settings.title); + this.$widget + .attr("title", this.settings.title) + .attr("data-placement", this.settings.titlePlacement); this.$widget.find("span.bx") .removeClass() .addClass("bx") @@ -52,6 +55,11 @@ export default class ButtonWidget extends BasicWidget { return this; } + titlePlacement(placement) { + this.settings.titlePlacement = placement; + return this; + } + command(command) { this.settings.command = command; return this; diff --git a/src/public/app/widgets/containers/pane_container.js b/src/public/app/widgets/containers/pane_container.js index 35e800cb1..162ace07a 100644 --- a/src/public/app/widgets/containers/pane_container.js +++ b/src/public/app/widgets/containers/pane_container.js @@ -23,6 +23,8 @@ export default class PaneContainer extends FlexContainer { this.$widget.append($renderedWidget); + widget.handleEvent('initialRenderComplete'); + widget.toggleExt(false); this.widgets[noteContext.ntxId] = widget; @@ -60,7 +62,7 @@ export default class PaneContainer extends FlexContainer { for (const ntxId in this.widgets) { const noteContext = appContext.tabManager.getNoteContextById(ntxId); - +console.log(noteContext, activeNtxId); const widget = this.widgets[ntxId]; widget.toggleExt(show && activeNtxId && [noteContext.ntxId, noteContext.mainNtxId].includes(activeNtxId)); } @@ -116,6 +118,8 @@ export default class PaneContainer extends FlexContainer { } } + this.refresh(); + return Promise.all(promises); } } diff --git a/src/public/app/widgets/note_context_caching_widget.js b/src/public/app/widgets/note_context_caching_widget.js index e95e0fb8a..eae98b537 100644 --- a/src/public/app/widgets/note_context_caching_widget.js +++ b/src/public/app/widgets/note_context_caching_widget.js @@ -27,6 +27,8 @@ export default class NoteContextCachingWidget extends NoteContextAwareWidget { this.$widget.after($renderedWidget); + this.widgets[ntxId].handleEvent('initialRenderComplete'); + keyboardActionsService.updateDisplayedShortcuts($renderedWidget); await this.widgets[ntxId].handleEvent('setNoteContext', {noteContext}); diff --git a/src/public/app/widgets/quick_search.js b/src/public/app/widgets/quick_search.js index d398fd784..6518b8441 100644 --- a/src/public/app/widgets/quick_search.js +++ b/src/public/app/widgets/quick_search.js @@ -10,7 +10,12 @@ const TPL = ` `; diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 5bafbcf3c..fa1372063 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -297,11 +297,14 @@ div.ui-tooltip { } .btn:not(.btn-primary) { - border-color: var(--button-border-color); background-color: var(--button-background-color); color: var(--button-text-color); } +.btn:not(.btn-primary):hover { + border-color: var(--button-border-color); +} + .btn.active:not(.btn-primary) { background-color: var(--button-disabled-background-color) !important; opacity: 0.4; @@ -930,13 +933,17 @@ ul.fancytree-container li { } .button-widget .bx { - font-size: 150%; + font-size: 120%; display: inline-block; position: relative; padding: 10px; cursor: pointer; } +#launcher-pane .button-widget .bx { + font-size: 150%; +} + .button-widget:hover .bx { background-color: var(--hover-item-background-color); }