From 7ec7a88e98828e44e468c3f478b6c0cad0675266 Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Sat, 23 Oct 2021 11:43:20 +0200
Subject: [PATCH] add settings color input

---
 dribbblish.js | 14 +++++++++++++-
 user.css      | 20 ++++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/dribbblish.js b/dribbblish.js
index dfecf26..d05933a 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -3,7 +3,7 @@
 class ConfigMenu {
     /**
      * @typedef {Object} DribbblishConfigItem
-     * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time"} type
+     * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time" | "color"} type
      * @property {String|DribbblishConfigArea} [area={name: "Main Settings", order: 0}]
      * @property {any} [data={}]
      * @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down
@@ -268,6 +268,18 @@ class ConfigMenu {
                 this.set(options.key, e.target.value);
                 options.onChange(this.get(options.key));
             });
+        } else if (options.type == "color") {
+            // Validate
+            if (options.defaultValue == null) options.defaultValue = "#000000";
+            const input = /* html */ `
+                <input type="color" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key)}">
+            `;
+            this.addInputHTML({ ...options, input });
+
+            document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => {
+                this.set(options.key, e.target.value);
+                options.onChange(this.get(options.key));
+            });
         } else {
             throw new Error(`Config Type "${options.type}" invalid`);
         }
diff --git a/user.css b/user.css
index 03ec75f..92e18ae 100644
--- a/user.css
+++ b/user.css
@@ -174,6 +174,26 @@ input[type="time"]::-webkit-calendar-picker-indicator {
     filter: invert(calc(1 - var(--is_light)));
 }
 
+input[type=color] {
+    position: relative;
+    padding: 0px;
+    border: none;
+}
+
+input[type=color]::before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    inset: -5px;
+    border-radius: 4px;
+    background-color: rgba(var(--spice-rgb-selected-row), .4);
+}
+
+input[type=color]:hover::before,
+input[type=color]:active::before {
+    background-color: rgba(var(--spice-rgb-selected-row), .6);
+}
+
 .x-searchInput-searchInputSearchIcon,
 .x-searchInput-searchInputClearButton {
     color: var(--spice-text) !important;