From 49daa2dd013a17d7fd033010b4e2083cd5d266f7 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 18:33:46 +0200
Subject: [PATCH] Improve looks of color picker button

---
 ts/editor-toolbar/ColorPicker.svelte | 22 ++++++++++++++++++----
 ts/editor-toolbar/color.scss         | 10 ----------
 ts/editor-toolbar/color.ts           |  1 -
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index bba435836..9871a57ff 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -13,19 +13,32 @@
     }
 
     const nightMode = getContext(nightModeKey);
+
+    let input: HTMLInputElement;
+
+    function delegateToInput() {
+        input.click();
+    }
 </script>
 
 <style lang="scss">
     button {
         padding: 0;
+        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%),
+            content-box white;
+
+        width: calc(var(--toolbar-size) - 0px);
+        height: calc(var(--toolbar-size) - 0px);
+
+        border-width: 5px;
+        overflow: hidden;
     }
 
     input {
         display: inline-block;
         opacity: 0;
-
-        width: calc(var(--toolbar-size) - 2px);
-        height: calc(var(--toolbar-size) - 7px);
     }
 </style>
 
@@ -36,6 +49,7 @@
     class:btn-light={!nightMode}
     class:btn-secondary={nightMode}
     title={tooltip}
+    on:click={delegateToInput}
     on:mousedown|preventDefault>
-    <span> <input type="color" on:change={onChange} /> </span>
+    <input bind:this={input} type="color" on:change={onChange} />
 </button>
diff --git a/ts/editor-toolbar/color.scss b/ts/editor-toolbar/color.scss
index 973008821..3dcd5e3e8 100644
--- a/ts/editor-toolbar/color.scss
+++ b/ts/editor-toolbar/color.scss
@@ -5,13 +5,3 @@
 .forecolor {
     color: var(--foreground-color) !important;
 }
-
-.rainbow {
-    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 white;
-}
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 85681c7a6..79bd65a10 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -38,7 +38,6 @@ export function getColorGroup() {
     });
 
     const colorpickerButton = colorPicker({
-        className: "rainbow",
         onChange: ({ currentTarget }) =>
             setForegroundColor((currentTarget as HTMLInputElement).value),
         tooltip: tr.editingChangeColourF8(),