From f10e133acd868020fbf1bb4987c47fdad076ecf1 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 4 Mar 2021 18:43:49 +0100
Subject: [PATCH] Added color-picker to tag settings

---
 .../app/components/gh-tag-settings-form.hbs   | 31 ++++++++---
 ghost/admin/app/styles/layouts/tags.css       | 52 +++++++++++++++++++
 2 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/components/gh-tag-settings-form.hbs b/ghost/admin/app/components/gh-tag-settings-form.hbs
index 546b00969f..ff517fcb4b 100644
--- a/ghost/admin/app/components/gh-tag-settings-form.hbs
+++ b/ghost/admin/app/components/gh-tag-settings-form.hbs
@@ -26,16 +26,31 @@
                     <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
                         <label for="accent-color">Color</label>
                         <div class="input-color">
-                            <GhTextInput
-                                @name="accent-color"
-                                @placeholder="abcdef"
-                                @autocorrect="off"
-                                @maxlength="6"
-                                @focus-out={{action "validateAccentColor"}}
-                                @value={{accentColor}}
+                            <input
+                                type="text"
+                                placeholder="abcdef"
+                                name="accent-color"
+                                autocorrect="off"
+                                maxlength="6"
+                                value={{this.accentColor}}
+                                class="gh-input"
+                                {{on "input" (perform this.debounceUpdateAccentColor)}}
+                                {{on "blur" this.updateAccentColor}}
                                 data-test-input="accentColor"
                             />
-                            <div class="color-box" style={{this.accentColorBackgroundStyle}}></div>
+                            <div class="color-picker-horizontal-divider"></div>
+                            <div
+                                class="color-box-container"
+                                style={{this.accentColorBgStlye}}
+                            >
+                                <input
+                                    type="color"
+                                    name="accent-color"
+                                    class="color-picker"
+                                    value="{{this.accentColorPickerValue}}"
+                                    {{on "input" (perform this.debounceUpdateAccentColor)}}
+                                >
+                            </div>
                         </div>
                     </GhFormGroup>
                 </div>
diff --git a/ghost/admin/app/styles/layouts/tags.css b/ghost/admin/app/styles/layouts/tags.css
index 2ee48b37ad..e0b89875df 100644
--- a/ghost/admin/app/styles/layouts/tags.css
+++ b/ghost/admin/app/styles/layouts/tags.css
@@ -177,6 +177,58 @@ label.gh-tag-setting-codeheader {
     width: 100%;
 }
 
+.gh-tag-settings-colorcontainer .input-color input {
+    position: relative;
+    width: 112px;
+    padding: 3px 4px 3px 54px;
+    font-size: 1.3rem;
+}
+
+.gh-tag-settings-colorcontainer .input-color::after {
+    left: 44px;
+}
+
+.gh-tag-settings-colorcontainer .color-picker-horizontal-divider {
+    position: absolute;
+    display: block;
+    content: "";
+    width: 1px;
+    top: 0;
+    left: 37px;
+    bottom: 0;
+    background: color-mod(var(--lightgrey) l(-5%) s(-10%));
+}
+
+.gh-tag-settings-colorcontainer .input-color input:focus + .color-picker-horizontal-divider {
+    top: 2px;
+    bottom: 2px;
+}
+
+.gh-tag-settings-colorcontainer .color-box-container {
+    height: 32px;
+    width: 32px;
+    position: absolute;
+    overflow: hidden;
+    top: 2px;
+    left: 2px;
+    margin: 1px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+
+.gh-tag-settings-colorcontainer .color-box-container .color-picker {
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    width: 50px;
+    height: 50px;
+}
+
+
 .gh-tag-settings-colorcontainer {
     flex-basis: 112px;
 }