Merge pull request #1211 from hgiesel/bettercolor

Implement new text color / highlight color buttons

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
-    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/components/IconButton.svelte

@@ -17,6 +17,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let disables = true;
     export let tabbable = false;
 
+    export let iconSize: number = 75;
+    export let widthMultiplier: number = 1;
+
     let buttonRef: HTMLButtonElement;
 
     const disabled = getContext<Readable<boolean>>(disabledKey);
@@ -37,6 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
+    style={`--icon-size: ${iconSize}%`}
     title={tooltip}
     {...dropdownProps}
     disabled={_disabled}
@@ -44,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:click
     on:mousedown|preventDefault
 >
-    <span class="p-1"><slot /></span>
+    <span style={`--width-multiplier: ${widthMultiplier};`}> <slot /> </span>
 </button>
 
 <style lang="scss">
@@ -60,18 +64,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     span {
         display: inline-block;
+        position: relative;
         vertical-align: middle;
 
         /* constrain icon */
-        width: calc(var(--buttons-size) - 2px);
+        width: calc((var(--buttons-size) - 2px) * var(--width-multiplier));
         height: calc(var(--buttons-size) - 2px);
 
         & > :global(svg),
         & > :global(img) {
+            position: absolute;
+            width: var(--icon-size);
+            height: var(--icon-size);
+            top: calc((100% - var(--icon-size)) / 2);
+            bottom: calc((100% - var(--icon-size)) / 2);
+            left: calc((100% - var(--icon-size)) / 2);
+            right: calc((100% - var(--icon-size)) / 2);
+
             fill: currentColor;
             vertical-align: unset;
-            width: 100%;
-            height: 100%;
         }
     }
 

ts/editor/BUILD.bazel

@@ -38,7 +38,6 @@ compile_sass(
 
 compile_sass(
     srcs = [
-        "color.scss",
         "fields.scss",
     ],
     group = "base_css",
@@ -113,6 +112,10 @@ copy_mdi_icons(
         "function-variant.svg",
         "code-brackets.svg",
         "xml.svg",
+
+        "format-color-text.svg",
+        "format-color-highlight.svg",
+        "color-helper.svg",
     ],
     visibility = ["//visibility:public"],
 )

ts/editor/ColorButtons.svelte

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

ts/editor/TemplateButtons.svelte

@@ -42,6 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     tr.editingAttachPicturesaudiovideo(),
                     shortcutLabel
                 )}
+                iconSize={70}
                 on:click={onAttachment}
                 on:mount={createShortcut}
             >
@@ -54,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"F5"} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
+                iconSize={70}
                 on:click={onRecord}
                 on:mount={createShortcut}
             >
@@ -164,6 +166,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
+                iconSize={70}
                 on:click={onHtmlEdit}
                 on:mount={createShortcut}
             >

ts/editor/WithColorHelper.svelte

@@ -0,0 +1,27 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import { colorHelperIcon } from "./icons";
+
+    export let color = "black";
+
+    function setColor({ currentTarget }: Event): void {
+        color = (currentTarget! as HTMLInputElement).value;
+    }
+</script>
+
+<div style={`--color-helper-color: ${color}`}>
+    <slot {colorHelperIcon} {color} {setColor} />
+</div>
+
+<style lang="scss">
+    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;
-}

ts/editor/icons.ts

@@ -21,9 +21,15 @@ export { default as indentIcon } from "./text-indent-left.svg";
 export { default as outdentIcon } from "./text-indent-right.svg";
 
 export { default as squareFillIcon } from "./square-fill.svg";
+export { default as textColorIcon } from "./format-color-text.svg";
+export { default as highlightColorIcon } from "./format-color-highlight.svg";
+export { default as colorHelperIcon } from "./color-helper.svg";
 
 export { default as paperclipIcon } from "./paperclip.svg";
 export { default as micIcon } from "./mic.svg";
 export { default as bracketsIcon } from "./code-brackets.svg";
 export { default as functionIcon } from "./function-variant.svg";
 export { default as xmlIcon } from "./xml.svg";
+
+export const arrowIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';

ts/sass/button_mixins.scss

@@ -116,13 +116,3 @@ $focus-color: $blue;
     box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
         rgba(black, $intensity);
 }
-
-@mixin rainbow($base) {
-    background: content-box
-            linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-        content-box
-            linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-        content-box
-            linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
-        border-box $base;
-}