From c9368ed98f082e28fa6890c144632c507e60b6e9 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Thu, 6 May 2021 20:29:55 +0200 Subject: [PATCH] Add lefttopbtns as AddonButtons --- qt/aqt/editor.py | 20 ++++++++++---------- ts/components/ButtonToolbar.svelte | 8 ++++---- ts/components/IconButton.svelte | 7 +------ ts/components/LabelButton.svelte | 6 +----- ts/components/Raw.svelte | 9 --------- ts/editor/AddonButtons.svelte | 18 ++++++++++++++++++ ts/editor/EditorToolbar.svelte | 4 ++-- ts/editor/legacy.scss | 3 +++ ts/sass/button_mixins.scss | 8 ++++++++ 9 files changed, 47 insertions(+), 36 deletions(-) delete mode 100644 ts/components/Raw.svelte create mode 100644 ts/editor/AddonButtons.svelte diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 62bf0b9a3..b3d7e22a9 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -145,7 +145,7 @@ class Editor: gui_hooks.editor_did_init_left_buttons(lefttopbtns, self) lefttopbtns_defs = [ - f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.addButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));" + f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));" for button in lefttopbtns ] lefttopbtns_js = "\n".join(lefttopbtns_defs) @@ -155,21 +155,21 @@ class Editor: # legacy filter righttopbtns = runFilter("setupEditorButtons", righttopbtns, self) - righttopbtns_defs = "\n".join( - [f"editorToolbar.Raw({{ html: `{button}` }})," for button in righttopbtns] - ) + righttopbtns_defs = ", ".join([f"`{button}`" for button in righttopbtns]) righttopbtns_js = ( f""" -$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.buttonGroup({{ - id: "addons", - items: [ {righttopbtns_defs} ] -}}), -1)); +$editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{ + component: editorToolbar.AddonButtons, + id: "addons", + props: {{ buttons: [ {righttopbtns_defs} ] }}, +}})); """ - if righttopbtns_defs + if len(righttopbtns) > 0 else "" ) - self.web.eval(f"{lefttopbtns_js}") + print(righttopbtns_js) + self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}") # Top buttons ###################################################################### diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte index 3342c90a9..49243ccec 100644 --- a/ts/components/ButtonToolbar.svelte +++ b/ts/components/ButtonToolbar.svelte @@ -38,10 +38,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html buttonToolbarRef ); - const insertGroup = (button: SvelteComponent, position: Identifier = 0) => - addComponent(button, (added, parent) => insert(added, parent, position)); - const appendGroup = (button: SvelteComponent, position: Identifier = -1) => - addComponent(button, (added, parent) => add(added, parent, position)); + const insertGroup = (group: SvelteComponent, position: Identifier = 0) => + addComponent(group, (added, parent) => insert(added, parent, position)); + const appendGroup = (group: SvelteComponent, position: Identifier = -1) => + addComponent(group, (added, parent) => add(added, parent, position)); const showGroup = (id: Identifier) => updateRegistration(({ detach }) => detach.set(false), id); diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte index 3a5a255e6..ff594339f 100644 --- a/ts/components/IconButton.svelte +++ b/ts/components/IconButton.svelte @@ -34,12 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html button { padding: 0; - - border-top-left-radius: var(--border-left-radius); - border-bottom-left-radius: var(--border-left-radius); - - border-top-right-radius: var(--border-right-radius); - border-bottom-right-radius: var(--border-right-radius); + @include button.btn-border-radius; } @include button.btn-day; diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte index 9af9bcf1e..0285676a5 100644 --- a/ts/components/LabelButton.svelte +++ b/ts/components/LabelButton.svelte @@ -37,11 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html width: auto; height: var(--toolbar-size); - border-top-left-radius: var(--border-left-radius); - border-bottom-left-radius: var(--border-left-radius); - - border-top-right-radius: var(--border-right-radius); - border-bottom-right-radius: var(--border-right-radius); + @include button.btn-border-radius; } @include button.btn-day; diff --git a/ts/components/Raw.svelte b/ts/components/Raw.svelte deleted file mode 100644 index 54908eb3e..000000000 --- a/ts/components/Raw.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - -{@html html} diff --git a/ts/editor/AddonButtons.svelte b/ts/editor/AddonButtons.svelte new file mode 100644 index 000000000..337d4a6d0 --- /dev/null +++ b/ts/editor/AddonButtons.svelte @@ -0,0 +1,18 @@ + + + + + {#each buttons as button} + + {@html button} + + {/each} + diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte index 434d1ba36..d52bd55a5 100644 --- a/ts/editor/EditorToolbar.svelte +++ b/ts/editor/EditorToolbar.svelte @@ -28,16 +28,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } /* Export components */ + import AddonButtons from "./AddonButtons.svelte"; import PreviewButton from "./PreviewButton.svelte"; import LabelButton from "components/LabelButton.svelte"; import IconButton from "components/IconButton.svelte"; - import Raw from "components/Raw.svelte"; export const editorToolbar = { + AddonButtons, PreviewButton, LabelButton, IconButton, - Raw, }; diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index 767ca7677..5a39351b1 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -1,5 +1,8 @@ +@use "ts/sass/button_mixins" as button; + .linkb { display: inline-block; + @include button.btn-border-radius; } .topbut { diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss index a7ee0f45e..4720df764 100644 --- a/ts/sass/button_mixins.scss +++ b/ts/sass/button_mixins.scss @@ -1,6 +1,14 @@ @import "ts/sass/bootstrap/functions"; @import "ts/sass/bootstrap/variables"; +@mixin btn-border-radius { + border-top-left-radius: var(--border-left-radius); + border-bottom-left-radius: var(--border-left-radius); + + border-top-right-radius: var(--border-right-radius); + border-bottom-right-radius: var(--border-right-radius); +} + $btn-base-color-day: white; @mixin btn-day-base {