GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 14:32:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Add .dropdown-menu class to DropdownMenu

Browse source
This commit is contained in:
Henrik Giesel 2021-04-28 23:31:45 +02:00
parent 9d9df2a04b
commit c1adebf2da
4 changed files with 75 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/components/DropdownMenu.svelte
View file

@ -18,6 +18,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</style> </style>
<div {id}> <div {id} class={`dropdown-menu`}>
<slot /> <slot />
</div> </div>

1
ts/editor/EditorToolbar.svelte
View file

@ -59,5 +59,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<FormatInlineButtons /> <FormatInlineButtons />
<FormatBlockButtons /> <FormatBlockButtons />
<ColorButtons /> <ColorButtons />
<TemplateButtons />
</StickyBar> </StickyBar>
</WithTheming> </WithTheming>

115
ts/editor/TemplateButtons.svelte
View file

@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import ClozeButton from "./ClozeButton.svelte"; import ClozeButton from "./ClozeButton.svelte";
import { wrap } from "./wrap"; import { wrap } from "./wrap";
import { appendInParentheses } from "./helpers";
import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons"; import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
function onAttachment(): void { function onAttachment(): void {
@ -28,72 +29,94 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function onHtmlEdit(): void { function onHtmlEdit(): void {
bridgeCommand("htmlEdit"); bridgeCommand("htmlEdit");
} }
const mathjaxMenuId = "mathjaxMenu";
</script> </script>
<ButtonGroup id="template"> <ButtonGroup id="template">
<WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel> <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
<IconButton <IconButton
tooltip={tr.editingAttachPicturesaudiovideo} tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
on:click={onAttachment}> on:click={onAttachment}>
{@html paperclipIcon} {@html paperclipIcon}
</IconButton> </IconButton>
</WithShortcut> </WithShortcut>
<WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel> <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
<IconButton tooltip={tr.editingRecordAudio} on:click={onRecord}> <IconButton
tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
on:click={onRecord}>
{@html micIcon} {@html micIcon}
</IconButton> </IconButton>
</WithShortcut> </WithShortcut>
<ClozeButton /> <ClozeButton />
<IconButton> <WithDropdownMenu let:menuId let:createDropdown>
{@html functionIcon} <IconButton on:mount={createDropdown}>
</IconButton> {@html functionIcon}
</IconButton>
<DropdownMenu id={menuId}>
<WithShortcut
shortcut="Control+KeyM, KeyM"
let:createShortcut
let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\(', '\\)')}>
{tr.editingMathjaxInline()}
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+KeyM, KeyE"
let:createShortcut
let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\[', '\\]')}>
{tr.editingMathjaxBlock()}
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+KeyM, KeyC"
let:createShortcut
let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
{tr.editingMathjaxChemistry()}
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+KeyT, KeyT"
let:createShortcut
let:shortcutLabel>
<DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
{tr.editingLatex()}
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+KeyT, KeyE"
let:createShortcut
let:shortcutLabel>
<DropdownItem on:click={() => wrap('[$]', '[/$]')}>
{tr.editingLatexEquation()}
</DropdownItem>
</WithShortcut>
<WithShortcut
shortcut="Control+KeyT, KeyM"
let:createShortcut
let:shortcutLabel>
<DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
{tr.editingLatexMathEnv()}
</DropdownItem>
</WithShortcut>
</DropdownMenu>
</WithDropdownMenu>
<WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel> <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
<IconButton tooltip={tr.editingHtmlEditor} on:click={onHtmlEdit}> <IconButton
tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
on:click={onHtmlEdit}>
{@html xmlIcon} {@html xmlIcon}
</IconButton> </IconButton>
</WithShortcut> </WithShortcut>
</ButtonGroup> </ButtonGroup>
<DropdownMenu id={mathjaxMenuId}>
<WithShortcut shortcut="Control+KeyM, KeyM" let:createShortcut let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\(', '\\)')}>
{tr.editingMathjaxInline}
</DropdownItem>
</WithShortcut>
<WithShortcut shortcut="Control+KeyM, KeyE" let:createShortcut let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\[', '\\]')}>
{tr.editingMathjaxBlock}
</DropdownItem>
</WithShortcut>
<WithShortcut shortcut="Control+KeyM, KeyC" let:createShortcut let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
{tr.editingMathjaxChemistry}
</DropdownItem>
</WithShortcut>
<WithShortcut shortcut="Control+KeyT, KeyT" let:createShortcut let:shortcutLabel>
<DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
{tr.editingLatex}
</DropdownItem>
</WithShortcut>
<WithShortcut shortcut="Control+KeyT, KeyE" let:createShortcut let:shortcutLabel>
<DropdownItem on:click={() => wrap('[$]', '[/$]')}>
{tr.editingLatexEquation}
</DropdownItem>
</WithShortcut>
<WithShortcut shortcut="Control+KeyT, KeyM" let:createShortcut let:shortcutLabel>
<DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
{tr.editingLatexMathEnv}
</DropdownItem>
</WithShortcut>
</DropdownMenu>

4
ts/editor/helpers.ts
View file

@ -110,3 +110,7 @@ const isBlockElement = (
export const getListItem = getAnchorParent(isListItem); export const getListItem = getAnchorParent(isListItem);
export const getParagraph = getAnchorParent(isParagraph); export const getParagraph = getAnchorParent(isParagraph);
export const getBlockElement = getAnchorParent(isBlockElement); export const getBlockElement = getAnchorParent(isBlockElement);
export function appendInParentheses(text: string, appendix: string): string {
return `${text} (${appendix})`;
}