Replaced old colour picker with a cleaner one (#617)

app/assets/javascripts/admins.js

@@ -45,45 +45,8 @@ $(document).on('turbolinks:load', function(){
     })
     
     /* COLOR SELECTORS */
-    
-    $('#colorinput-regular').ColorPicker({
-      onBeforeShow: function () {
-        var colour = rgb2hex($("#colorinput-regular").css("background-color"))
 
-        $(this).ColorPickerSetColor(colour);
-      },
-      onSubmit: function(_hsb, hex) {
-        $.post($("#coloring-path-regular").val(), {color: '#' + hex}).done(function() {
-          location.reload()
-        });
-      },
-    });
-
-    $('#colorinput-lighten').ColorPicker({
-      onBeforeShow: function () {
-        var colour = rgb2hex($("#colorinput-lighten").css("background-color"))
-
-        $(this).ColorPickerSetColor(colour);
-      },
-      onSubmit: function(_hsb, hex) {
-        $.post($("#coloring-path-lighten").val(), {color: '#' + hex}).done(function() {
-          location.reload()
-        });
-      },
-    });
-
-    $('#colorinput-darken').ColorPicker({
-      onBeforeShow: function () {
-        var colour = rgb2hex($("#colorinput-darken").css("background-color"))
-
-        $(this).ColorPickerSetColor(colour);
-      },
-      onSubmit: function(_hsb, hex) {
-        $.post($("#coloring-path-darken").val(), {color: '#' + hex}).done(function() {
-          location.reload()
-        });
-      },
-    });
+    loadColourSelectors()
   }
 
   // Only run on the admins edit user page.
@@ -119,11 +82,82 @@ function filterRole(role) {
   window.location.replace(url);
 }
 
-function rgb2hex(rgb) {
-  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-  function hex(x) {
-      return ("0" + parseInt(x).toString(16)).slice(-2);
-  }
-  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
-}
+function loadColourSelectors() {
+  const pickrRegular = new Pickr({
+    el: '#colorinput-regular',
+    theme: 'monolith',
+    useAsButton: true,
+    lockOpacity: true,
+    defaultRepresentation: 'HEX',
+    closeWithKey: 'Enter',
+    default: $("#colorinput-regular").css("background-color"),
 
+    components: {
+        palette: true,
+        preview: true,
+        hue: true,
+        interaction: {
+            input: true,
+            save: true,
+        },
+    },
+  });
+
+  const pickrLighten = new Pickr({
+    el: '#colorinput-lighten',
+    theme: 'monolith',
+    useAsButton: true,
+    lockOpacity: true,
+    defaultRepresentation: 'HEX',
+    closeWithKey: 'Enter',
+    default: $("#colorinput-lighten").css("background-color"),
+
+    components: {
+        palette: true,
+        preview: true,
+        hue: true,
+        interaction: {
+            input: true,
+            save: true,
+        },
+    },
+  });
+
+  const pickrDarken = new Pickr({
+    el: '#colorinput-darken',
+    theme: 'monolith',
+    useAsButton: true,
+    lockOpacity: true,
+    defaultRepresentation: 'HEX',
+    closeWithKey: 'Enter',
+    default: $("#colorinput-darken").css("background-color"),
+
+    components: {
+        palette: true,
+        preview: true,
+        hue: true,
+        interaction: {
+            input: true,
+            save: true,
+        },
+    },
+  });
+
+  pickrRegular.on("save", (color, instance) => {
+    $.post($("#coloring-path-regular").val(), {color: color.toHEXA().toString()}).done(function() {
+      location.reload()
+    });
+  })
+
+  pickrLighten.on("save", (color, instance) => {
+    $.post($("#coloring-path-lighten").val(), {color: color.toHEXA().toString()}).done(function() {
+      location.reload()
+    });
+  })
+
+  pickrDarken.on("save", (color, instance) => {
+    $.post($("#coloring-path-darken").val(), {color: color.toHEXA().toString()}).done(function() {
+      location.reload()
+    });
+  })
+}

app/assets/javascripts/application.js

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

app/assets/stylesheets/application.scss

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

app/views/admins/index.html.erb

@@ -12,6 +12,11 @@
 # You should have received a copy of the GNU Lesser General Public License along
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
+
+<% # Only load the color picker on the Admins page %>
+<%= stylesheet_link_tag    "https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" %>
+<%= javascript_include_tag "https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js" %>
+
 <div class="container pt-6">
   <%= render "shared/components/subtitle", subtitle: t("administrator.title"), search: false %>
 

app/views/shared/_footer.html.erb

@@ -14,7 +14,7 @@
 %>
 
 <footer class="footer pt-3">
-  <p class="text-center mb-1"><%= t("footer.powered_by", href: link_to(t("greenlight"), "https://bigbluebutton.org/2018/07/09/greenlight-2-0/", target: "_blank")).html_safe %> v <%= Greenlight::Application::VERSION %></p>
+  <p class="text-center mb-1"><%= t("footer.powered_by", href: link_to(t("greenlight"), "https://bigbluebutton.org/2018/07/09/greenlight-2-0/", target: "_blank")).html_safe %> <%= Greenlight::Application::VERSION %></p>
 </footer>
 
 <%= render "shared/components/cookie_warning" %>