From 2e173ed958f6ce8c0a2a99daeef4151d0f6bd090 Mon Sep 17 00:00:00 2001
From: bhomie <hi@briansander.com>
Date: Fri, 26 Jun 2020 20:46:18 -0700
Subject: [PATCH] Add values to custom color buttons

---
 public/css/style.scss | 37 +++++++++++++++++++++------------
 public/index.html     | 48 ++++++++++++++++++++++++++++++++++++-------
 public/js/settings.js | 13 ++++++------
 3 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 49938d1a8..1a41ea2c3 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -11,10 +11,12 @@
 
 input[type="color"] {
 	-webkit-appearance: none;
-	border: none;
-	width: 32px;
+  padding: 0;
+  width: 100%;
   height: 32px;
+  overflow: hidden;
   border-radius: var(--roundness);
+  border: 1px solid black;
 }
 input[type="color"]::-webkit-color-swatch-wrapper {
 	padding: 0;
@@ -33,16 +35,25 @@ input{
   font-size: 1rem;
   line-height: 1rem;
   font-family: "Roboto Mono";
-  &.colorPicker {
+}
+
+.colorPicker {
+  text-align: center;
+  will-change: transform;
+  transition: transform .2s ease-in-out;
+  overflow: hidden;
+  border-radius: var(--roundness);
+  & label {
+    position: absolute;
+    width: 100%;
     text-align: center;
+    padding: auto;
     cursor: pointer;
-    will-change: padding;
-    transition: .1s ease-in-out padding;
-    width: 2rem;
-    height: 2rem;
-    &:hover {
-      padding: .3rem;
-    }
+  }
+  & [for="--bg-color"],
+  & #--bg-color {
+    color: var(--main-color);
+    border-color: var(--main-color);
   }
 }
 
@@ -1314,15 +1325,15 @@ key {
     display: grid;
     // gap: .5rem;
     grid-template-areas: "title title"
-                          "text buttons";
+                         "text buttons";
     grid-template-columns: 2fr 1fr;
     column-gap: 2rem;
     align-items: center;
     &.customTheme {
       grid-template-columns: 1fr 1fr 1fr 1fr;
       justify-items: stretch;
-      gap: .5rem;
-      & h1 {
+      gap: .5rem 2rem;
+      & h5 {
         grid-column: 1 / span 4;
       }
     }
diff --git a/public/index.html b/public/index.html
index 26ddc3270..98d81d78b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -429,19 +429,53 @@
           <div class="tabContainer">
             <div tabContent="custom" class="tabContent section customTheme">
               <label class="text">background</label>
-              <input class="input colorPicker" type="color" value="#ffffff" colorVar="--bg-color">
+                <span class="colorPicker">
+                  <label for="--bg-color">#e2b714</label>
+                  <input type="color" value="#ffffff" id="--bg-color">
+                </span>
               <label class="text">main</label>
-              <input class="input colorPicker" type="color" value="#ffffff" colorVar="--main-color">
+                <span class="colorPicker">
+                  <label for="--main-color">#e2b714</label>
+                  <input type="color" value="#ffffff" id="--main-color">
+                </span>
               <label class="text">caret</label>
-              <input class="input colorPicker" type="color" value="#ffffff" colorVar="--caret-color">
+                <span class="colorPicker">
+                  <label for="--caret-color">#e2b714</label>
+                  <input type="color" value="#ffffff" id="--caret-color">
+                </span>
               <label class="text">sub</label>
-              <input class="input colorPicker" type="color" value="#ffffff" colorVar="--sub-color">
+                <span class="colorPicker">
+                  <label for="--sub-color">#e2b714</label>
+                  <input type="color" value="#ffffff" id="--sub-color">
+                </span>
               <label class="text">text</label>
-              <input class="input colorPicker" type="color" value="#000000" colorVar="--text-color">
+                <span class="colorPicker">
+                  <label for="--text-color">#e2b714</label>
+                  <input type="color" value="#000000" id="--text-color">
+                </span>
               <label class="text">error</label>
-              <input class="input colorPicker" type="color" value="#ffffff" colorVar="--error-color">
+                <span class="colorPicker">
+                  <label for="--error-color">#e2b714</label>
+                  <input type="color" value="#ffffff" id="--error-color">
+                </span>
               <label class="text">extra error</label>
-              <input class="input colorPicker" type="color" value="#ffffff" colorVar="--error-extra-color">
+                <span class="colorPicker">
+                  <label for="--error-extra-color">#e2b714</label>
+                  <input type="color" value="#ffffff" id="--error-extra-color">
+                </span>
+
+              <h5>colorful mode:</h5>
+
+              <label class="text">error</label>
+                <span class="colorPicker">
+                  <label for="--colorful-error-color">#e2b714</label>
+                  <input type="color" value="#ffffff" id="--colorful-error-color">
+                </span>
+              <label class="text">extra error</label>
+                <span class="colorPicker">
+                  <label for="--colorful-error-extra-color">#e2b714</label>
+                  <input type="color" value="#fffff" id="--colorful-error-extra-color">
+                </span>
             </div>
             <div tabContent="preset" class="tabContent buttons">
             </div>
diff --git a/public/js/settings.js b/public/js/settings.js
index 0f8394765..aa17b2258 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -449,7 +449,7 @@ $(document).on("click",".pageSettings .section.tags .tagsList .tag .removeButton
 })
 
 //theme tabs & custom theme
-const colorVars = ['--bg-color', '--main-color','--caret-color', '--sub-color', '--text-color', '--error-color', '--error-extra-color']
+const colorVars = ['--bg-color', '--main-color','--caret-color', '--sub-color', '--text-color', '--error-color', '--error-extra-color', '--colorful-error-color', '--colorful-error-extra-color']
 
 $(".tab").click(e => {
     $('.tab').removeClass("active")
@@ -461,22 +461,23 @@ $(".tab").click(e => {
             $('[tabContent="custom"]').removeClass("reveal")
             setTimeout(() => {
                 $('[tabContent="preset"]').addClass("reveal")
-            }, 250);
+            }, 150);
         } else {
             setCustomTheme(true)
             $('[tabContent="preset"]').removeClass("reveal")
             setTimeout(() => {
                 $('[tabContent="custom"]').addClass("reveal")
-            }, 250);
+            }, 150);
         }
 })
 
-$('.colorPicker').on('input', e => {
-    let $colorVar = $(e.currentTarget).attr('colorVar')
+$("[type='color']").on('input', e => {
+    let $colorVar = $(e.currentTarget).attr('id')
     let $pickedColor = $(e.currentTarget).val();
 
     document.documentElement.style.setProperty($colorVar, $pickedColor)
-    
+    $("[for="+$colorVar+"]").text($pickedColor)
+
     config.customThemeColors[colorVars.indexOf($colorVar)] = $pickedColor
 })