From a3d44fbdef2fe0191d06efe222c8b8890f29840e Mon Sep 17 00:00:00 2001 From: zadam Date: Fri, 28 May 2021 22:47:59 +0200 Subject: [PATCH] button tweaks --- src/public/app/layouts/desktop_layout.js | 11 +- .../app/widgets/buttons/button_widget.js | 17 ++- src/public/app/widgets/buttons/global_menu.js | 134 ++++++++---------- .../app/widgets/buttons/note_actions.js | 13 +- .../app/widgets/buttons/show_note_source.js | 16 +++ .../collapsible_section_container.js | 7 +- .../type_property_widgets/note_info_widget.js | 2 +- src/public/stylesheets/style.css | 43 +++--- 8 files changed, 110 insertions(+), 133 deletions(-) create mode 100644 src/public/app/widgets/buttons/show_note_source.js diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index d1b4abe9b..7d67067f7 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -35,6 +35,7 @@ import ClosePaneButton from "../widgets/buttons/close_pane_button.js"; import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js"; import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js"; import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js"; +import ShowNoteSourceButton from "../widgets/buttons/show_note_source.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -69,7 +70,7 @@ export default class DesktopLayout { .child(new ProtectedSessionStatusWidget()) .child(new SyncStatusWidget()) .child(new SidebarToggleWidget()) - .css("width", "50px") + .css("width", "54px") ) .child(new SidePaneContainer('left') .hideInZenMode() @@ -114,11 +115,9 @@ export default class DesktopLayout { .button(new ButtonWidget() .icon('bx bx-history') .title("Note Revisions") - .command("showNoteRevisions")) - .button(new ButtonWidget() // FIXME should be displayed only when applicable - .icon('bx bx-code') - .title("Show Note Source") - .command("showNoteSource")) + .command("showNoteRevisions") + .titlePlacement("bottom")) + .button(new ShowNoteSourceButton()) .button(new NoteActionsWidget()) ) .child(new NoteUpdateStatusWidget()) diff --git a/src/public/app/widgets/buttons/button_widget.js b/src/public/app/widgets/buttons/button_widget.js index bef965cb1..88ce6fef8 100644 --- a/src/public/app/widgets/buttons/button_widget.js +++ b/src/public/app/widgets/buttons/button_widget.js @@ -1,12 +1,8 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js"; -const TPL = ` - - - -`; + title="">`; export default class ButtonWidget extends NoteContextAwareWidget { isEnabled() { @@ -44,11 +40,14 @@ export default class ButtonWidget extends NoteContextAwareWidget { } refreshIcon() { + for (const className of this.$widget[0].classList) { + if (className.startsWith("bx-")) { + this.$widget.removeClass(className); + } + } + this.$widget .attr("title", this.settings.title) - this.$widget.find("span.bx") - .removeClass() - .addClass("bx") .addClass(this.settings.icon); } diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js index ccc266807..c07ee4ace 100644 --- a/src/public/app/widgets/buttons/global_menu.js +++ b/src/public/app/widgets/buttons/global_menu.js @@ -2,99 +2,79 @@ import BasicWidget from "../basic_widget.js"; import utils from "../../services/utils.js"; const TPL = ` -
+
-
- -
- - - Options - + - - - Open new window - - +
+ + + Options + - - - Open Dev Tools - - + + + Open new window + + - - - Open SQL Console - - + + + Open Dev Tools + + - - - Show backend log - - + + + Open SQL Console + + - - - Reload frontend - - + + + Show backend log + + - - - Toggle Zen mode - - + + + Reload frontend + + - - - Toggle fullscreen - - + + + Toggle Zen mode + + - - - Show Help - - + + + Toggle fullscreen + + - - - About Trilium Notes - + + + Show Help + + - - - Logout - -
+ + + About Trilium Notes + + + + + Logout +
`; diff --git a/src/public/app/widgets/buttons/note_actions.js b/src/public/app/widgets/buttons/note_actions.js index d50cc359c..b21e87956 100644 --- a/src/public/app/widgets/buttons/note_actions.js +++ b/src/public/app/widgets/buttons/note_actions.js @@ -3,15 +3,7 @@ import utils from "../../services/utils.js"; const TPL = `
- + aria-expanded="false" class="icon-action bx bx-dots-vertical-rounded">
Re-render note Search in note - Link map Open note externally Import files Export note diff --git a/src/public/app/widgets/buttons/show_note_source.js b/src/public/app/widgets/buttons/show_note_source.js new file mode 100644 index 000000000..9597c3dc5 --- /dev/null +++ b/src/public/app/widgets/buttons/show_note_source.js @@ -0,0 +1,16 @@ +import ButtonWidget from "./button_widget.js"; + +export default class ShowNoteSourceButton extends ButtonWidget { + isEnabled() { + return super.isEnabled() && this.note && ['text', 'relation-map'].includes(this.note.type); + } + + constructor() { + super(); + + this.icon('bx bx-code') + .title("Show Note Source") + .command("showNoteSource") + .titlePlacement("bottom"); + } +} diff --git a/src/public/app/widgets/containers/collapsible_section_container.js b/src/public/app/widgets/containers/collapsible_section_container.js index 66a6705ec..e0b731683 100644 --- a/src/public/app/widgets/containers/collapsible_section_container.js +++ b/src/public/app/widgets/containers/collapsible_section_container.js @@ -57,15 +57,14 @@ const TPL = ` .section-button-container { display: flex; border-bottom: 1px solid var(--main-border-color); - margin-right: 10px; + margin-right: 5px; } - .section-button-container .bx { + .section-button-container .icon-action { padding: 5px; - font-size: 150%; position: relative; top: -3px; - margin-right: 5px; + margin-left: 10px; } .section-body { diff --git a/src/public/app/widgets/type_property_widgets/note_info_widget.js b/src/public/app/widgets/type_property_widgets/note_info_widget.js index 946002674..4b7d06c86 100644 --- a/src/public/app/widgets/type_property_widgets/note_info_widget.js +++ b/src/public/app/widgets/type_property_widgets/note_info_widget.js @@ -46,7 +46,7 @@ const TPL = ` Note size: - + diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 5e92e6c41..8aa89fd59 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -24,14 +24,6 @@ code, kbd, pre, samp { font-family: var(--font-family-monospace); } -button.btn, button.btn-sm { - font-size: inherit; -} - -.btn-micro { - padding: 0 10px 0 10px; -} - .input-group-text { background-color: var(--accented-background-color) !important; color: var(--muted-text-color) !important; @@ -81,11 +73,6 @@ button.close:hover { overflow-x: hidden; } -.icon-action:hover:not(.disabled) { - text-decoration: none; - border-color: var(--button-border-color); -} - .icon-action { border: 1px solid transparent; border-radius: 3px; @@ -93,6 +80,12 @@ button.close:hover { cursor: pointer; font-size: 1.5em; color: var(--main-text-color); + background: var(--button-background-color); +} + +.icon-action:hover:not(.disabled) { + text-decoration: none; + border-color: var(--button-border-color); } .icon-action.disabled { @@ -237,6 +230,15 @@ div.ui-tooltip { .btn { border-radius: var(--button-border-radius); + border-color: var(--button-border-color); +} + +button.btn, button.btn-sm { + font-size: inherit; +} + +.btn-micro { + padding: 0 10px 0 10px; } .btn.btn-primary { @@ -260,10 +262,6 @@ div.ui-tooltip { 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; @@ -885,20 +883,15 @@ ul.fancytree-container li { margin: 10px; } -.button-widget .bx { - font-size: 120%; - -} - -#launcher-pane .button-widget .bx { +#launcher-pane .icon-action { font-size: 150%; display: inline-block; - position: relative; padding: 15px 15px; cursor: pointer; + border: none; } -.button-widget:hover .bx { +#launcher-pane .icon-action:hover { background-color: var(--hover-item-background-color); }