From 4caad9958463bda89442ec10a2e5e8a80f28db59 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Thu, 22 Oct 2020 11:06:57 +0200
Subject: [PATCH] Fix for color fields in settings (#10984)

* form fix

* color pickers and description
---
 app/views/users/_profile.html.erb | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb
index 4aa5206c4..5f1891f3a 100644
--- a/app/views/users/_profile.html.erb
+++ b/app/views/users/_profile.html.erb
@@ -55,12 +55,23 @@
             <label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
               <%= field.label %>
             </label>
+          <% elsif field["input_type"] == "color_field" %>
+            <label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
+              <%= field.label %>
+            </label>
+            <div class="flex items-center w-100 m:w-50">
+              <%= f.public_send("text_field", "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], class: "crayons-textfield js-color-field") %>
+              <%= f.public_send(field["input_type"], "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], class: "crayons-color-selector js-color-field ml-2") %>
+            </div>
           <% else %>
             <label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
               <%= field.label %>
             </label>
             <%= f.public_send(field["input_type"], "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], class: "crayons-textfield") %>
           <% end %>
+          <% if field.description.present? %>
+            <p class="crayons-field__description"><%= field.description %></p>
+          <% end %>
         </div>
       <% end %>
     </div>
@@ -70,3 +81,23 @@
     <button type="submit" class="crayons-btn">Save Profile Information</button>
   </div>
 <% end %>
+
+<script>
+  var pickers = document.querySelectorAll('.js-color-field');
+
+  function colorValueChange(e) {
+    var field = e.target;
+    var sibling = '';
+    if (field.nextElementSibling) {
+      sibling = field.nextElementSibling;
+    } else {
+      sibling = field.previousElementSibling;
+    }
+
+    sibling.value = field.value;
+  }
+
+  pickers.forEach(function(picker) {
+    picker.addEventListener('change', colorValueChange);
+  });
+</script>