Implement new ColorPicker

ts/components/ColorPicker.svelte

@@ -3,72 +3,21 @@ 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, getContext } from "svelte";
+    import { onMount, createEventDispatcher } from "svelte";
-    import { nightModeKey } from "./contextKeys";
 
-    export let id: string | undefined = undefined;
-    let className = "";
-    export { className as class };
-
-    export let tooltip: string | undefined = undefined;
-
-    const nightMode = getContext(nightModeKey);
-
-    function delegateToInput() {
-        inputRef.click();
-    }
-
-    let buttonRef: HTMLButtonElement;
     let inputRef: HTMLInputElement;
 
     const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef, input: inputRef }));
+    onMount(() => dispatch("mount", { input: inputRef }));
 </script>
 
-<button
+<input tabindex="-1" bind:this={inputRef} type="color" on:change />
-    bind:this={buttonRef}
-    tabindex="-1"
-    {id}
-    class={`btn ${className}`}
-    class:btn-day={!nightMode}
-    class:btn-night={nightMode}
-    title={tooltip}
-    on:click={delegateToInput}
-    on:mousedown|preventDefault
->
-    <input tabindex="-1" bind:this={inputRef} type="color" on:change />
-</button>
 
 <style lang="scss">
-    @use "ts/sass/button_mixins" as button;
-
-    @import "ts/sass/bootstrap/functions";
-    @import "ts/sass/bootstrap/variables";
-
-    button {
-        width: calc(var(--buttons-size) - 0px);
-        height: calc(var(--buttons-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) {
-        @include button.rainbow($base);
-    }
-
-    @include button.btn-night($with-disabled: false) using ($base) {
-        @include button.rainbow($base);
-    }
-
     input {
         display: inline-block;
+        width: 100%;
+        height: 100%;
         cursor: pointer;
         opacity: 0;
     }

ts/editor/BUILD.bazel

@@ -38,7 +38,6 @@ compile_sass(
 
 compile_sass(
     srcs = [
-        "color.scss",
         "fields.scss",
     ],
     group = "base_css",

ts/editor/ColorButtons.svelte

@@ -8,66 +8,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     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 WithShortcut from "components/WithShortcut.svelte";
     import WithColorHelper from "./WithColorHelper.svelte";
 
     import { textColorIcon, highlightColorIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
 
-    import "./color.css";
-
     export let api = {};
 
-    const foregroundColorKeyword = "--foreground-color";
-    let color = "black";
-
-    $: {
-        document.documentElement.style.setProperty(foregroundColorKeyword, color);
-    }
-
     const wrapWithForecolor = (color: string) => () => {
         document.execCommand("forecolor", false, color);
-    }
+    };
 
     const wrapWithBackcolor = (color: string) => () => {
         document.execCommand("backcolor", false, color);
-    }
+    };
-
-    function setWithCurrentColor({ currentTarget }: Event): void {
-        color = (currentTarget as HTMLInputElement).value;
-    }
 </script>
 
 <ButtonGroup {api}>
-    <!--
+    <WithColorHelper let:colorHelperIcon let:color let:setColor>
-    <ButtonGroupItem>
-        <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
-            <IconButton
-                class="forecolor"
-                tooltip={appendInParentheses(
-                    tr.editingSetForegroundColor(),
-                    shortcutLabel
-                )}
-                on:click={wrapWithForecolor}
-                on:mount={createShortcut}
-            >
-                {@html squareFillIcon}
-            </IconButton>
-        </WithShortcut>
-    </ButtonGroupItem>
-
-    <ButtonGroupItem>
-        <WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
-            <ColorPicker
-                tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
-                on:change={setWithCurrentColor}
-                on:mount={createShortcut}
-            />
-        </WithShortcut>
-    </ButtonGroupItem>
-    -->
-
-    <WithColorHelper let:colorHelperIcon let:color>
         <ButtonGroupItem>
             <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
                 <IconButton
@@ -83,9 +43,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithShortcut>
         </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
+                <IconButton
+                    tooltip={appendInParentheses(
+                        tr.editingChangeColor(),
+                        shortcutLabel
+                    )}
+                    disables={false}
+                >
+                    <ColorPicker on:change={setColor} on:mount={createShortcut} />
+                </IconButton>
+            </WithShortcut>
+        </ButtonGroupItem>
     </WithColorHelper>
 
-    <WithColorHelper let:colorHelperIcon let:color>
+    <WithColorHelper let:colorHelperIcon let:color let:setColor>
         <ButtonGroupItem>
             <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
                 <IconButton
@@ -101,5 +75,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithShortcut>
         </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <IconButton tooltip={tr.editingChangeColor()} disables={false}>
+                <ColorPicker on:change={setColor} />
+            </IconButton>
+        </ButtonGroupItem>
     </WithColorHelper>
 </ButtonGroup>

ts/editor/WithColorHelper.svelte

@@ -7,8 +7,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let color = "black";
 
-    function setColor(newColor: string): void {
+    function setColor({ currentTarget }: Event): void {
-        color = newColor;
+        color = (currentTarget! as HTMLInputElement).value;
     }
 </script>
 
@@ -17,7 +17,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    div :global(#mdi-color-helper) {
+    div {
+        display: contents;
+
+        :global(#mdi-color-helper) {
             fill: var(--color-helper-color);
         }
+    }
 </style>

ts/editor/color.scss

@@ -1,7 +0,0 @@
-:root {
-    --foreground-color: black;
-}
-
-.forecolor {
-    color: var(--foreground-color) !important;
-}