Use ButtonGroupItem for all buttons in editor

2021-05-06 01:58:14 +02:00 · 2021-05-06 01:58:14 +02:00 · 0371405c23
commit 0371405c23
parent bcb1b5d214
8 changed files with 334 additions and 274 deletions
--- a/ts/components/ColorPicker.svelte
+++ b/ts/components/ColorPicker.svelte
@ -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 { nightModeKey } from "./contextKeys";

-    export let id: string;
-    export let className = "";
-    export let tooltip: string | undefined;
+    export let id: string | undefined = undefined;
+    let className = "";
+    export { className as class };
+
+    export let tooltip: string | undefined = undefined;

    const nightMode = getContext(nightModeKey);

-    let buttonRef: HTMLButtonElement;
-    let inputRef: HTMLInputElement;
-
    function delegateToInput() {
        inputRef.click();
    }

+    let buttonRef: HTMLButtonElement;
+    let inputRef: HTMLInputElement;
+
    const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef }));
+    onMount(() => dispatch("mount", { button: buttonRef, input: inputRef }));
 </script>

 <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";

    button {
-        padding: 0;
-
        width: calc(var(--toolbar-size) - 0px);
        height: calc(var(--toolbar-size) - 0px);

        padding: 4px;
        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) {
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@ -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 { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";

-    export let id: string;
+    export let id: string | undefined = undefined;
    let className = "";
    export { className as class };

-    export let tooltip: string | undefined;
+    export let tooltip: string | undefined = undefined;
    export let active = false;
    export let disables = true;
+    export let tabbable = false;

    let buttonRef: HTMLButtonElement;

@ -21,9 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    $: _disabled = disables && $disabled;

    const nightMode = getContext<boolean>(nightModeKey);
-
-    const dropdown = getContext(dropdownKey);
-    const dropdownProps = dropdown?.getDropdownTriggerProps() ?? {};
+    const dropdownProps = getContext(dropdownKey) ?? { dropdown: false };

    const dispatch = createEventDispatcher();
    onMount(() => dispatch("mount", { button: buttonRef }));
@ -34,6 +33,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    button {
        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;
@ -66,13 +71,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    {id}
    class={`btn ${className}`}
    class:active
+    class:dropdown-toggle={dropdownProps.dropdown}
    class:btn-day={!nightMode}
    class:btn-night={nightMode}
-    tabindex="-1"
    title={tooltip}
-    disabled={_disabled}
-    class:dropdown-toggle={Boolean(dropdown)}
    {...dropdownProps}
+    disabled={_disabled}
+    tabindex={tabbable ? 0 : -1}
    on:click
    on:mousedown|preventDefault>
    <span class="p-1"><slot /></span>
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@ -5,28 +5,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
    import type { Readable } from "svelte/store";
    import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey, nightModeKey } from "./contextKeys";
+    import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";

    export let id: string | undefined = undefined;
    let className: string = "";
    export { className as class };

    export let tooltip: string | undefined;
-    export let dropdownToggle = false;
    export let disables = true;
    export let tabbable = false;

-    $: dropdownProps = dropdownToggle
-        ? {
-              "data-bs-toggle": "dropdown",
-              "aria-expanded": "false",
-          }
-        : {};
-
    const disabled = getContext<Readable<boolean>>(disabledKey);
    $: _disabled = disables && $disabled;

    const nightMode = getContext<boolean>(nightModeKey);
+    const dropdownProps = getContext(dropdownKey) ?? {};

    let buttonRef: HTMLButtonElement;

@ -58,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    bind:this={buttonRef}
    {id}
    class={`btn ${className}`}
-    class:dropdown-toggle={dropdownToggle}
+    class:dropdown-toggle={dropdownProps.dropdown}
    class:btn-day={!nightMode}
    class:btn-night={nightMode}
    title={tooltip}
--- a/ts/components/WithDropdownMenu.svelte
+++ b/ts/components/WithDropdownMenu.svelte
@ -9,10 +9,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import { dropdownKey } from "./contextKeys";

    setContext(dropdownKey, {
-        getDropdownTriggerProps: () => ({
+        dropdown: true,
        "data-bs-toggle": "dropdown",
        "aria-expanded": "false",
-        }),
    });

    const menuId = Math.random().toString(36).substring(2);
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@ -5,9 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
    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 ColorPicker from "components/ColorPicker.svelte";
-    import ButtonGroup from "components/ButtonGroup.svelte";
    import WithShortcut from "components/WithShortcut.svelte";

    import { squareFillIcon } from "./icons";
@ -31,6 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>

 <ButtonGroup id="color">
+    <ButtonGroupItem>
        <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
            <IconButton
                class="forecolor"
@ -40,11 +42,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                {@html squareFillIcon}
            </IconButton>
        </WithShortcut>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
            <ColorPicker
                tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
                on:change={setWithCurrentColor}
                on:mount={createShortcut} />
        </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import type { EditingArea } from "./editingArea";
    import * as tr from "lib/i18n";

-    import IconButton from "components/IconButton.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 WithState from "components/WithState.svelte";
    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@ -43,6 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>

 <ButtonGroup id="blockFormatting" {api}>
+    <ButtonGroupItem>
        <WithState
            key="insertUnorderedList"
            update={() => document.queryCommandState('insertUnorderedList')}
@ -58,7 +60,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                {@html ulIcon}
            </IconButton>
        </WithState>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <WithState
            key="insertOrderedList"
            update={() => document.queryCommandState('insertOrderedList')}
@ -74,14 +78,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                {@html olIcon}
            </IconButton>
        </WithState>
+    </ButtonGroupItem>

    <WithDropdownMenu let:createDropdown let:menuId>
+        <ButtonGroupItem>
            <IconButton on:mount={createDropdown}>
                {@html listOptionsIcon}
            </IconButton>
+        </ButtonGroupItem>

        <ButtonDropdown id={menuId}>
            <ButtonGroup id="justify" {api}>
+                <ButtonGroupItem>
                    <WithState
                        key="justifyLeft"
                        update={() => document.queryCommandState('justifyLeft')}
@ -97,7 +105,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                            {@html justifyLeftIcon}
                        </IconButton>
                    </WithState>
+                </ButtonGroupItem>

+                <ButtonGroupItem>
                    <WithState
                        key="justifyCenter"
                        update={() => document.queryCommandState('justifyCenter')}
@ -113,7 +123,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                            {@html justifyCenterIcon}
                        </IconButton>
                    </WithState>
+                </ButtonGroupItem>

+                <ButtonGroupItem>
                    <WithState
                        key="justifyRight"
                        update={() => document.queryCommandState('justifyRight')}
@ -129,7 +141,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                            {@html justifyRightIcon}
                        </IconButton>
                    </WithState>
+                </ButtonGroupItem>

+                <ButtonGroupItem>
                    <WithState
                        key="justifyFull"
                        update={() => document.queryCommandState('justifyFull')}
@ -145,16 +159,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                            {@html justifyFullIcon}
                        </IconButton>
                    </WithState>
+                </ButtonGroupItem>
            </ButtonGroup>

            <ButtonGroup id="indentation" {api}>
-                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent()}>
+                <ButtonGroupItem>
+                    <IconButton
+                        on:click={outdentListItem}
+                        tooltip={tr.editingOutdent()}>
                        {@html outdentIcon}
                    </IconButton>
+                </ButtonGroupItem>

+                <ButtonGroupItem>
                    <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
                        {@html indentIcon}
                    </IconButton>
+                </ButtonGroupItem>
            </ButtonGroup>
        </ButtonDropdown>
    </WithDropdownMenu>
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@ -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 ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
    import IconButton from "components/IconButton.svelte";
    import WithState from "components/WithState.svelte";
    import WithShortcut from "components/WithShortcut.svelte";
@ -23,6 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>

 <ButtonGroup id="notetype" {api}>
+    <ButtonGroupItem>
        <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
            <WithState
                key="bold"
@ -41,7 +43,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                </IconButton>
            </WithState>
        </WithShortcut>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
            <WithState
                key="italic"
@ -60,7 +64,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                </IconButton>
            </WithState>
        </WithShortcut>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
            <WithState
                key="underline"
@ -79,8 +85,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                </IconButton>
            </WithState>
        </WithShortcut>
+    </ButtonGroupItem>

-    <WithShortcut shortcut="Control+Shift+Equal" let:createShortcut let:shortcutLabel>
+    <ButtonGroupItem>
+        <WithShortcut
+            shortcut="Control+Shift+Equal"
+            let:createShortcut
+            let:shortcutLabel>
            <WithState
                key="superscript"
                update={() => document.queryCommandState('superscript')}
@ -98,7 +109,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                </IconButton>
            </WithState>
        </WithShortcut>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
            <WithState
                key="subscript"
@ -117,7 +130,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                </IconButton>
            </WithState>
        </WithShortcut>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
            <IconButton
                tooltip={tr.editingRemoveFormatting()}
@ -128,4 +143,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                {@html eraserIcon}
            </IconButton>
        </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@ -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 { bridgeCommand } from "lib/bridgecommand";

-    import IconButton from "components/IconButton.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 DropdownItem from "components/DropdownItem.svelte";
    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@ -32,14 +33,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>

 <ButtonGroup id="template">
+    <ButtonGroupItem>
        <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
            <IconButton
                tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
-            on:click={onAttachment}>
+                on:click={onAttachment}
+                on:mount={createShortcut}>
                {@html paperclipIcon}
            </IconButton>
        </WithShortcut>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
            <IconButton
                tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
@ -47,13 +52,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                {@html micIcon}
            </IconButton>
        </WithShortcut>
+    </ButtonGroupItem>

+    <ButtonGroupItem>
        <ClozeButton />
+    </ButtonGroupItem>

    <WithDropdownMenu let:menuId let:createDropdown>
+        <ButtonGroupItem>
            <IconButton on:mount={createDropdown}>
                {@html functionIcon}
            </IconButton>
+        </ButtonGroupItem>

        <DropdownMenu id={menuId}>
            <WithShortcut
@ -112,7 +122,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        </DropdownMenu>
    </WithDropdownMenu>

-    <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
+    <ButtonGroupItem>
+        <WithShortcut
+            shortcut="Control+Shift+KeyX"
+            let:createShortcut
+            let:shortcutLabel>
            <IconButton
                tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
                on:click={onHtmlEdit}
@ -120,4 +134,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                {@html xmlIcon}
            </IconButton>
        </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>