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

Use ButtonGroupItem for all buttons in editor

Browse Source
This commit is contained in:
Henrik Giesel 2021-05-06 01:58:14 +02:00
parent bcb1b5d214
commit 0371405c23
8 changed files with 334 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ts/components/ColorPicker.svelte
View File

@ -6,21 +6,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { onMount, createEventDispatcher, getContext } from "svelte"; import { onMount, createEventDispatcher, getContext } from "svelte";
import { nightModeKey } from "./contextKeys"; import { nightModeKey } from "./contextKeys";
export let id: string; export let id: string | undefined = undefined;
export let className = ""; let className = "";
export let tooltip: string | undefined; export { className as class };
export let tooltip: string | undefined = undefined;
const nightMode = getContext(nightModeKey); const nightMode = getContext(nightModeKey);
let buttonRef: HTMLButtonElement;
let inputRef: HTMLInputElement;
function delegateToInput() { function delegateToInput() {
inputRef.click(); inputRef.click();
} }
let buttonRef: HTMLButtonElement;
let inputRef: HTMLInputElement;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef })); onMount(() => dispatch("mount", { button: buttonRef, input: inputRef }));
</script> </script>
<style lang="scss"> <style lang="scss">
@ -30,13 +32,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
@import "ts/sass/bootstrap/variables"; @import "ts/sass/bootstrap/variables";
button { button {
padding: 0;
width: calc(var(--toolbar-size) - 0px); width: calc(var(--toolbar-size) - 0px);
height: calc(var(--toolbar-size) - 0px); height: calc(var(--toolbar-size) - 0px);
padding: 4px; padding: 4px;
overflow: hidden; overflow: hidden;
border-top-left-radius: var(--border-left-radius);
border-bottom-left-radius: var(--border-left-radius);
border-top-right-radius: var(--border-right-radius);
border-bottom-right-radius: var(--border-right-radius);
} }
@include button.btn-day($with-disabled: false) using ($base) { @include button.btn-day($with-disabled: false) using ($base) {

21
ts/components/IconButton.svelte
View File

@ -7,13 +7,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { getContext, onMount, createEventDispatcher } from "svelte"; import { getContext, onMount, createEventDispatcher } from "svelte";
import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys"; import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
export let id: string; export let id: string | undefined = undefined;
let className = ""; let className = "";
export { className as class }; export { className as class };
export let tooltip: string | undefined; export let tooltip: string | undefined = undefined;
export let active = false; export let active = false;
export let disables = true; export let disables = true;
export let tabbable = false;
let buttonRef: HTMLButtonElement; let buttonRef: HTMLButtonElement;
@ -21,9 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: _disabled = disables && $disabled; $: _disabled = disables && $disabled;
const nightMode = getContext<boolean>(nightModeKey); const nightMode = getContext<boolean>(nightModeKey);
const dropdownProps = getContext(dropdownKey) ?? { dropdown: false };
const dropdown = getContext(dropdownKey);
const dropdownProps = dropdown?.getDropdownTriggerProps() ?? {};
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef })); onMount(() => dispatch("mount", { button: buttonRef }));
@ -34,6 +33,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
button { button {
padding: 0; padding: 0;
border-top-left-radius: var(--border-left-radius);
border-bottom-left-radius: var(--border-left-radius);
border-top-right-radius: var(--border-right-radius);
border-bottom-right-radius: var(--border-right-radius);
} }
@include button.btn-day; @include button.btn-day;
@ -66,13 +71,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{id} {id}
class={`btn ${className}`} class={`btn ${className}`}
class:active class:active
class:dropdown-toggle={dropdownProps.dropdown}
class:btn-day={!nightMode} class:btn-day={!nightMode}
class:btn-night={nightMode} class:btn-night={nightMode}
tabindex="-1"
title={tooltip} title={tooltip}
disabled={_disabled}
class:dropdown-toggle={Boolean(dropdown)}
{...dropdownProps} {...dropdownProps}
disabled={_disabled}
tabindex={tabbable ? 0 : -1}
on:click on:click
on:mousedown|preventDefault> on:mousedown|preventDefault>
<span class="p-1"><slot /></span> <span class="p-1"><slot /></span>

13
ts/components/LabelButton.svelte
View File

@ -5,28 +5,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="typescript"> <script lang="typescript">
import type { Readable } from "svelte/store"; import type { Readable } from "svelte/store";
import { onMount, createEventDispatcher, getContext } from "svelte"; import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey, nightModeKey } from "./contextKeys"; import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
export let id: string | undefined = undefined; export let id: string | undefined = undefined;
let className: string = ""; let className: string = "";
export { className as class }; export { className as class };
export let tooltip: string | undefined; export let tooltip: string | undefined;
export let dropdownToggle = false;
export let disables = true; export let disables = true;
export let tabbable = false; export let tabbable = false;
$: dropdownProps = dropdownToggle
? {
"data-bs-toggle": "dropdown",
"aria-expanded": "false",
}
: {};
const disabled = getContext<Readable<boolean>>(disabledKey); const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled; $: _disabled = disables && $disabled;
const nightMode = getContext<boolean>(nightModeKey); const nightMode = getContext<boolean>(nightModeKey);
const dropdownProps = getContext(dropdownKey) ?? {};
let buttonRef: HTMLButtonElement; let buttonRef: HTMLButtonElement;
@ -58,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:this={buttonRef} bind:this={buttonRef}
{id} {id}
class={`btn ${className}`} class={`btn ${className}`}
class:dropdown-toggle={dropdownToggle} class:dropdown-toggle={dropdownProps.dropdown}
class:btn-day={!nightMode} class:btn-day={!nightMode}
class:btn-night={nightMode} class:btn-night={nightMode}
title={tooltip} title={tooltip}

7
ts/components/WithDropdownMenu.svelte
View File

@ -9,10 +9,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { dropdownKey } from "./contextKeys"; import { dropdownKey } from "./contextKeys";
setContext(dropdownKey, { setContext(dropdownKey, {
getDropdownTriggerProps: () => ({ dropdown: true,
"data-bs-toggle": "dropdown", "data-bs-toggle": "dropdown",
"aria-expanded": "false", "aria-expanded": "false",
}),
}); });
const menuId = Math.random().toString(36).substring(2); const menuId = Math.random().toString(36).substring(2);

37
ts/editor/ColorButtons.svelte
View File

@ -5,9 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="typescript"> <script lang="typescript">
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte"; import IconButton from "components/IconButton.svelte";
import ColorPicker from "components/ColorPicker.svelte"; import ColorPicker from "components/ColorPicker.svelte";
import ButtonGroup from "components/ButtonGroup.svelte";
import WithShortcut from "components/WithShortcut.svelte"; import WithShortcut from "components/WithShortcut.svelte";
import { squareFillIcon } from "./icons"; import { squareFillIcon } from "./icons";
@ -31,20 +32,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<ButtonGroup id="color"> <ButtonGroup id="color">
<WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel> <ButtonGroupItem>
<IconButton <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
class="forecolor" <IconButton
tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`} class="forecolor"
on:click={wrapWithForecolor} tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
on:mount={createShortcut}> on:click={wrapWithForecolor}
{@html squareFillIcon} on:mount={createShortcut}>
</IconButton> {@html squareFillIcon}
</WithShortcut> </IconButton>
</WithShortcut>
</ButtonGroupItem>
<WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel> <ButtonGroupItem>
<ColorPicker <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`} <ColorPicker
on:change={setWithCurrentColor} tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
on:mount={createShortcut} /> on:change={setWithCurrentColor}
</WithShortcut> on:mount={createShortcut} />
</WithShortcut>
</ButtonGroupItem>
</ButtonGroup> </ButtonGroup>

221
ts/editor/FormatBlockButtons.svelte
View File

@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { EditingArea } from "./editingArea"; import type { EditingArea } from "./editingArea";
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import IconButton from "components/IconButton.svelte";
import ButtonGroup from "components/ButtonGroup.svelte"; import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte";
import ButtonDropdown from "components/ButtonDropdown.svelte"; import ButtonDropdown from "components/ButtonDropdown.svelte";
import WithState from "components/WithState.svelte"; import WithState from "components/WithState.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.svelte"; import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@ -43,118 +44,138 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<ButtonGroup id="blockFormatting" {api}> <ButtonGroup id="blockFormatting" {api}>
<WithState <ButtonGroupItem>
key="insertUnorderedList" <WithState
update={() => document.queryCommandState('insertUnorderedList')} key="insertUnorderedList"
let:state={active} update={() => document.queryCommandState('insertUnorderedList')}
let:updateState> let:state={active}
<IconButton let:updateState>
tooltip={tr.editingUnorderedList()} <IconButton
{active} tooltip={tr.editingUnorderedList()}
on:click={(event) => { {active}
document.execCommand('insertUnorderedList'); on:click={(event) => {
updateState(event); document.execCommand('insertUnorderedList');
}}> updateState(event);
{@html ulIcon} }}>
</IconButton> {@html ulIcon}
</WithState> </IconButton>
</WithState>
</ButtonGroupItem>
<WithState <ButtonGroupItem>
key="insertOrderedList" <WithState
update={() => document.queryCommandState('insertOrderedList')} key="insertOrderedList"
let:state={active} update={() => document.queryCommandState('insertOrderedList')}
let:updateState> let:state={active}
<IconButton let:updateState>
tooltip={tr.editingOrderedList()} <IconButton
{active} tooltip={tr.editingOrderedList()}
on:click={(event) => { {active}
document.execCommand('insertOrderedList'); on:click={(event) => {
updateState(event); document.execCommand('insertOrderedList');
}}> updateState(event);
{@html olIcon} }}>
</IconButton> {@html olIcon}
</WithState> </IconButton>
</WithState>
</ButtonGroupItem>
<WithDropdownMenu let:createDropdown let:menuId> <WithDropdownMenu let:createDropdown let:menuId>
<IconButton on:mount={createDropdown}> <ButtonGroupItem>
{@html listOptionsIcon} <IconButton on:mount={createDropdown}>
</IconButton> {@html listOptionsIcon}
</IconButton>
</ButtonGroupItem>
<ButtonDropdown id={menuId}> <ButtonDropdown id={menuId}>
<ButtonGroup id="justify" {api}> <ButtonGroup id="justify" {api}>
<WithState <ButtonGroupItem>
key="justifyLeft" <WithState
update={() => document.queryCommandState('justifyLeft')} key="justifyLeft"
let:state={active} update={() => document.queryCommandState('justifyLeft')}
let:updateState> let:state={active}
<IconButton let:updateState>
tooltip={tr.editingAlignLeft()} <IconButton
{active} tooltip={tr.editingAlignLeft()}
on:click={(event) => { {active}
document.execCommand('justifyLeft'); on:click={(event) => {
updateState(event); document.execCommand('justifyLeft');
}}> updateState(event);
{@html justifyLeftIcon} }}>
</IconButton> {@html justifyLeftIcon}
</WithState> </IconButton>
</WithState>
</ButtonGroupItem>
<WithState <ButtonGroupItem>
key="justifyCenter" <WithState
update={() => document.queryCommandState('justifyCenter')} key="justifyCenter"
let:state={active} update={() => document.queryCommandState('justifyCenter')}
let:updateState> let:state={active}
<IconButton let:updateState>
tooltip={tr.editingCenter()} <IconButton
{active} tooltip={tr.editingCenter()}
on:click={(event) => { {active}
document.execCommand('justifyCenter'); on:click={(event) => {
updateState(event); document.execCommand('justifyCenter');
}}> updateState(event);
{@html justifyCenterIcon} }}>
</IconButton> {@html justifyCenterIcon}
</WithState> </IconButton>
</WithState>
</ButtonGroupItem>
<WithState <ButtonGroupItem>
key="justifyRight" <WithState
update={() => document.queryCommandState('justifyRight')} key="justifyRight"
let:state={active} update={() => document.queryCommandState('justifyRight')}
let:updateState> let:state={active}
<IconButton let:updateState>
tooltip={tr.editingAlignRight()} <IconButton
{active} tooltip={tr.editingAlignRight()}
on:click={(event) => { {active}
document.execCommand('justifyRight'); on:click={(event) => {
updateState(event); document.execCommand('justifyRight');
}}> updateState(event);
{@html justifyRightIcon} }}>
</IconButton> {@html justifyRightIcon}
</WithState> </IconButton>
</WithState>
</ButtonGroupItem>
<WithState <ButtonGroupItem>
key="justifyFull" <WithState
update={() => document.queryCommandState('justifyFull')} key="justifyFull"
let:state={active} update={() => document.queryCommandState('justifyFull')}
let:updateState> let:state={active}
<IconButton let:updateState>
tooltip={tr.editingJustify()} <IconButton
{active} tooltip={tr.editingJustify()}
on:click={(event) => { {active}
document.execCommand('justifyFull'); on:click={(event) => {
updateState(event); document.execCommand('justifyFull');
}}> updateState(event);
{@html justifyFullIcon} }}>
</IconButton> {@html justifyFullIcon}
</WithState> </IconButton>
</WithState>
</ButtonGroupItem>
</ButtonGroup> </ButtonGroup>
<ButtonGroup id="indentation" {api}> <ButtonGroup id="indentation" {api}>
<IconButton on:click={outdentListItem} tooltip={tr.editingOutdent()}> <ButtonGroupItem>
{@html outdentIcon} <IconButton
</IconButton> on:click={outdentListItem}
tooltip={tr.editingOutdent()}>
{@html outdentIcon}
</IconButton>
</ButtonGroupItem>
<IconButton on:click={indentListItem} tooltip={tr.editingIndent()}> <ButtonGroupItem>
{@html indentIcon} <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
</IconButton> {@html indentIcon}
</IconButton>
</ButtonGroupItem>
</ButtonGroup> </ButtonGroup>
</ButtonDropdown> </ButtonDropdown>
</WithDropdownMenu> </WithDropdownMenu>

216
ts/editor/FormatInlineButtons.svelte
View File

@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import ButtonGroup from "components/ButtonGroup.svelte"; import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte"; import IconButton from "components/IconButton.svelte";
import WithState from "components/WithState.svelte"; import WithState from "components/WithState.svelte";
import WithShortcut from "components/WithShortcut.svelte"; import WithShortcut from "components/WithShortcut.svelte";
@ -23,109 +24,124 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<ButtonGroup id="notetype" {api}> <ButtonGroup id="notetype" {api}>
<WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel> <ButtonGroupItem>
<WithState <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
key="bold" <WithState
update={() => document.queryCommandState('bold')} key="bold"
let:state={active} update={() => document.queryCommandState('bold')}
let:updateState> let:state={active}
let:updateState>
<IconButton
tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
{active}
on:click={(event) => {
document.execCommand('bold');
updateState(event);
}}
on:mount={createShortcut}>
{@html boldIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
<WithState
key="italic"
update={() => document.queryCommandState('italic')}
let:state={active}
let:updateState>
<IconButton
tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
{active}
on:click={(event) => {
document.execCommand('italic');
updateState(event);
}}
on:mount={createShortcut}>
{@html italicIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
<WithState
key="underline"
update={() => document.queryCommandState('underline')}
let:state={active}
let:updateState>
<IconButton
tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
{active}
on:click={(event) => {
document.execCommand('underline');
updateState(event);
}}
on:mount={createShortcut}>
{@html underlineIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut
shortcut="Control+Shift+Equal"
let:createShortcut
let:shortcutLabel>
<WithState
key="superscript"
update={() => document.queryCommandState('superscript')}
let:state={active}
let:updateState>
<IconButton
tooltip={tr.editingSuperscript()}
{active}
on:click={(event) => {
document.execCommand('superscript');
updateState(event);
}}
on:mount={createShortcut}>
{@html superscriptIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
<WithState
key="subscript"
update={() => document.queryCommandState('subscript')}
let:state={active}
let:updateState>
<IconButton
tooltip={tr.editingSubscript()}
{active}
on:click={(event) => {
document.execCommand('subscript');
updateState(event);
}}
on:mount={createShortcut}>
{@html subscriptIcon}
</IconButton>
</WithState>
</WithShortcut>
</ButtonGroupItem>
<ButtonGroupItem>
<WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
<IconButton <IconButton
tooltip={`${tr.editingBoldText()} (${shortcutLabel})`} tooltip={tr.editingRemoveFormatting()}
{active}
on:click={(event) => { on:click={(event) => {
document.execCommand('bold'); document.execCommand('removeFormat');
updateState(event);
}} }}
on:mount={createShortcut}> on:mount={createShortcut}>
{@html boldIcon} {@html eraserIcon}
</IconButton> </IconButton>
</WithState> </WithShortcut>
</WithShortcut> </ButtonGroupItem>
<WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
<WithState
key="italic"
update={() => document.queryCommandState('italic')}
let:state={active}
let:updateState>
<IconButton
tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
{active}
on:click={(event) => {
document.execCommand('italic');
updateState(event);
}}
on:mount={createShortcut}>
{@html italicIcon}
</IconButton>
</WithState>
</WithShortcut>
<WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
<WithState
key="underline"
update={() => document.queryCommandState('underline')}
let:state={active}
let:updateState>
<IconButton
tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
{active}
on:click={(event) => {
document.execCommand('underline');
updateState(event);
}}
on:mount={createShortcut}>
{@html underlineIcon}
</IconButton>
</WithState>
</WithShortcut>
<WithShortcut shortcut="Control+Shift+Equal" let:createShortcut let:shortcutLabel>
<WithState
key="superscript"
update={() => document.queryCommandState('superscript')}
let:state={active}
let:updateState>
<IconButton
tooltip={tr.editingSuperscript()}
{active}
on:click={(event) => {
document.execCommand('superscript');
updateState(event);
}}
on:mount={createShortcut}>
{@html superscriptIcon}
</IconButton>
</WithState>
</WithShortcut>
<WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
<WithState
key="subscript"
update={() => document.queryCommandState('subscript')}
let:state={active}
let:updateState>
<IconButton
tooltip={tr.editingSubscript()}
{active}
on:click={(event) => {
document.execCommand('subscript');
updateState(event);
}}
on:mount={createShortcut}>
{@html subscriptIcon}
</IconButton>
</WithState>
</WithShortcut>
<WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
<IconButton
tooltip={tr.editingRemoveFormatting()}
on:click={(event) => {
document.execCommand('removeFormat');
}}
on:mount={createShortcut}>
{@html eraserIcon}
</IconButton>
</WithShortcut>
</ButtonGroup> </ButtonGroup>

69
ts/editor/TemplateButtons.svelte
View File

@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import { bridgeCommand } from "lib/bridgecommand"; import { bridgeCommand } from "lib/bridgecommand";
import IconButton from "components/IconButton.svelte";
import ButtonGroup from "components/ButtonGroup.svelte"; import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte";
import DropdownMenu from "components/DropdownMenu.svelte"; import DropdownMenu from "components/DropdownMenu.svelte";
import DropdownItem from "components/DropdownItem.svelte"; import DropdownItem from "components/DropdownItem.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.svelte"; import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@ -32,28 +33,37 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<ButtonGroup id="template"> <ButtonGroup id="template">
<WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel> <ButtonGroupItem>
<IconButton <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)} <IconButton
on:click={onAttachment}> tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
{@html paperclipIcon} on:click={onAttachment}
</IconButton> on:mount={createShortcut}>
</WithShortcut> {@html paperclipIcon}
</IconButton>
</WithShortcut>
</ButtonGroupItem>
<WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel> <ButtonGroupItem>
<IconButton <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)} <IconButton
on:click={onRecord}> tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
{@html micIcon} on:click={onRecord}>
</IconButton> {@html micIcon}
</WithShortcut> </IconButton>
</WithShortcut>
</ButtonGroupItem>
<ClozeButton /> <ButtonGroupItem>
<ClozeButton />
</ButtonGroupItem>
<WithDropdownMenu let:menuId let:createDropdown> <WithDropdownMenu let:menuId let:createDropdown>
<IconButton on:mount={createDropdown}> <ButtonGroupItem>
{@html functionIcon} <IconButton on:mount={createDropdown}>
</IconButton> {@html functionIcon}
</IconButton>
</ButtonGroupItem>
<DropdownMenu id={menuId}> <DropdownMenu id={menuId}>
<WithShortcut <WithShortcut
@ -112,12 +122,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</DropdownMenu> </DropdownMenu>
</WithDropdownMenu> </WithDropdownMenu>
<WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel> <ButtonGroupItem>
<IconButton <WithShortcut
tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)} shortcut="Control+Shift+KeyX"
on:click={onHtmlEdit} let:createShortcut
on:mount={createShortcut}> let:shortcutLabel>
{@html xmlIcon} <IconButton
</IconButton> tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
</WithShortcut> on:click={onHtmlEdit}
on:mount={createShortcut}>
{@html xmlIcon}
</IconButton>
</WithShortcut>
</ButtonGroupItem>
</ButtonGroup> </ButtonGroup>