From 1d30421858c6c4ff0ba7a0adaad7f239590abc73 Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Tue, 23 Nov 2021 21:59:08 +0100 Subject: [PATCH 1/8] created banner widget --- src/public/app/widgets/banner_message.js | 29 ++++++++++++++++++++++++ src/public/stylesheets/theme-dark.css | 3 +++ src/public/stylesheets/theme-light.css | 3 +++ 3 files changed, 35 insertions(+) create mode 100644 src/public/app/widgets/banner_message.js diff --git a/src/public/app/widgets/banner_message.js b/src/public/app/widgets/banner_message.js new file mode 100644 index 0000000000..c7733d7211 --- /dev/null +++ b/src/public/app/widgets/banner_message.js @@ -0,0 +1,29 @@ +import FlexContainer from "./containers/flex_container.js"; +import searchService from "../services/search.js"; +import OpenNoteButtonWidget from "./buttons/open_note_button_widget.js"; +import BookmarkFolderWidget from "./buttons/bookmark_folder.js"; +import BasicWidget from "./basic_widget.js"; + +const TLP = ` + + +` + +export default class BannerMessageWidget extends BasicWidget { + constructor() { + super(); + } + + doRender() { + this.$widget = $(TLP); + } +} diff --git a/src/public/stylesheets/theme-dark.css b/src/public/stylesheets/theme-dark.css index 3c6009b636..e70ec6e3d5 100644 --- a/src/public/stylesheets/theme-dark.css +++ b/src/public/stylesheets/theme-dark.css @@ -64,6 +64,9 @@ --link-color: lightskyblue; --mermaid-theme: dark; + + --banner-background-color: #DA321B; + --banner-color: var(--main-text-color); } body .global-menu-button { diff --git a/src/public/stylesheets/theme-light.css b/src/public/stylesheets/theme-light.css index 82fb21d9b4..ba4161b343 100644 --- a/src/public/stylesheets/theme-light.css +++ b/src/public/stylesheets/theme-light.css @@ -68,4 +68,7 @@ html { --link-color: blue; --mermaid-theme: default; + + --banner-background-color: #DA321B; + --banner-color: var(--main-text-color); } From e20b5c8374014059a3ed13a73943c03bd20522aa Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Thu, 25 Nov 2021 18:51:19 +0100 Subject: [PATCH 2/8] fixed styling --- src/public/app/layouts/desktop_layout.js | 205 +++++++++--------- src/public/app/widgets/banner_message.js | 13 +- .../app/widgets/containers/flex_container.js | 6 + .../app/widgets/containers/root_container.js | 2 +- src/public/stylesheets/style.css | 4 - 5 files changed, 121 insertions(+), 109 deletions(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index fc06413d44..eec20d516c 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -46,6 +46,7 @@ import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js" import MermaidWidget from "../widgets/mermaid.js"; import BookmarkButtons from "../widgets/bookmark_buttons.js"; import NoteWrapperWidget from "../widgets/note_wrapper.js"; +import BannerMessageWidget from "../widgets/banner_message.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -57,113 +58,117 @@ export default class DesktopLayout { return new RootContainer() .setParent(appContext) - .child(new FlexContainer("column") - .id("launcher-pane") - .css("width", "53px") - .child(new GlobalMenuWidget()) - .child(new ButtonWidget() - .icon("bx-file-blank") - .title("New note") - .command("createNoteIntoInbox")) - .child(new ButtonWidget() - .icon("bx-search") - .title("Search") - .command("searchNotes")) - .child(new ButtonWidget() - .icon("bx-send") - .title("Jump to note") - .command("jumpToNote")) - .child(new OpenNoteButtonWidget() - .targetNote('globalnotemap')) - .child(new ButtonWidget() - .icon("bx-history") - .title("Show recent changes") - .command("showRecentChanges")) - .child(new CalendarWidget()) - .child(new SpacerWidget(40, 0)) + .child(new BannerMessageWidget()) + .child(new FlexContainer("row") + .withFullSize() .child(new FlexContainer("column") - .id("plugin-buttons") - .contentSized()) - .child(new BookmarkButtons()) - .child(new SpacerWidget(0, 1000)) - .child(new ProtectedSessionStatusWidget()) - .child(new SyncStatusWidget()) - .child(new LeftPaneToggleWidget()) - ) - .child(new LeftPaneContainer() - .child(new QuickSearchWidget()) - .child(appContext.mainTreeWidget) - .child(...this.customWidgets.get('left-pane')) - ) - .child(new FlexContainer('column') - .id('rest-pane') - .css("flex-grow", "1") - .child(new FlexContainer('row') - .child(new TabRowWidget()) - .child(new TitleBarButtonsWidget()) - .css('height', '40px') + .id("launcher-pane") + .css("width", "53px") + .child(new GlobalMenuWidget()) + .child(new ButtonWidget() + .icon("bx-file-blank") + .title("New note") + .command("createNoteIntoInbox")) + .child(new ButtonWidget() + .icon("bx-search") + .title("Search") + .command("searchNotes")) + .child(new ButtonWidget() + .icon("bx-send") + .title("Jump to note") + .command("jumpToNote")) + .child(new OpenNoteButtonWidget() + .targetNote('globalnotemap')) + .child(new ButtonWidget() + .icon("bx-history") + .title("Show recent changes") + .command("showRecentChanges")) + .child(new CalendarWidget()) + .child(new SpacerWidget(40, 0)) + .child(new FlexContainer("column") + .id("plugin-buttons") + .contentSized()) + .child(new BookmarkButtons()) + .child(new SpacerWidget(0, 1000)) + .child(new ProtectedSessionStatusWidget()) + .child(new SyncStatusWidget()) + .child(new LeftPaneToggleWidget()) ) - .child(new FlexContainer('row') - .filling() - .collapsible() - .child(new FlexContainer('column') + .child(new LeftPaneContainer() + .child(new QuickSearchWidget()) + .child(appContext.mainTreeWidget) + .child(...this.customWidgets.get('left-pane')) + ) + .child(new FlexContainer('column') + .id('rest-pane') + .css("flex-grow", "1") + .child(new FlexContainer('row') + .child(new TabRowWidget()) + .child(new TitleBarButtonsWidget()) + .css('height', '40px') + ) + .child(new FlexContainer('row') .filling() .collapsible() - .id('center-pane') - .child(new SplitNoteContainer(() => - new NoteWrapperWidget() - .child(new FlexContainer('row').class('title-row') - .css("height", "50px") - .css('align-items', "center") - .cssBlock('.title-row > * { margin: 5px; }') - .child(new NoteIconWidget()) - .child(new NoteTitleWidget()) - .child(new SpacerWidget(0, 1)) - .child(new ClosePaneButton()) - .child(new CreatePaneButton()) - ) - .child( - new RibbonContainer() - .ribbon(new SearchDefinitionWidget()) - .ribbon(new EditedNotesWidget()) - .ribbon(new BookPropertiesWidget()) - .ribbon(new NotePropertiesWidget()) - .ribbon(new FilePropertiesWidget()) - .ribbon(new ImagePropertiesWidget()) - .ribbon(new PromotedAttributesWidget()) - .ribbon(new BasicPropertiesWidget()) - .ribbon(new OwnedAttributeListWidget()) - .ribbon(new InheritedAttributesWidget()) - .ribbon(new NotePathsWidget()) - .ribbon(new NoteMapRibbonWidget()) - .ribbon(new SimilarNotesWidget()) - .ribbon(new NoteInfoWidget()) - .button(new EditButton()) - .button(new ButtonWidget() - .icon('bx-history') - .title("Note Revisions") - .command("showNoteRevisions") - .titlePlacement("bottom")) - .button(new NoteActionsWidget()) + .child(new FlexContainer('column') + .filling() + .collapsible() + .id('center-pane') + .child(new SplitNoteContainer(() => + new NoteWrapperWidget() + .child(new FlexContainer('row').class('title-row') + .css("height", "50px") + .css('align-items', "center") + .cssBlock('.title-row > * { margin: 5px; }') + .child(new NoteIconWidget()) + .child(new NoteTitleWidget()) + .child(new SpacerWidget(0, 1)) + .child(new ClosePaneButton()) + .child(new CreatePaneButton()) + ) + .child( + new RibbonContainer() + .ribbon(new SearchDefinitionWidget()) + .ribbon(new EditedNotesWidget()) + .ribbon(new BookPropertiesWidget()) + .ribbon(new NotePropertiesWidget()) + .ribbon(new FilePropertiesWidget()) + .ribbon(new ImagePropertiesWidget()) + .ribbon(new PromotedAttributesWidget()) + .ribbon(new BasicPropertiesWidget()) + .ribbon(new OwnedAttributeListWidget()) + .ribbon(new InheritedAttributesWidget()) + .ribbon(new NotePathsWidget()) + .ribbon(new NoteMapRibbonWidget()) + .ribbon(new SimilarNotesWidget()) + .ribbon(new NoteInfoWidget()) + .button(new EditButton()) + .button(new ButtonWidget() + .icon('bx-history') + .title("Note Revisions") + .command("showNoteRevisions") + .titlePlacement("bottom")) + .button(new NoteActionsWidget()) + ) + .child(new NoteUpdateStatusWidget()) + .child(new MermaidWidget()) + .child( + new ScrollingContainer() + .filling() + .child(new SqlTableSchemasWidget()) + .child(new NoteDetailWidget()) + .child(new NoteListWidget()) + .child(new SearchResultWidget()) + .child(new SqlResultWidget()) + ) + .child(...this.customWidgets.get('node-detail-pane')) ) - .child(new NoteUpdateStatusWidget()) - .child(new MermaidWidget()) - .child( - new ScrollingContainer() - .filling() - .child(new SqlTableSchemasWidget()) - .child(new NoteDetailWidget()) - .child(new NoteListWidget()) - .child(new SearchResultWidget()) - .child(new SqlResultWidget()) - ) - .child(...this.customWidgets.get('node-detail-pane')) ) + .child(...this.customWidgets.get('center-pane')) + ) + .child(new RightPaneContainer() + .child(...this.customWidgets.get('right-pane')) ) - .child(...this.customWidgets.get('center-pane')) - ) - .child(new RightPaneContainer() - .child(...this.customWidgets.get('right-pane')) ) ) ); diff --git a/src/public/app/widgets/banner_message.js b/src/public/app/widgets/banner_message.js index c7733d7211..da2b9960f9 100644 --- a/src/public/app/widgets/banner_message.js +++ b/src/public/app/widgets/banner_message.js @@ -7,15 +7,20 @@ import BasicWidget from "./basic_widget.js"; const TLP = ` - + ` export default class BannerMessageWidget extends BasicWidget { diff --git a/src/public/app/widgets/containers/flex_container.js b/src/public/app/widgets/containers/flex_container.js index 7ece8aff04..86f7776104 100644 --- a/src/public/app/widgets/containers/flex_container.js +++ b/src/public/app/widgets/containers/flex_container.js @@ -10,4 +10,10 @@ export default class FlexContainer extends Container { this.attrs.style = `display: flex; flex-direction: ${direction};`; } + + withFullSize() { + this.attrs.style += `width: 100%; height: 100%;`; + + return this; + } } diff --git a/src/public/app/widgets/containers/root_container.js b/src/public/app/widgets/containers/root_container.js index b42d40640a..ba059d64d7 100644 --- a/src/public/app/widgets/containers/root_container.js +++ b/src/public/app/widgets/containers/root_container.js @@ -4,7 +4,7 @@ import appContext from "../../services/app_context.js"; export default class RootContainer extends FlexContainer { constructor() { - super('row'); + super('column'); this.id('root-widget'); this.css('height', '100%'); diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 42a5b5c93a..01810b160b 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -55,10 +55,6 @@ table td, table th { background-color: var(--modal-backdrop-color) !important; } -.component { - contain: size; -} - code, kbd, pre, samp { font-family: var(--monospace-font-family) !important; } From e29d50f1a9814a57a9f6857a10db0223fac0e8d2 Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Thu, 25 Nov 2021 19:46:13 +0100 Subject: [PATCH 3/8] created event handler --- src/public/app/widgets/banner_message.js | 91 +++++++++++++++++++----- src/public/stylesheets/theme-dark.css | 6 +- src/public/stylesheets/theme-light.css | 6 +- 3 files changed, 84 insertions(+), 19 deletions(-) diff --git a/src/public/app/widgets/banner_message.js b/src/public/app/widgets/banner_message.js index da2b9960f9..4f204c0ba5 100644 --- a/src/public/app/widgets/banner_message.js +++ b/src/public/app/widgets/banner_message.js @@ -5,23 +5,52 @@ import BookmarkFolderWidget from "./buttons/bookmark_folder.js"; import BasicWidget from "./basic_widget.js"; const TLP = ` - - -` + +`; + +const AVAILABLE_TYPES = new Set([ + "error", "info", "warning", "success", "plain" +]); export default class BannerMessageWidget extends BasicWidget { constructor() { @@ -30,5 +59,33 @@ export default class BannerMessageWidget extends BasicWidget { doRender() { this.$widget = $(TLP); + this.$banner = this.$widget; + this.$bannerParagraph = this.$banner.find("p"); + } + + hideBanner() { + this.$bannerParagraph.text(""); + this.$banner.removeClass(); + this.$banner.addClass("empty"); + } + + setBannerEvent({ + text, + type = "alert" + }) { + if (!text) { + this.hideBanner(); + return; + } + + const className = AVAILABLE_TYPES.has(type) ? type : "plain"; + + this.$bannerParagraph.text(text); + this.$banner.removeClass(); + this.$banner.addClass(className); + } + + hideBannerEvent() { + this.hideBanner(); } } diff --git a/src/public/stylesheets/theme-dark.css b/src/public/stylesheets/theme-dark.css index e70ec6e3d5..45071bf7f6 100644 --- a/src/public/stylesheets/theme-dark.css +++ b/src/public/stylesheets/theme-dark.css @@ -65,7 +65,11 @@ --mermaid-theme: dark; - --banner-background-color: #DA321B; + --banner-background-color-error: #DA321B; + --banner-background-color-info: #1bb7da; + --banner-background-color-warning: #daad1b; + --banner-background-color-success: #67da1b; + --banner-background-color-plain: var(--more-accented-background-color); --banner-color: var(--main-text-color); } diff --git a/src/public/stylesheets/theme-light.css b/src/public/stylesheets/theme-light.css index ba4161b343..676d772a35 100644 --- a/src/public/stylesheets/theme-light.css +++ b/src/public/stylesheets/theme-light.css @@ -69,6 +69,10 @@ html { --mermaid-theme: default; - --banner-background-color: #DA321B; + --banner-background-color-error: #DA321B; + --banner-background-color-info: #1bb7da; + --banner-background-color-warning: #daad1b; + --banner-background-color-success: #67da1b; + --banner-background-color-plain: var(--more-accented-background-color); --banner-color: var(--main-text-color); } From 204c7174db74941641791d4036d572dc71f5ad1d Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Thu, 25 Nov 2021 20:11:59 +0100 Subject: [PATCH 4/8] added better timer --- src/public/app/services/timer.js | 29 ++++++ src/public/app/widgets/banner_message.js | 107 ++++++++++++++++++++--- 2 files changed, 124 insertions(+), 12 deletions(-) create mode 100644 src/public/app/services/timer.js diff --git a/src/public/app/services/timer.js b/src/public/app/services/timer.js new file mode 100644 index 0000000000..d966b0a985 --- /dev/null +++ b/src/public/app/services/timer.js @@ -0,0 +1,29 @@ +// https://stackoverflow.com/a/3969760 +export default class Timer { + timerId; + start; + remaining; + callback; + + constructor(callback, delay) { + this.remaining = delay; + this.callback = callback; + + this.resume() + } + + pause() { + clearTimeout(this.timerId); + this.remaining -= Date.now() - this.start; + } + + resume() { + this.start = Date.now(); + clearTimeout(this.timerId); + this.timerId = setTimeout(this.callback, this.remaining); + } + + clear() { + clearTimeout(this.timerId); + } +} diff --git a/src/public/app/widgets/banner_message.js b/src/public/app/widgets/banner_message.js index 4f204c0ba5..2f1edd5efd 100644 --- a/src/public/app/widgets/banner_message.js +++ b/src/public/app/widgets/banner_message.js @@ -1,18 +1,35 @@ -import FlexContainer from "./containers/flex_container.js"; -import searchService from "../services/search.js"; -import OpenNoteButtonWidget from "./buttons/open_note_button_widget.js"; -import BookmarkFolderWidget from "./buttons/bookmark_folder.js"; import BasicWidget from "./basic_widget.js"; +import Timer from "../services/timer.js"; const TLP = ` `; @@ -53,25 +88,60 @@ const AVAILABLE_TYPES = new Set([ ]); export default class BannerMessageWidget extends BasicWidget { + durationTimer; + constructor() { super(); } doRender() { this.$widget = $(TLP); - this.$banner = this.$widget; - this.$bannerParagraph = this.$banner.find("p"); + this.$bannerParagraph = this.$widget.find("p"); + this.$timer = this.$widget.find(".timer"); + + this.$widget.on("mouseenter", this.pauseTimer.bind(this)); + this.$widget.on("mouseleave", this.resumeTimer.bind(this)); } hideBanner() { this.$bannerParagraph.text(""); - this.$banner.removeClass(); - this.$banner.addClass("empty"); + this.$widget.removeClass(); + this.$widget.addClass("empty"); + + // In case `hideBanner` is called before the actual end, clear timer to avoid hard bugs + this.durationTimer?.clear(); + this.durationTimer = undefined; + } + + pauseTimer() { + if (this.durationTimer) { + this.$timer.css({ + animationPlayState: "paused", + }); + this.durationTimer?.pause(); + } + } + + resumeTimer() { + if (this.durationTimer) { + this.$timer.css({ + animationPlayState: "", + }); + this.durationTimer?.resume(); + } } + /** + * Shows a top banner. + * @param text - string: The text that should be displayed + * @param type - string: Type of the banner ("error", "info", "warning", "success", "plain") + * @param duration - number?: How long to show the banner. If `none` or `undefined`, + * the banner will not automatically be hidden. + */ setBannerEvent({ text, - type = "alert" + type = "alert", + duration, }) { if (!text) { this.hideBanner(); @@ -81,8 +151,21 @@ export default class BannerMessageWidget extends BasicWidget { const className = AVAILABLE_TYPES.has(type) ? type : "plain"; this.$bannerParagraph.text(text); - this.$banner.removeClass(); - this.$banner.addClass(className); + this.$widget.removeClass(); + this.$widget.addClass(className); + this.$timer.removeClass("indefinite"); + + // Remove old timer to avoid hard bug + this.durationTimer?.clear(); + + if (duration) { + this.durationTimer = new Timer(this.hideBanner.bind(this), duration); + this.$timer.css({ + animationDuration: `${duration}ms` + }) + } else { + this.$timer.addClass("indefinite"); + } } hideBannerEvent() { From 6b4adec0d37d2a8f1ce6ae01591caf9f06521ade Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 28 Nov 2021 14:05:28 +0100 Subject: [PATCH 5/8] improved customization --- src/public/app/widgets/banner_message.js | 21 +-------------------- src/public/stylesheets/theme-dark.css | 6 +----- src/public/stylesheets/theme-light.css | 6 +----- 3 files changed, 3 insertions(+), 30 deletions(-) diff --git a/src/public/app/widgets/banner_message.js b/src/public/app/widgets/banner_message.js index 2f1edd5efd..ac8feaab96 100644 --- a/src/public/app/widgets/banner_message.js +++ b/src/public/app/widgets/banner_message.js @@ -28,30 +28,11 @@ const TLP = ` font-size: 1rem; width: 100%; color: var(--banner-color); + background: var(--banner-background-color); position: relative; } - #banner-message.error { - background-color: var(--banner-background-color-error); - } - - #banner-message.info { - background-color: var(--banner-background-color-info); - } - - #banner-message.warning { - background-color: var(--banner-background-color-warning); - } - - #banner-message.success { - background-color: var(--banner-background-color-success); - } - - #banner-message.plain { - background-color: var(--banner-background-color-plain); - } - #banner-message > p { margin: 0; padding: 5px 20px; diff --git a/src/public/stylesheets/theme-dark.css b/src/public/stylesheets/theme-dark.css index 45071bf7f6..e70ec6e3d5 100644 --- a/src/public/stylesheets/theme-dark.css +++ b/src/public/stylesheets/theme-dark.css @@ -65,11 +65,7 @@ --mermaid-theme: dark; - --banner-background-color-error: #DA321B; - --banner-background-color-info: #1bb7da; - --banner-background-color-warning: #daad1b; - --banner-background-color-success: #67da1b; - --banner-background-color-plain: var(--more-accented-background-color); + --banner-background-color: #DA321B; --banner-color: var(--main-text-color); } diff --git a/src/public/stylesheets/theme-light.css b/src/public/stylesheets/theme-light.css index 676d772a35..ba4161b343 100644 --- a/src/public/stylesheets/theme-light.css +++ b/src/public/stylesheets/theme-light.css @@ -69,10 +69,6 @@ html { --mermaid-theme: default; - --banner-background-color-error: #DA321B; - --banner-background-color-info: #1bb7da; - --banner-background-color-warning: #daad1b; - --banner-background-color-success: #67da1b; - --banner-background-color-plain: var(--more-accented-background-color); + --banner-background-color: #DA321B; --banner-color: var(--main-text-color); } From a3cd7e5f9bb1829699605ba6cd04e11a1723d968 Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 28 Nov 2021 14:12:55 +0100 Subject: [PATCH 6/8] reverted some changes --- src/public/app/widgets/banner_message.js | 4 +++- src/public/app/widgets/containers/flex_container.js | 6 ------ src/public/stylesheets/style.css | 4 ++++ 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/public/app/widgets/banner_message.js b/src/public/app/widgets/banner_message.js index ac8feaab96..903474bd37 100644 --- a/src/public/app/widgets/banner_message.js +++ b/src/public/app/widgets/banner_message.js @@ -30,7 +30,9 @@ const TLP = ` color: var(--banner-color); background: var(--banner-background-color); - position: relative; + position: absolute; + top: 0; + left: 0; } #banner-message > p { diff --git a/src/public/app/widgets/containers/flex_container.js b/src/public/app/widgets/containers/flex_container.js index 86f7776104..7ece8aff04 100644 --- a/src/public/app/widgets/containers/flex_container.js +++ b/src/public/app/widgets/containers/flex_container.js @@ -10,10 +10,4 @@ export default class FlexContainer extends Container { this.attrs.style = `display: flex; flex-direction: ${direction};`; } - - withFullSize() { - this.attrs.style += `width: 100%; height: 100%;`; - - return this; - } } diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 01810b160b..42a5b5c93a 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -55,6 +55,10 @@ table td, table th { background-color: var(--modal-backdrop-color) !important; } +.component { + contain: size; +} + code, kbd, pre, samp { font-family: var(--monospace-font-family) !important; } From 94b10b405ad72d52e1132d06b4eb3a7f68379e0f Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 28 Nov 2021 14:37:52 +0100 Subject: [PATCH 7/8] fixes --- src/public/app/layouts/desktop_layout.js | 203 +++++++++--------- src/public/app/widgets/buttons/calendar.js | 7 + .../app/widgets/containers/root_container.js | 2 +- 3 files changed, 108 insertions(+), 104 deletions(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index eec20d516c..08e1f1e439 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -59,116 +59,113 @@ export default class DesktopLayout { return new RootContainer() .setParent(appContext) .child(new BannerMessageWidget()) - .child(new FlexContainer("row") - .withFullSize() + .child(new FlexContainer("column") + .id("launcher-pane") + .css("width", "53px") + .child(new GlobalMenuWidget()) + .child(new ButtonWidget() + .icon("bx-file-blank") + .title("New note") + .command("createNoteIntoInbox")) + .child(new ButtonWidget() + .icon("bx-search") + .title("Search") + .command("searchNotes")) + .child(new ButtonWidget() + .icon("bx-send") + .title("Jump to note") + .command("jumpToNote")) + .child(new OpenNoteButtonWidget() + .targetNote('globalnotemap')) + .child(new ButtonWidget() + .icon("bx-history") + .title("Show recent changes") + .command("showRecentChanges")) + .child(new CalendarWidget()) + .child(new SpacerWidget(40, 0)) .child(new FlexContainer("column") - .id("launcher-pane") - .css("width", "53px") - .child(new GlobalMenuWidget()) - .child(new ButtonWidget() - .icon("bx-file-blank") - .title("New note") - .command("createNoteIntoInbox")) - .child(new ButtonWidget() - .icon("bx-search") - .title("Search") - .command("searchNotes")) - .child(new ButtonWidget() - .icon("bx-send") - .title("Jump to note") - .command("jumpToNote")) - .child(new OpenNoteButtonWidget() - .targetNote('globalnotemap')) - .child(new ButtonWidget() - .icon("bx-history") - .title("Show recent changes") - .command("showRecentChanges")) - .child(new CalendarWidget()) - .child(new SpacerWidget(40, 0)) - .child(new FlexContainer("column") - .id("plugin-buttons") - .contentSized()) - .child(new BookmarkButtons()) - .child(new SpacerWidget(0, 1000)) - .child(new ProtectedSessionStatusWidget()) - .child(new SyncStatusWidget()) - .child(new LeftPaneToggleWidget()) + .id("plugin-buttons") + .contentSized()) + .child(new BookmarkButtons()) + .child(new SpacerWidget(0, 1000)) + .child(new ProtectedSessionStatusWidget()) + .child(new SyncStatusWidget()) + .child(new LeftPaneToggleWidget()) + ) + .child(new LeftPaneContainer() + .child(new QuickSearchWidget()) + .child(appContext.mainTreeWidget) + .child(...this.customWidgets.get('left-pane')) + ) + .child(new FlexContainer('column') + .id('rest-pane') + .css("flex-grow", "1") + .child(new FlexContainer('row') + .child(new TabRowWidget()) + .child(new TitleBarButtonsWidget()) + .css('height', '40px') ) - .child(new LeftPaneContainer() - .child(new QuickSearchWidget()) - .child(appContext.mainTreeWidget) - .child(...this.customWidgets.get('left-pane')) - ) - .child(new FlexContainer('column') - .id('rest-pane') - .css("flex-grow", "1") - .child(new FlexContainer('row') - .child(new TabRowWidget()) - .child(new TitleBarButtonsWidget()) - .css('height', '40px') - ) - .child(new FlexContainer('row') + .child(new FlexContainer('row') + .filling() + .collapsible() + .child(new FlexContainer('column') .filling() .collapsible() - .child(new FlexContainer('column') - .filling() - .collapsible() - .id('center-pane') - .child(new SplitNoteContainer(() => - new NoteWrapperWidget() - .child(new FlexContainer('row').class('title-row') - .css("height", "50px") - .css('align-items', "center") - .cssBlock('.title-row > * { margin: 5px; }') - .child(new NoteIconWidget()) - .child(new NoteTitleWidget()) - .child(new SpacerWidget(0, 1)) - .child(new ClosePaneButton()) - .child(new CreatePaneButton()) - ) - .child( - new RibbonContainer() - .ribbon(new SearchDefinitionWidget()) - .ribbon(new EditedNotesWidget()) - .ribbon(new BookPropertiesWidget()) - .ribbon(new NotePropertiesWidget()) - .ribbon(new FilePropertiesWidget()) - .ribbon(new ImagePropertiesWidget()) - .ribbon(new PromotedAttributesWidget()) - .ribbon(new BasicPropertiesWidget()) - .ribbon(new OwnedAttributeListWidget()) - .ribbon(new InheritedAttributesWidget()) - .ribbon(new NotePathsWidget()) - .ribbon(new NoteMapRibbonWidget()) - .ribbon(new SimilarNotesWidget()) - .ribbon(new NoteInfoWidget()) - .button(new EditButton()) - .button(new ButtonWidget() - .icon('bx-history') - .title("Note Revisions") - .command("showNoteRevisions") - .titlePlacement("bottom")) - .button(new NoteActionsWidget()) - ) - .child(new NoteUpdateStatusWidget()) - .child(new MermaidWidget()) - .child( - new ScrollingContainer() - .filling() - .child(new SqlTableSchemasWidget()) - .child(new NoteDetailWidget()) - .child(new NoteListWidget()) - .child(new SearchResultWidget()) - .child(new SqlResultWidget()) - ) - .child(...this.customWidgets.get('node-detail-pane')) + .id('center-pane') + .child(new SplitNoteContainer(() => + new NoteWrapperWidget() + .child(new FlexContainer('row').class('title-row') + .css("height", "50px") + .css('align-items', "center") + .cssBlock('.title-row > * { margin: 5px; }') + .child(new NoteIconWidget()) + .child(new NoteTitleWidget()) + .child(new SpacerWidget(0, 1)) + .child(new ClosePaneButton()) + .child(new CreatePaneButton()) + ) + .child( + new RibbonContainer() + .ribbon(new SearchDefinitionWidget()) + .ribbon(new EditedNotesWidget()) + .ribbon(new BookPropertiesWidget()) + .ribbon(new NotePropertiesWidget()) + .ribbon(new FilePropertiesWidget()) + .ribbon(new ImagePropertiesWidget()) + .ribbon(new PromotedAttributesWidget()) + .ribbon(new BasicPropertiesWidget()) + .ribbon(new OwnedAttributeListWidget()) + .ribbon(new InheritedAttributesWidget()) + .ribbon(new NotePathsWidget()) + .ribbon(new NoteMapRibbonWidget()) + .ribbon(new SimilarNotesWidget()) + .ribbon(new NoteInfoWidget()) + .button(new EditButton()) + .button(new ButtonWidget() + .icon('bx-history') + .title("Note Revisions") + .command("showNoteRevisions") + .titlePlacement("bottom")) + .button(new NoteActionsWidget()) ) + .child(new NoteUpdateStatusWidget()) + .child(new MermaidWidget()) + .child( + new ScrollingContainer() + .filling() + .child(new SqlTableSchemasWidget()) + .child(new NoteDetailWidget()) + .child(new NoteListWidget()) + .child(new SearchResultWidget()) + .child(new SqlResultWidget()) + ) + .child(...this.customWidgets.get('node-detail-pane')) ) - .child(...this.customWidgets.get('center-pane')) - ) - .child(new RightPaneContainer() - .child(...this.customWidgets.get('right-pane')) ) + .child(...this.customWidgets.get('center-pane')) + ) + .child(new RightPaneContainer() + .child(...this.customWidgets.get('right-pane')) ) ) ); diff --git a/src/public/app/widgets/buttons/calendar.js b/src/public/app/widgets/buttons/calendar.js index 85d541c957..a592813cc8 100644 --- a/src/public/app/widgets/buttons/calendar.js +++ b/src/public/app/widgets/buttons/calendar.js @@ -30,6 +30,13 @@ const DROPDOWN_TPL = ` export default class CalendarWidget extends RightDropdownButtonWidget { constructor() { super("bx-calendar", "Calendar", DROPDOWN_TPL); + + setTimeout(() => { + this.triggerEvent("setBanner", { + text: "Internet lost.", + type: "error" + }) + }, 200); } doRender() { diff --git a/src/public/app/widgets/containers/root_container.js b/src/public/app/widgets/containers/root_container.js index ba059d64d7..b42d40640a 100644 --- a/src/public/app/widgets/containers/root_container.js +++ b/src/public/app/widgets/containers/root_container.js @@ -4,7 +4,7 @@ import appContext from "../../services/app_context.js"; export default class RootContainer extends FlexContainer { constructor() { - super('column'); + super('row'); this.id('root-widget'); this.css('height', '100%'); From 4ad73e8ccc30df4e082b2462f2ad5e2e7b946771 Mon Sep 17 00:00:00 2001 From: myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 28 Nov 2021 14:39:00 +0100 Subject: [PATCH 8/8] created new banner --- src/public/app/widgets/banner_message.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/app/widgets/banner_message.js b/src/public/app/widgets/banner_message.js index 903474bd37..d7679e2b77 100644 --- a/src/public/app/widgets/banner_message.js +++ b/src/public/app/widgets/banner_message.js @@ -33,6 +33,7 @@ const TLP = ` position: absolute; top: 0; left: 0; + z-index: 6; } #banner-message > p {