From 920b740c8fd1e857413ae310a0314d2a0ca32ab5 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 9 Apr 2021 20:55:49 +0200 Subject: [PATCH] Add RawButton and hook old python hooks up to it --- qt/aqt/editor.py | 142 +++++++++---------------- ts/editor-toolbar/BUILD.bazel | 7 ++ ts/editor-toolbar/EditorToolbar.svelte | 1 + ts/editor-toolbar/RawButton.svelte | 10 ++ ts/editor-toolbar/identifiable.ts | 3 - ts/editor-toolbar/index.ts | 1 + ts/editor-toolbar/legacy.scss | 10 ++ 7 files changed, 77 insertions(+), 97 deletions(-) create mode 100644 ts/editor-toolbar/RawButton.svelte create mode 100644 ts/editor-toolbar/legacy.scss diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 5e9b3c833..97b416c1b 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -135,96 +135,6 @@ class Editor: self.web.set_bridge_command(self.onBridgeCmd, self) self.outerLayout.addWidget(self.web, 1) - lefttopbtns: List[str] = [ - self._addButton( - None, - "fields", - tr.editing_customize_fields(), - f"{tr.editing_fields()}...", - disables=False, - rightside=False, - ), - self._addButton( - None, - "cards", - tr.editing_customize_card_templates_ctrlandl(), - f"{tr.editing_cards()}...", - disables=False, - rightside=False, - ), - ] - - gui_hooks.editor_did_init_left_buttons(lefttopbtns, self) - - righttopbtns: List[str] = [ - self._addButton( - "text_bold", "bold", tr.editing_bold_text_ctrlandb(), id="bold" - ), - self._addButton( - "text_italic", - "italic", - tr.editing_italic_text_ctrlandi(), - id="italic", - ), - self._addButton( - "text_under", - "underline", - tr.editing_underline_text_ctrlandu(), - id="underline", - ), - self._addButton( - "text_super", - "super", - tr.editing_superscript_ctrlandand(), - id="superscript", - ), - self._addButton( - "text_sub", "sub", tr.editing_subscript_ctrland(), id="subscript" - ), - self._addButton( - "text_clear", "clear", tr.editing_remove_formatting_ctrlandr() - ), - self._addButton( - None, - "colour", - tr.editing_set_foreground_colour_f7(), - """ - -""", - ), - self._addButton( - None, - "changeCol", - tr.editing_change_colour_f8(), - """ - -""", - ), - self._addButton( - "text_cloze", "cloze", tr.editing_cloze_deletion_ctrlandshiftandc() - ), - self._addButton( - "paperclip", "attach", tr.editing_attach_picturesaudiovideo_f3() - ), - self._addButton("media-record", "record", tr.editing_record_audio_f5()), - self._addButton("more", "more"), - ] - - gui_hooks.editor_did_init_buttons(righttopbtns, self) - # legacy filter - righttopbtns = runFilter("setupEditorButtons", righttopbtns, self) - - topbuts = """ -
- %(leftbts)s -
-
- %(rightbts)s -
- """ % dict( - leftbts="".join(lefttopbtns), - rightbts="".join(righttopbtns), - ) bgcol = self.mw.app.palette().window().color().name() # type: ignore # then load page self.web.stdHtml( @@ -242,7 +152,45 @@ class Editor: context=self, default_css=False, ) - self.web.eval("preventButtonFocus();") + + lefttopbtns: List[str] = [] + gui_hooks.editor_did_init_left_buttons(lefttopbtns, self) + + lefttopbtns_defs = [ + f"$editorToolbar.addButton({{ component: editorToolbar.RawButton, html: `{button}` }}, 'notetype');" + for button in lefttopbtns + ] + lefttopbtns_js = "\n".join(lefttopbtns_defs) + + righttopbtns: List[str] = [] + gui_hooks.editor_did_init_buttons(righttopbtns, self) + # legacy filter + righttopbtns = runFilter("setupEditorButtons", righttopbtns, self) + + righttopbtns_defs = "\n".join( + [ + f"{{ component: editorToolbar.RawButton, html: `{button}` }}," + for button in righttopbtns + ] + ) + righttopbtns_js = ( + f""" +$editorToolbar.addButtonGroup({{ + id: "addons", + buttons: [ {righttopbtns_defs} ] +}}); +""" + if righttopbtns_defs + else "" + ) + + self.web.eval( + f""" +$editorToolbar = document.getElementById("editorToolbar"); +{lefttopbtns_js} +{righttopbtns_js} +""" + ) # Top buttons ###################################################################### @@ -354,6 +302,7 @@ class Editor: type="button" title="{tip}" onclick="pycmd('{cmd}');{togglesc}return false;" + onmousedown="window.event.preventDefault();" > {imgelm} {labelelm} @@ -802,7 +751,8 @@ class Editor: self._wrapWithColour(self.fcolour) def _updateForegroundButton(self) -> None: - self.web.eval(f"setFGButton('{self.fcolour}')") + # self.web.eval(f"setFGButton('{self.fcolour}')") + pass def onColourChanged(self) -> None: self._updateForegroundButton() @@ -1355,9 +1305,13 @@ 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( + 'document.getElementById("editorToolbar").showButton("template", "cloze"); ' + ) else: - editor.web.eval('document.getElementById("editorToolbar").hideButton("template", "cloze"); ') + editor.web.eval( + 'document.getElementById("editorToolbar").hideButton("template", "cloze"); ' + ) gui_hooks.editor_did_load_note.append(set_cloze_button) diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel index e0c48b00e..5f5f6afc2 100644 --- a/ts/editor-toolbar/BUILD.bazel +++ b/ts/editor-toolbar/BUILD.bazel @@ -21,6 +21,12 @@ sass_binary( visibility = ["//visibility:public"], ) +sass_binary( + name = "legacy_css", + src = "legacy.scss", + visibility = ["//visibility:public"], +) + ts_library( name = "index", srcs = ["index.ts"], @@ -98,6 +104,7 @@ esbuild( "bootstrap-icons", "mdi-icons", ":color_css", + ":legacy_css", ] + svelte_names, ) diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte index 49e73d52f..fef9bedd7 100644 --- a/ts/editor-toolbar/EditorToolbar.svelte +++ b/ts/editor-toolbar/EditorToolbar.svelte @@ -1,4 +1,5 @@ + +{@html html} diff --git a/ts/editor-toolbar/identifiable.ts b/ts/editor-toolbar/identifiable.ts index b57f8a3cd..93f054c2e 100644 --- a/ts/editor-toolbar/identifiable.ts +++ b/ts/editor-toolbar/identifiable.ts @@ -21,7 +21,6 @@ export function search( idOrIndex: string | number ): T | null { const index = normalize(values, idOrIndex); - return index >= 0 ? values[index] : null; } @@ -31,7 +30,6 @@ export function insert( idOrIndex: string | number ): T[] { const index = normalize(values, idOrIndex); - return index >= 0 ? [...values.slice(0, index), value, ...values.slice(index)] : values; @@ -43,7 +41,6 @@ export function add( idOrIndex: string | number ): T[] { const index = normalize(values, idOrIndex); - return index >= 0 ? [...values.slice(0, index + 1), value, ...values.slice(index + 1)] : values; diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index e3b40d1b3..d5efc0fd9 100644 --- a/ts/editor-toolbar/index.ts +++ b/ts/editor-toolbar/index.ts @@ -172,6 +172,7 @@ export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.sve export { enableButtons, disableButtons } from "./EditorToolbar.svelte"; /* Exports for add-ons */ +export { default as RawButton } from "./RawButton.svelte"; export { default as LabelButton } from "./LabelButton.svelte"; export { default as IconButton } from "./IconButton.svelte"; export { default as CommandIconButton } from "./CommandIconButton.svelte"; diff --git a/ts/editor-toolbar/legacy.scss b/ts/editor-toolbar/legacy.scss new file mode 100644 index 000000000..767ca7677 --- /dev/null +++ b/ts/editor-toolbar/legacy.scss @@ -0,0 +1,10 @@ +.linkb { + display: inline-block; +} + +.topbut { + display: inline-block; + vertical-align: middle; + width: calc(var(--toolbar-size) - 12px); + height: calc(var(--toolbar-size) - 12px); +}