From c231b3cb79f96d06d4e8d24f7ac7ec851aaf2b8a Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 11 Dec 2022 13:20:37 +0100 Subject: [PATCH] styling changes of buttons --- package-lock.json | 1 + src/public/app/components/component.js | 2 +- src/public/app/layouts/desktop_layout.js | 2 +- src/public/app/widgets/basic_widget.js | 1 + src/public/app/widgets/bookmark_buttons.js | 2 ++ src/public/app/widgets/buttons/abstract_button.js | 15 ++++++++------- .../app/widgets/buttons/create_pane_button.js | 3 ++- .../widgets/buttons/launcher/abstract_launcher.js | 2 ++ .../app/widgets/buttons/left_pane_toggle.js | 2 ++ .../app/widgets/buttons/note_revisions_button.js | 3 ++- .../widgets/buttons/protected_session_status.js | 2 ++ .../app/widgets/buttons/right_dropdown_button.js | 2 +- src/public/app/widgets/containers/launcher.js | 10 ++++++---- .../app/widgets/containers/ribbon_container.js | 4 ---- .../widgets/floating_buttons/floating_buttons.js | 15 ++++++++++++++- .../floating_buttons/mermaid_export_button.js | 6 ++++-- src/public/stylesheets/style.css | 4 ++-- src/services/app_info.js | 2 +- 18 files changed, 52 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3ea3c36e5..9da7d3d6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "trilium", "version": "0.57.3", "hasInstallScript": true, "license": "AGPL-3.0-only", diff --git a/src/public/app/components/component.js b/src/public/app/components/component.js index c9b78ee9c..ab9acefb5 100644 --- a/src/public/app/components/component.js +++ b/src/public/app/components/component.js @@ -13,7 +13,7 @@ import utils from '../services/utils.js'; */ export default class Component { constructor() { - this.componentId = `comp-` + this.sanitizedClassName + '-' + utils.randomString(8); + this.componentId = this.sanitizedClassName + '-' + utils.randomString(8); /** @type Component[] */ this.children = []; this.initialized = null; diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 341f43a96..f665aee77 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -143,13 +143,13 @@ export default class DesktopLayout { .ribbon(new NoteMapRibbonWidget()) .ribbon(new SimilarNotesWidget()) .ribbon(new NoteInfoWidget()) - .button(new EditButton()) .button(new NoteRevisionsButton()) .button(new NoteActionsWidget()) ) .child(new SharedInfoWidget()) .child(new NoteUpdateStatusWidget()) .child(new FloatingButtons() + .child(new EditButton()) .child(new RelationMapButtons()) .child(new MermaidExportButton()) .child(new BacklinksWidget()) diff --git a/src/public/app/widgets/basic_widget.js b/src/public/app/widgets/basic_widget.js index e8de53066..f7de3088a 100644 --- a/src/public/app/widgets/basic_widget.js +++ b/src/public/app/widgets/basic_widget.js @@ -72,6 +72,7 @@ class BasicWidget extends Component { render() { this.doRender(); + this.$widget.attr('data-component-id', this.componentId); this.$widget.addClass('component') .prop('component', this); diff --git a/src/public/app/widgets/bookmark_buttons.js b/src/public/app/widgets/bookmark_buttons.js index 5d561d134..621da7d15 100644 --- a/src/public/app/widgets/bookmark_buttons.js +++ b/src/public/app/widgets/bookmark_buttons.js @@ -24,6 +24,8 @@ export default class BookmarkButtons extends FlexContainer { ? new BookmarkFolderWidget(note) : new OpenNoteButtonWidget().targetNote(note.noteId); + buttonWidget.class("launcher-button"); + this.child(buttonWidget); this.$widget.append(buttonWidget.render()); diff --git a/src/public/app/widgets/buttons/abstract_button.js b/src/public/app/widgets/buttons/abstract_button.js index 69b1f22b3..367106329 100644 --- a/src/public/app/widgets/buttons/abstract_button.js +++ b/src/public/app/widgets/buttons/abstract_button.js @@ -1,8 +1,8 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js"; -const TPL = ``; +const TPL = ``; export default class AbstractButtonWidget extends NoteContextAwareWidget { isEnabled() { @@ -22,6 +22,7 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget { doRender() { this.$widget = $(TPL); + this.$iconSpan = this.$widget.find("span"); if (this.settings.onContextMenu) { this.$widget.on("contextmenu", e => { @@ -49,9 +50,9 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget { } refreshIcon() { - for (const className of this.$widget[0].classList) { + for (const className of this.$iconSpan[0].classList) { if (className.startsWith("bx-")) { - this.$widget.removeClass(className); + this.$iconSpan.removeClass(className); } } @@ -59,7 +60,7 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget { ? this.settings.icon() : this.settings.icon; - this.$widget.addClass(icon); + this.$iconSpan.addClass(icon); } initialRenderCompleteEvent() { @@ -87,4 +88,4 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget { onContextMenu(handler) { this.settings.onContextMenu = handler; } -} \ No newline at end of file +} diff --git a/src/public/app/widgets/buttons/create_pane_button.js b/src/public/app/widgets/buttons/create_pane_button.js index 8d38abdb9..e608803a9 100644 --- a/src/public/app/widgets/buttons/create_pane_button.js +++ b/src/public/app/widgets/buttons/create_pane_button.js @@ -7,6 +7,7 @@ export default class CreatePaneButton extends OnClickButtonWidget { this.icon("bx-dock-right") .title("Create new split") .titlePlacement("bottom") - .onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() })); + .onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() })) + .class("icon-action"); } } diff --git a/src/public/app/widgets/buttons/launcher/abstract_launcher.js b/src/public/app/widgets/buttons/launcher/abstract_launcher.js index 25f4cc0d4..dd868a9e4 100644 --- a/src/public/app/widgets/buttons/launcher/abstract_launcher.js +++ b/src/public/app/widgets/buttons/launcher/abstract_launcher.js @@ -5,6 +5,8 @@ export default class AbstractLauncher extends OnClickButtonWidget { constructor(launcherNote) { super(); + this.class("launcher-button"); + /** @type {NoteShort} */ this.launcherNote = launcherNote; diff --git a/src/public/app/widgets/buttons/left_pane_toggle.js b/src/public/app/widgets/buttons/left_pane_toggle.js index 7cb1f626a..246d989f3 100644 --- a/src/public/app/widgets/buttons/left_pane_toggle.js +++ b/src/public/app/widgets/buttons/left_pane_toggle.js @@ -6,6 +6,8 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget { constructor() { super(); + this.class("launcher-button"); + this.settings.icon = () => options.is('leftPaneVisible') ? "bx-chevrons-left" : "bx-chevrons-right"; diff --git a/src/public/app/widgets/buttons/note_revisions_button.js b/src/public/app/widgets/buttons/note_revisions_button.js index e40e8687d..ca4a3fb9b 100644 --- a/src/public/app/widgets/buttons/note_revisions_button.js +++ b/src/public/app/widgets/buttons/note_revisions_button.js @@ -7,7 +7,8 @@ export default class NoteRevisionsButton extends CommandButtonWidget { this.icon('bx-history') .title("Note Revisions") .command("showNoteRevisions") - .titlePlacement("bottom"); + .titlePlacement("bottom") + .class("icon-action"); } isEnabled() { diff --git a/src/public/app/widgets/buttons/protected_session_status.js b/src/public/app/widgets/buttons/protected_session_status.js index 32fe14c7c..b218e6bde 100644 --- a/src/public/app/widgets/buttons/protected_session_status.js +++ b/src/public/app/widgets/buttons/protected_session_status.js @@ -5,6 +5,8 @@ export default class ProtectedSessionStatusWidget extends CommandButtonWidget { constructor() { super(); + this.class("launcher-button"); + this.settings.icon = () => protectedSessionHolder.isProtectedSessionAvailable() ? "bx-check-shield" : "bx-shield-quarter"; diff --git a/src/public/app/widgets/buttons/right_dropdown_button.js b/src/public/app/widgets/buttons/right_dropdown_button.js index 160550fc6..53a4808d9 100644 --- a/src/public/app/widgets/buttons/right_dropdown_button.js +++ b/src/public/app/widgets/buttons/right_dropdown_button.js @@ -11,7 +11,7 @@ const TPL = ` + class="bx right-dropdown-button launcher-button">
diff --git a/src/public/app/widgets/containers/launcher.js b/src/public/app/widgets/containers/launcher.js index 61e1c60aa..29f060c62 100644 --- a/src/public/app/widgets/containers/launcher.js +++ b/src/public/app/widgets/containers/launcher.js @@ -1,4 +1,3 @@ -import OnClickButtonWidget from "../buttons/onclick_button.js"; import CalendarWidget from "../buttons/calendar.js"; import SpacerWidget from "../spacer.js"; import BookmarkButtons from "../bookmark_buttons.js"; @@ -34,11 +33,14 @@ export default class LauncherWidget extends BasicWidget { const launcherType = note.getLabelValue("launcherType"); if (launcherType === 'command') { - this.innerWidget = this.initCommandWidget(note); + this.innerWidget = this.initCommandWidget(note) + .class("launcher-button"); } else if (launcherType === 'note') { - this.innerWidget = new NoteLauncher(note); + this.innerWidget = new NoteLauncher(note) + .class("launcher-button"); } else if (launcherType === 'script') { - this.innerWidget = new ScriptLauncher(note); + this.innerWidget = new ScriptLauncher(note) + .class("launcher-button"); } else if (launcherType === 'customWidget') { this.innerWidget = await this.initCustomWidget(note); } else if (launcherType === 'builtinWidget') { diff --git a/src/public/app/widgets/containers/ribbon_container.js b/src/public/app/widgets/containers/ribbon_container.js index 0d821f672..b076298cc 100644 --- a/src/public/app/widgets/containers/ribbon_container.js +++ b/src/public/app/widgets/containers/ribbon_container.js @@ -78,10 +78,6 @@ const TPL = ` margin-right: 5px; } - .ribbon-button-container .icon-action { - padding: 5px; - } - .ribbon-button-container > * { position: relative; top: -3px; diff --git a/src/public/app/widgets/floating_buttons/floating_buttons.js b/src/public/app/widgets/floating_buttons/floating_buttons.js index 2df8caf6f..db7c81421 100644 --- a/src/public/app/widgets/floating_buttons/floating_buttons.js +++ b/src/public/app/widgets/floating_buttons/floating_buttons.js @@ -20,9 +20,22 @@ const TPL = ` margin-left: 10px; } - .floating-buttons .floating-button { + .floating-buttons-children > button { font-size: 130%; padding: 5px 10px 4px 10px; + width: 40px; + cursor: pointer; + color: var(--button-text-color); + background: var(--button-background-color); + border-radius: var(--button-border-radius); + border: 1px solid transparent; + display: flex; + justify-content: space-around; + } + + .floating-buttons-children > button:hover { + text-decoration: none; + border-color: var(--button-border-color); } .floating-buttons.temporarily-hidden { diff --git a/src/public/app/widgets/floating_buttons/mermaid_export_button.js b/src/public/app/widgets/floating_buttons/mermaid_export_button.js index f4b1ed63e..490df82bc 100644 --- a/src/public/app/widgets/floating_buttons/mermaid_export_button.js +++ b/src/public/app/widgets/floating_buttons/mermaid_export_button.js @@ -2,8 +2,10 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js"; const TPL = ` + class="export-mermaid-button no-print" + title="Export Mermaid diagram as SVG"> + + `; export default class MermaidExportButton extends NoteContextAwareWidget { diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 911107e23..fc6361bc3 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -109,7 +109,6 @@ button.close:hover { .icon-action { border: 1px solid transparent; - padding: 5px; width: 35px; height: 35px; cursor: pointer; @@ -863,13 +862,14 @@ body { margin: 10px; } -#launcher-pane .icon-action { +#launcher-pane .launcher-button { font-size: 150%; display: inline-block; padding: 15px 15px; cursor: pointer; border: none; color: var(--launcher-pane-text-color); + background-color: var(--launcher-pane-background-color); width: 53px; height: 53px; } diff --git a/src/services/app_info.js b/src/services/app_info.js index 23de6de7b..8d26a786e 100644 --- a/src/services/app_info.js +++ b/src/services/app_info.js @@ -4,7 +4,7 @@ const build = require('./build'); const packageJson = require('../../package'); const {TRILIUM_DATA_DIR} = require('./data_dir'); -const APP_DB_VERSION = 206; +const APP_DB_VERSION = 205; const SYNC_VERSION = 28; const CLIPPER_PROTOCOL_VERSION = "1.0";