langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable setting of PreviewButton and hiding of cloze button again

Browse Source
This commit is contained in:
Henrik Giesel 2021-05-06 16:10:26 +02:00
parent 862905c58a
commit e80f43e8fc
11 changed files with 74 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
qt/aqt/browser/browser.py
View File

@ -383,23 +383,11 @@ class Browser(QMainWindow):
editor._links["preview"] = lambda _editor: self.onTogglePreview()
editor.web.eval(
f"""
$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.labelButton({{
label: `{tr.actions_preview()}`,
tooltip: `{tr.browsing_preview_selected_card(val=shortcut(preview_shortcut))}`,
onClick: () => bridgeCommand("preview"),
disables: false,
}}), "notetype", -1));
"""
f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
)
def add_preview_shortcut(cuts: List[Tuple], editor: Editor) -> None:
cuts.append(("Ctrl+Shift+P", self.onTogglePreview, True))
gui_hooks.editor_did_init.append(add_preview_button)
gui_hooks.editor_did_init_shortcuts.append(add_preview_shortcut)
self.editor = aqt.editor.Editor(self.mw, self.form.fieldsArea, self)
gui_hooks.editor_did_init_shortcuts.remove(add_preview_shortcut)
gui_hooks.editor_did_init.remove(add_preview_button)
@ensure_editor_saved

13
qt/aqt/editor.py
View File

@ -145,7 +145,7 @@ class Editor:
gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
lefttopbtns_defs = [
f"$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.rawButton({{ html: `{button}` }}), 'notetype', -1));"
f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.addButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
for button in lefttopbtns
]
lefttopbtns_js = "\n".join(lefttopbtns_defs)
@ -156,10 +156,7 @@ class Editor:
righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
righttopbtns_defs = "\n".join(
[
f"editorToolbar.rawButton({{ html: `{button}` }}),"
for button in righttopbtns
]
[f"editorToolbar.Raw({{ html: `{button}` }})," for button in righttopbtns]
)
righttopbtns_js = (
f"""
@ -172,7 +169,7 @@ $editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.buttonGroup({{
else ""
)
self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
self.web.eval(f"{lefttopbtns_js}")
# Top buttons
######################################################################
@ -1268,11 +1265,11 @@ 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(
'$editorToolbar.then(({ showButton }) => showButton("template", "cloze")); '
'$editorToolbar.then(({ templateButtons }) => templateButtons.showButton("cloze")); '
)
else:
editor.web.eval(
'$editorToolbar.then(({ hideButton }) => hideButton("template", "cloze")); '
'$editorToolbar.then(({ templateButtons }) => templateButtons.hideButton("cloze")); '
)

24
ts/components/ButtonGroup.svelte
View File

@ -51,11 +51,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
return registration;
}
interface SvelteComponent {
id: string | undefined;
component: SvelteComponentTyped;
props: Record<string, unknown>;
}
const dynamicItems: ButtonRegistration[] = [];
let dynamic: SvelteComponentTyped[] = [];
let dynamic: SvelteComponent[] = [];
function addButton(
button: SvelteComponentTyped,
button: SvelteComponent,
add: (added: Element, parent: Element) => number
): void {
const registration = makeRegistration();
@ -86,10 +92,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
dynamic = [...dynamic, button];
}
const insertButton = (button: SvelteComponentTyped, id: Identifier = 0) =>
addButton(button, (added, parent) => insert(added, parent, id));
const appendButton = (button: SvelteComponentTyped, id: Identifier = -1) =>
addButton(button, (added, parent) => add(added, parent, id));
const insertButton = (button: SvelteComponent, position: Identifier = 0) =>
addButton(button, (added, parent) => insert(added, parent, position));
const appendButton = (button: SvelteComponent, position: Identifier = -1) =>
addButton(button, (added, parent) => add(added, parent, position));
function updateRegistration(
f: (registration: ButtonRegistration) => void,
@ -137,9 +143,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div bind:this={buttonGroupRef} {id} class={className} dir="ltr">
<slot />
{#each dynamic as component, i}
<ButtonGroupItem registration={dynamicItems[i]}>
<svelte:component this={component} />
{#each dynamic as item, i}
<ButtonGroupItem id={item.id} registration={dynamicItems[i]}>
<svelte:component this={item.component} {...item.props} />
</ButtonGroupItem>
{/each}
</div>

3
ts/components/ButtonGroupItem.svelte
View File

@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { getContext, hasContext } from "svelte";
import { buttonGroupKey } from "./contextKeys";
export let id: string | undefined = undefined;
export let registration: ButtonRegistration | undefined = undefined;
let detach_: boolean;
@ -53,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<!-- div in WithTheming is necessary to preserve item position -->
<WithTheming {style}>
<WithTheming {id} {style}>
<Detachable detach={detach_}>
<slot />
</Detachable>

5
ts/components/RawButton.svelte → ts/components/Raw.svelte
View File

@ -3,12 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import { onMount, createEventDispatcher } from "svelte";
export let html: string;
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: null }));
</script>
{@html html}

3
ts/components/WithTheming.svelte
View File

@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
export let id: string | undefined = undefined;
export let style: string;
</script>
@ -12,6 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</style>
<div {style}>
<div {id} {style}>
<slot />
</div>

4
ts/editor/ColorButtons.svelte
View File

@ -16,6 +16,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import "./color.css";
export let api = {};
const foregroundColorKeyword = "--foreground-color";
let color = "black";
@ -32,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</script>
<ButtonGroup id="color">
<ButtonGroup id="color" {api}>
<ButtonGroupItem>
<WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
<IconButton

21
ts/editor/EditorToolbar.svelte
View File

@ -28,10 +28,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
/* Export components */
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 = { LabelButton, IconButton };
export const editorToolbar = {
PreviewButton,
LabelButton,
IconButton,
Raw,
};
</script>
<script lang="typescript">
@ -48,6 +55,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import TemplateButtons from "./TemplateButtons.svelte";
export const notetypeButtons = {};
export const formatInlineButtons = {};
export const formatBlockButtons = {};
export const colorButtons = {};
export const templateButtons = {};
export let nightMode: boolean;
@ -65,9 +76,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<WithTheming {style}>
<StickyBar>
<NoteTypeButtons api={notetypeButtons} />
<FormatInlineButtons />
<FormatBlockButtons />
<ColorButtons />
<TemplateButtons />
<FormatInlineButtons api={formatInlineButtons} />
<FormatBlockButtons api={formatBlockButtons} />
<ColorButtons api={colorButtons} />
<TemplateButtons api={templateButtons} />
</StickyBar>
</WithTheming>

23
ts/editor/PreviewButton.svelte Normal file
View File

@ -0,0 +1,23 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import { bridgeCommand } from "lib/bridgecommand";
import * as tr from "lib/i18n";
import WithShortcut from "components/WithShortcut.svelte";
import LabelButton from "components/LabelButton.svelte";
</script>
<WithShortcut shortcut="Control+Shift+KeyP" let:createShortcut let:shortcutLabel>
<LabelButton
tooltip="{`${tr.browsingPreviewSelectedCard({
val: 'test',
})} (${shortcutLabel})`},"
disables={false}
on:click={() => bridgeCommand('preview')}
on:mount={createShortcut}>
{tr.actionsPreview()}
</LabelButton>
</WithShortcut>

6
ts/editor/TemplateButtons.svelte
View File

@ -19,6 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { appendInParentheses } from "./helpers";
import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
export let api = {};
function onAttachment(): void {
bridgeCommand("attach");
}
@ -32,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</script>
<ButtonGroup id="template">
<ButtonGroup id="template" {api}>
<ButtonGroupItem>
<WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
<IconButton
@ -55,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<ButtonGroupItem id="cloze">
<ClozeButton />
</ButtonGroupItem>

4
ts/editor/index.ts
View File

@ -166,7 +166,9 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
}
}
const i18n = setupI18n({ modules: [ModuleName.EDITING, ModuleName.KEYBOARD] });
const i18n = setupI18n({
modules: [ModuleName.EDITING, ModuleName.KEYBOARD, ModuleName.ACTIONS, ModuleName.BROWSING],
});
import type EditorToolbar from "./EditorToolbar.svelte";