From 4379f1e84fcc82b59e18c98dc6abf2b41444968b Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 23 Apr 2021 16:43:36 +0200 Subject: [PATCH 01/16] Make dynamicComponents usable for addons, rather than the components directly rawButton({ html: ... }) instead of { component: RawButton, html: ... } --- qt/aqt/editor.py | 12 +++---- ts/editor-toolbar/SelectButton.d.ts | 18 +++++++++++ ts/editor-toolbar/SelectButton.svelte | 7 +--- ts/editor-toolbar/dynamicComponents.ts | 9 ++++++ ts/editor/addons.ts | 45 +++++++++++++++----------- ts/sass/base.scss | 3 +- 6 files changed, 60 insertions(+), 34 deletions(-) create mode 100644 ts/editor-toolbar/SelectButton.d.ts diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 808cdf86c..0b0f9ce07 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -155,7 +155,7 @@ class Editor: gui_hooks.editor_did_init_left_buttons(lefttopbtns, self) lefttopbtns_defs = [ - f"$editorToolbar.addButton({{ component: editorToolbar.RawButton, html: `{button}` }}, 'notetype');" + f"$editorToolbar.addButton(editorToolbar.rawButton({{ html: `{button}` }}), 'notetype');" for button in lefttopbtns ] lefttopbtns_js = "\n".join(lefttopbtns_defs) @@ -167,7 +167,7 @@ class Editor: righttopbtns_defs = "\n".join( [ - f"{{ component: editorToolbar.RawButton, html: `{button}` }}," + f"editorToolbar.rawButton({{ html: `{button}` }})," for button in righttopbtns ] ) @@ -1277,13 +1277,9 @@ gui_hooks.editor_will_munge_html.append(reverse_url_quoting) def set_cloze_button(editor: Editor) -> None: if editor.note.model()["type"] == MODEL_CLOZE: - editor.web.eval( - 'document.getElementById("editorToolbar").showButton("template", "cloze"); ' - ) + editor.web.eval('$editorToolbar.showButton("template", "cloze"); ') else: - editor.web.eval( - 'document.getElementById("editorToolbar").hideButton("template", "cloze"); ' - ) + editor.web.eval('$editorToolbar.hideButton("template", "cloze"); ') gui_hooks.editor_did_load_note.append(set_cloze_button) diff --git a/ts/editor-toolbar/SelectButton.d.ts b/ts/editor-toolbar/SelectButton.d.ts new file mode 100644 index 000000000..854f7eb97 --- /dev/null +++ b/ts/editor-toolbar/SelectButton.d.ts @@ -0,0 +1,18 @@ +// Copyright: Ankitects Pty Ltd and contributors +// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +import type { ToolbarItem } from "./types"; + +export interface Option { + label: string; + value: string; + selected: boolean; +} + +export interface SelectButtonProps { + id: string; + className?: string; + tooltip?: string; + buttons: ToolbarItem[]; + disables: boolean; + options: Option[]; +} diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte index 559ab8cfc..81afa44d8 100644 --- a/ts/editor-toolbar/SelectButton.svelte +++ b/ts/editor-toolbar/SelectButton.svelte @@ -4,16 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> + + + + diff --git a/ts/editor-toolbar/dynamicComponents.ts b/ts/editor-toolbar/dynamicComponents.ts index a3c2238a0..7fc623e8c 100644 --- a/ts/editor-toolbar/dynamicComponents.ts +++ b/ts/editor-toolbar/dynamicComponents.ts @@ -26,6 +26,9 @@ import type { WithDropdownMenuProps } from "./WithDropdownMenu"; import WithShortcut from "./WithShortcut.svelte"; import type { WithShortcutProps } from "./WithShortcut"; +import WithLabel from "./WithLabel.svelte"; +import type { WithLabelProps } from "./WithLabel"; + import { dynamicComponent } from "sveltelib/dynamicComponent"; export const rawButton = dynamicComponent( @@ -71,3 +74,5 @@ export const withDropdownMenu = dynamicComponent< export const withShortcut = dynamicComponent( WithShortcut ); + +export const withLabel = dynamicComponent(WithLabel); From 7563a3c929af7bdb88429368464a70cd9feb52c3 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 23 Apr 2021 17:34:42 +0200 Subject: [PATCH 03/16] Use rawButton in browser.py --- qt/aqt/browser/browser.py | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py index b122e5240..7624c6d44 100644 --- a/qt/aqt/browser/browser.py +++ b/qt/aqt/browser/browser.py @@ -386,13 +386,12 @@ class Browser(QMainWindow): editor._links["preview"] = lambda _editor: self.onTogglePreview() editor.web.eval( f""" -$editorToolbar.addButton({{ - component: editorToolbar.LabelButton, +$editorToolbar.addButton(editorToolbar.labelButton({{ label: `{tr.actions_preview()}`, tooltip: `{tr.browsing_preview_selected_card(val=shortcut(preview_shortcut))}`, onClick: () => bridgeCommand("preview"), disables: false, -}}, "notetype"); +}}), "notetype"); """ ) From 7cd779063fc5a66ad1aa0041923371167d87f76d Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 23 Apr 2021 18:21:03 +0200 Subject: [PATCH 04/16] Fix regression from 70c3b51b0b3c89ebd4f615ab117e Negative indices were not treated correctly (as offset from end) --- ts/editor-toolbar/identifiable.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/ts/editor-toolbar/identifiable.ts b/ts/editor-toolbar/identifiable.ts index 154895bfc..334222022 100644 --- a/ts/editor-toolbar/identifiable.ts +++ b/ts/editor-toolbar/identifiable.ts @@ -8,11 +8,19 @@ function normalize( values: T[], idOrIndex: string | number ): number { + let normalizedIndex: number; + if (typeof idOrIndex === "string") { - return values.findIndex((value) => value.id === idOrIndex); - } else { - return idOrIndex >= values.length ? -1 : idOrIndex; + normalizedIndex = values.findIndex((value) => value.id === idOrIndex); } + else if (idOrIndex < 0) { + normalizedIndex = values.length + idOrIndex; + } + else { + normalizedIndex = idOrIndex; + } + + return normalizedIndex >= values.length ? -1 : normalizedIndex; } export function search( From bda99ee0f113773dd44bc3c5f5d2f4c53d28fdea Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 23 Apr 2021 18:53:52 +0200 Subject: [PATCH 05/16] Add IterableToolbarItem interface for easier typing --- qt/aqt/editor.py | 2 +- ts/editor-toolbar/ButtonDropdown.d.ts | 2 +- ts/editor-toolbar/ButtonDropdown.svelte | 4 ++-- ts/editor-toolbar/ButtonGroup.d.ts | 2 +- ts/editor-toolbar/ButtonGroup.svelte | 4 ++-- ts/editor-toolbar/DropdownMenu.d.ts | 2 +- ts/editor-toolbar/DropdownMenu.svelte | 4 ++-- ts/editor-toolbar/EditorToolbar.svelte | 8 +++----- ts/editor-toolbar/SelectButton.d.ts | 3 --- ts/editor-toolbar/identifiable.ts | 6 ++---- ts/editor-toolbar/index.ts | 10 +++++----- ts/editor-toolbar/{types.d.ts => types.ts} | 11 +++++++++-- ts/editor/cloze.ts | 7 ++----- ts/editor/color.ts | 9 +++------ ts/editor/formatBlock.ts | 21 +++++++-------------- ts/editor/formatInline.ts | 9 +++------ ts/editor/notetype.ts | 9 +++------ ts/editor/template.ts | 16 +++++----------- ts/editor/toolbar.ts | 10 +++------- 19 files changed, 55 insertions(+), 84 deletions(-) rename ts/editor-toolbar/{types.d.ts => types.ts} (50%) diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 0b0f9ce07..9ab134b6b 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -175,7 +175,7 @@ class Editor: f""" $editorToolbar.addButtonGroup({{ id: "addons", - buttons: [ {righttopbtns_defs} ] + items: [ {righttopbtns_defs} ] }}); """ if righttopbtns_defs diff --git a/ts/editor-toolbar/ButtonDropdown.d.ts b/ts/editor-toolbar/ButtonDropdown.d.ts index ad869013e..2b3cdb70f 100644 --- a/ts/editor-toolbar/ButtonDropdown.d.ts +++ b/ts/editor-toolbar/ButtonDropdown.d.ts @@ -5,5 +5,5 @@ import type { ToolbarItem } from "./types"; export interface ButtonDropdownProps { id: string; className?: string; - buttons: ToolbarItem[]; + items: ToolbarItem[]; } diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte index 0db3df397..344757c59 100644 --- a/ts/editor-toolbar/ButtonDropdown.svelte +++ b/ts/editor-toolbar/ButtonDropdown.svelte @@ -13,7 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html return `dropdown-menu btn-dropdown-menu py-1 mb-0 ${className}`; } - export let buttons: ToolbarItem[]; + export let items: ToolbarItem[]; - + diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts index e4a2d7ce5..cbf4376ff 100644 --- a/ts/editor-toolbar/ButtonGroup.d.ts +++ b/ts/editor-toolbar/ButtonGroup.d.ts @@ -5,5 +5,5 @@ import type { ToolbarItem } from "./types"; export interface ButtonGroupProps { id: string; className?: string; - buttons: ToolbarItem[]; + items: ToolbarItem[]; } diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte index fc8130b7e..b1d47e36a 100644 --- a/ts/editor-toolbar/ButtonGroup.svelte +++ b/ts/editor-toolbar/ButtonGroup.svelte @@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let id: string | undefined = undefined; export let className = ""; - export let buttons: ToolbarItem[]; + export let items: ToolbarItem[]; function filterHidden({ hidden = false, ...props }) { return props; @@ -73,7 +73,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    - {#each buttons as button} + {#each items as button} {#if !button.hidden}
  • diff --git a/ts/editor-toolbar/DropdownMenu.d.ts b/ts/editor-toolbar/DropdownMenu.d.ts index 9e43bc953..7d6b6fac9 100644 --- a/ts/editor-toolbar/DropdownMenu.d.ts +++ b/ts/editor-toolbar/DropdownMenu.d.ts @@ -4,5 +4,5 @@ import type { ToolbarItem } from "./types"; export interface DropdownMenuProps { id: string; - menuItems: ToolbarItem[]; + items: ToolbarItem[]; } diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte index 546b2d78f..4fdfcadce 100644 --- a/ts/editor-toolbar/DropdownMenu.svelte +++ b/ts/editor-toolbar/DropdownMenu.svelte @@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { nightModeKey } from "./contextKeys"; export let id: string; - export let menuItems: DynamicSvelteComponent[]; + export let items: ToolbarItem[]; const nightMode = getContext(nightModeKey); @@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
      - {#each menuItems as menuItem} + {#each items as menuItem}
      • diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte index 676fb260d..5bfc09b2d 100644 --- a/ts/editor-toolbar/EditorToolbar.svelte +++ b/ts/editor-toolbar/EditorToolbar.svelte @@ -19,16 +19,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html + + -