Port Focus tags shortcut to webview

This commit is contained in:
Henrik Giesel 2021-06-24 16:44:08 +02:00
parent f3df0fe305
commit f056851c1e
15 changed files with 68 additions and 42 deletions

View file

@ -300,9 +300,7 @@ $editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{
def setupShortcuts(self) -> None:
# if a third element is provided, enable shortcut even when no field selected
cuts: List[Tuple] = [
("Ctrl+Shift+T", self.onFocusTags, True),
]
cuts: List[Tuple] = []
gui_hooks.editor_did_init_shortcuts(cuts, self)
for row in cuts:
if len(row) == 2:

View file

@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts">
import * as tr from "lib/i18n";
import type { ChangeNotetypeState } from "./lib";
import { withButton } from "components/helpers";
import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@ -29,9 +30,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
theme="primary"
on:click={() => save()}
tooltip={shortcutLabel}
on:mount={(event) => createShortcut(event.detail.button)}
>{tr.actionsSave()}</LabelButton
>
on:mount={withButton(createShortcut)}
>{tr.actionsSave()}</LabelButton>
</WithShortcut>
</ButtonGroupItem>
</ButtonGroup>

View file

@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let className = "";
export { className as class };
export let tooltip: string | undefined;
const dispatch = createEventDispatcher();
@ -23,6 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<span
bind:this={spanRef}
title={tooltip}
class={`badge ${className}`}
class:dropdown-toggle={dropdownProps.dropdown}
{...dropdownProps}

View file

@ -12,9 +12,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let deregister: () => void;
function createShortcut(mounted: HTMLElement): void {
function createShortcut(element: HTMLElement): void {
deregister = registerShortcut((event: KeyboardEvent) => {
mounted.dispatchEvent(new MouseEvent("click", event));
element.dispatchEvent(new MouseEvent("click", event));
event.preventDefault();
}, shortcut);
}

View file

@ -14,3 +14,15 @@ export function mergeTooltipAndShortcut(
}
return buf;
}
export const withButton =
(f: (button: HTMLButtonElement) => void) =>
({ detail }: CustomEvent): void => {
f(detail.button);
};
export const withSpan =
(f: (span: HTMLSpanElement) => void) =>
({ detail }: CustomEvent): void => {
f(detail.span);
};

View file

@ -7,6 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { createEventDispatcher } from "svelte";
import type { DeckOptionsState } from "./lib";
import type Dropdown from "bootstrap/js/dist/dropdown";
import { withButton } from "components/helpers";
import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@ -65,7 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
theme="primary"
on:click={() => save(false)}
tooltip={shortcutLabel}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>{tr.deckConfigSaveButton()}</LabelButton
>
</WithShortcut>

View file

@ -3,18 +3,28 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import WithShortcut from "components/WithShortcut.svelte";
import Badge from "components/Badge.svelte";
import { withSpan } from "components/helpers";
import { appendInParentheses } from "./helpers";
import { tagIcon, addTagIcon } from "./icons";
let theTagIcon = tagIcon;
const tooltip = "Add tag";
</script>
<Badge
class="add-icon d-flex me-1"
on:click
on:mouseenter={() => (theTagIcon = addTagIcon)}
on:mouseleave={() => (theTagIcon = tagIcon)}>{@html theTagIcon}</Badge
>
<WithShortcut shortcut="Control+Shift+T" let:createShortcut let:shortcutLabel>
<Badge
class="add-icon d-flex me-1"
tooltip={appendInParentheses(tooltip, shortcutLabel)}
on:click
on:mouseenter={() => (theTagIcon = addTagIcon)}
on:mouseleave={() => (theTagIcon = tagIcon)}
on:mount={withSpan(createShortcut)}>{@html theTagIcon}</Badge
>
</WithShortcut>
<style lang="scss">
:global(.add-icon > svg) {

View file

@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import WithShortcut from "components/WithShortcut.svelte";
import OnlyEditable from "./OnlyEditable.svelte";
import { withButton } from "components/helpers";
import { ellipseIcon } from "./icons";
import { forEditorField } from ".";
import { wrapCurrent } from "./wrap";
@ -46,9 +47,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<OnlyEditable let:disabled>
<IconButton
tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
{disabled}
disabled={disabled}
on:click={onCloze}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{@html ellipseIcon}
</IconButton>

View file

@ -14,6 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import OnlyEditable from "./OnlyEditable.svelte";
import { bridgeCommand } from "lib/bridgecommand";
import { withButton } from "components/helpers";
import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
import { appendInParentheses } from "./helpers";
@ -45,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
)}
{disabled}
on:click={forecolorWrap}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{@html textColorIcon}
{@html colorHelperIcon}
@ -71,7 +72,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
forecolorWrap = wrapWithForecolor(setColor(event));
forecolorWrap();
}}
on:mount={(event) => createShortcut(event.detail.input)}
on:mount={withButton(createShortcut)}
/>
</IconButton>
</WithShortcut>

View file

@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import WithState from "components/WithState.svelte";
import OnlyEditable from "./OnlyEditable.svelte";
import { withButton } from "components/helpers";
import { appendInParentheses } from "./helpers";
export let key: string;
@ -48,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tooltip={appendInParentheses(tooltip, shortcutLabel)}
{disabled}
on:click={() => document.execCommand(key)}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
<slot />
</IconButton>
@ -69,7 +70,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
document.execCommand(key);
updateState(event);
}}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
<slot />
</IconButton>

View file

@ -5,6 +5,7 @@ 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 { withButton } from "components/helpers";
import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@ -29,7 +30,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<LabelButton
tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
on:click={() => bridgeCommand("cards")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.editingCards()}...
</LabelButton>

View file

@ -5,6 +5,7 @@ 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 { withButton } from "components/helpers";
import WithShortcut from "components/WithShortcut.svelte";
import LabelButton from "components/LabelButton.svelte";
@ -14,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<LabelButton
tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
on:click={() => bridgeCommand("preview")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.actionsPreview()}
</LabelButton>

View file

@ -32,7 +32,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
{#if active}
<TagInputEdit bind:name on:focusout={() => (active = false)} on:update={updateTag} />
<TagInputEdit
bind:name
on:focusout={() => (active = false)}
on:update={updateTag}
/>
{:else}
<span
class="d-inline-flex align-items-center tag text-nowrap bg-secondary rounded ps-2 pe-1 me-1"

View file

@ -31,11 +31,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* } */
</script>
<TagInput
bind:name
bind:input
on:keydown={onKeydown}
on:focusout
on:update
on:add
/>
<TagInput bind:name bind:input on:keydown={onKeydown} on:focusout on:update on:add />

View file

@ -19,6 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import ClozeButton from "./ClozeButton.svelte";
import { getCurrentField, appendInParentheses } from "./helpers";
import { withButton } from "components/helpers";
import { wrapCurrent } from "./wrap";
import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
@ -52,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
iconSize={70}
{disabled}
on:click={onAttachment}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{@html paperclipIcon}
</IconButton>
@ -71,7 +72,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
iconSize={70}
{disabled}
on:click={onRecord}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{@html micIcon}
</IconButton>
@ -90,7 +91,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<OnlyEditable let:disabled>
<IconButton
{disabled}
on:mount={(event) => createDropdown(event.detail.button)}
on:mount={withButton(createDropdown)}
>
{@html functionIcon}
</IconButton>
@ -104,7 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
<DropdownItem
on:click={() => wrapCurrent("\\(", "\\)")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.editingMathjaxInline()}
<span class="ps-1 float-end">{shortcutLabel}</span>
@ -118,7 +119,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
<DropdownItem
on:click={() => wrapCurrent("\\[", "\\]")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.editingMathjaxBlock()}
<span class="ps-1 float-end">{shortcutLabel}</span>
@ -132,7 +133,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
<DropdownItem
on:click={() => wrapCurrent("\\(\\ce{", "}\\)")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.editingMathjaxChemistry()}
<span class="ps-1 float-end">{shortcutLabel}</span>
@ -146,7 +147,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
<DropdownItem
on:click={() => wrapCurrent("[latex]", "[/latex]")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.editingLatex()}
<span class="ps-1 float-end">{shortcutLabel}</span>
@ -160,7 +161,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
<DropdownItem
on:click={() => wrapCurrent("[$]", "[/$]")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.editingLatexEquation()}
<span class="ps-1 float-end">{shortcutLabel}</span>
@ -174,7 +175,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
<DropdownItem
on:click={() => wrapCurrent("[$$]", "[/$$]")}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{tr.editingLatexMathEnv()}
<span class="ps-1 float-end">{shortcutLabel}</span>
@ -201,7 +202,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
active={inCodable}
disabled={!fieldFocused}
on:click={onHtmlEdit}
on:mount={(event) => createShortcut(event.detail.button)}
on:mount={withButton(createShortcut)}
>
{@html xmlIcon}
</IconButton>