From 65567d65e4f691d62fdf49c650f660119b7ff866 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Tue, 5 Feb 2019 13:31:52 +0100
Subject: [PATCH] Turn styled colour input into a global control.

---
 assets/less/classes/input/colour.less | 38 +++++++++++++++++++++++++++
 assets/less/classes/manage/user.less  | 19 --------------
 assets/less/main.less                 |  3 ++-
 templates/_layout/input.twig          |  9 +++++++
 templates/manage/users/user.twig      |  6 ++---
 5 files changed, 51 insertions(+), 24 deletions(-)
 create mode 100644 assets/less/classes/input/colour.less

diff --git a/assets/less/classes/input/colour.less b/assets/less/classes/input/colour.less
new file mode 100644
index 00000000..7ae4f3a0
--- /dev/null
+++ b/assets/less/classes/input/colour.less
@@ -0,0 +1,38 @@
+.input__colour {
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    overflow: hidden;
+    border: 1px solid #222;
+    background: #222;
+    border-radius: 2px;
+    transition: border-color .2s;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+        border-color: var(--accent-colour);
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 20;
+        background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
+        background-size: 80px 40px;
+    }
+
+    &__control {
+        border-width: 0;
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        width: 100px;
+        height: 100px;
+        z-index: 10;
+    }
+}
diff --git a/assets/less/classes/manage/user.less b/assets/less/classes/manage/user.less
index 0e441c24..2866428f 100644
--- a/assets/less/classes/manage/user.less
+++ b/assets/less/classes/manage/user.less
@@ -21,23 +21,4 @@
     &__input {
         width: 100%;
     }
-
-    &__colour {
-        display: block;
-        overflow: hidden;
-        width: 40px;
-        height: 20px;
-
-        &__control {
-            border-width: 0;
-            position: absolute;
-            top: -5px;
-            left: -5px;
-            right: -1px;
-            bottom: -1px;
-            width: 100px;
-            height: 100px;
-            cursor: pointer;
-        }
-    }
 }
diff --git a/assets/less/main.less b/assets/less/main.less
index 8788eb7c..c8dadb77 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -104,11 +104,12 @@ html {
 
 // Input elements
 @import "classes/input/button";
+@import "classes/input/checkbox";
+@import "classes/input/colour";
 @import "classes/input/select";
 @import "classes/input/text";
 @import "classes/input/textarea";
 @import "classes/input/upload";
-@import "classes/input/checkbox";
 
 // Base styles
 @import "classes/avatar";
diff --git a/templates/_layout/input.twig b/templates/_layout/input.twig
index 8d4b7d56..9f8cf92c 100644
--- a/templates/_layout/input.twig
+++ b/templates/_layout/input.twig
@@ -105,3 +105,12 @@
     </select>
 {% endspaceless %}
 {% endmacro %}
+
+{% macro input_colour(name, class, value) %}
+{% spaceless %}
+    <label class="input__colour{% if class %} {{ class }}{% endif %}">
+        <div class="input__colour__overlay"></div>
+        <input type="color" name="{{ name }}" value="{{ value }}" class="input__colour__control">
+    </label>
+{% endspaceless %}
+{% endmacro %}
diff --git a/templates/manage/users/user.twig b/templates/manage/users/user.twig
index 0c983c8e..2ad8e798 100644
--- a/templates/manage/users/user.twig
+++ b/templates/manage/users/user.twig
@@ -1,7 +1,7 @@
 {% extends 'manage/users/master.twig' %}
 {% from 'macros.twig' import container_title %}
 {% from 'manage/macros.twig' import permissions_table %}
-{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file, input_select %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file, input_select, input_colour %}
 
 {% set site_link = '/profile.php?u=' ~ manage_user.user_id %}
 
@@ -103,9 +103,7 @@
                         </div>
                     </label>
 
-                    <label class="manage__user__colour">
-                        <input type="color" name="colour[hex]" class="manage__user__colour__control" value="{{ manage_user.user_colour|default(0)|colour_hex }}">
-                    </label>
+                    {{ input_colour('colour[hex]', '', manage_user.user_colour|default(0)|colour_hex) }}
                 </div>
 
                 <div class="manage__user__buttons">