Add a colour picker that is consistent across all browsers (GRN2-96) (#518)

* sync

* Fix corruption

* Add back room.rb

* Line endings

* More line endings

* Add jQuery colour picker

* Remove inline styling

app/assets/javascripts/admins.js

@@ -31,15 +31,32 @@ $(document).on('turbolinks:load', function(){
       $("#delete-confirm").parent().attr("action", url)
     })
 
-    // Change the color of the color inputs when the color is changed
-    $(".colorinput-input").change(function(data) {
-      // Get the color from the input
-      var color = $(data.target).val()
+    $('.colorinput').ColorPicker({
+      onHide: function (colpkr) {
+        var colour = $("#user-colour").val();
 
-      // Update the color in the database and reload the page
-      $.post($("#coloring-path").val(), {color: color}).done(function(data) {
-        location.reload()
-      });
+        // Update the color in the database and reload the page
+        $.post($("#coloring-path").val(), {color: colour}).done(function(data) {
+          location.reload()
+        });
+      },
+
+      onSubmit: function(hsb, hex, rgb, el) {
+        $.post($("#coloring-path").val(), {color: '#' + hex}).done(function(data) {
+          location.reload()
+        });
+      },
+      
+      onBeforeShow: function () {
+        var colour = $("#user-colour").val();
+
+        $(this).ColorPickerSetColor(colour);
+      },
+
+      onChange: function (hsb, hex, rgb) {
+        $('.colorinput span').css('backgroundColor', '#' + hex);
+        $("#user-colour").val('#' + hex);
+      }
     });
   }
 

app/assets/javascripts/application.js

@@ -31,4 +31,5 @@
 //= require tabler
 //= require tabler.plugins
 //= require jquery_ujs
+//= require colorpicker
 //= require_tree .

app/assets/stylesheets/admins.scss

@@ -30,3 +30,7 @@
     cursor: pointer;
   }
 }
+
+#branding-image{
+  z-index: auto;
+}

app/assets/stylesheets/application.scss

@@ -33,6 +33,7 @@
 @import "tabler/variables";
 @import "bootstrap";
 @import "tabler-custom";
+@import "colorpicker";
 
 @import "utilities/variables";
 @import "admins";

app/views/shared/admin_settings/_site_settings.html.erb

@@ -22,7 +22,7 @@
         <div class="input-group">
           <input id="branding-url" type="text" class="form-control" value="<%= logo_image %>">
           <span class="input-group-append">
-            <button onclick="changeBrandingImage('<%= admin_branding_path %>')" class="btn btn-primary" type="button"><%= t("administrator.site_settings.branding.change") %></button>
+            <button id="branding-image" onclick="changeBrandingImage('<%= admin_branding_path %>')" class="btn btn-primary" type="button"><%= t("administrator.site_settings.branding.change") %></button>
           </span>
         </div>
       </div>
@@ -33,12 +33,12 @@
         <div class="row gutters-xs">
           <div class="col-auto">
             <input id="coloring-path" value="<%= admin_coloring_path %>" hidden>
-            <label class="colorinput">
-              <input name="color" type="color" value="<%= user_color %>" class="colorinput-input" />
+            <input id="user-colour" value="<%= user_color %>" hidden/>
+            <div class="colorinput">
               <span class="colorinput-color" style="background: <%= user_color %>;">
                 <i class="p-1 fas fa-paint-brush"></i>
               </span>
-            </label>
+            </div>
           </div>
         </div>
       </div>