From 338953d72808b7801ef3affd6d84f3c868abf1f1 Mon Sep 17 00:00:00 2001
From: farhatahmad <35435341+farhatahmad@users.noreply.github.com>
Date: Tue, 9 Jul 2019 17:03:18 -0400
Subject: [PATCH] Replaced old colour picker with a cleaner one (#617)
---
app/assets/javascripts/admins.js | 124 +++--
app/assets/javascripts/application.js | 1 -
app/assets/stylesheets/application.scss | 1 -
app/views/admins/index.html.erb | 5 +
app/views/shared/_footer.html.erb | 2 +-
vendor/assets/images/colourPicker/blank.gif | Bin 49 -> 0 bytes
.../colourPicker/colorpicker_background.png | Bin 1897 -> 0 bytes
.../images/colourPicker/colorpicker_hex.png | Bin 532 -> 0 bytes
.../images/colourPicker/colorpicker_hsb_b.png | Bin 970 -> 0 bytes
.../images/colourPicker/colorpicker_hsb_h.png | Bin 1012 -> 0 bytes
.../images/colourPicker/colorpicker_hsb_s.png | Bin 1171 -> 0 bytes
.../images/colourPicker/colorpicker_indic.gif | Bin 86 -> 0 bytes
.../colourPicker/colorpicker_overlay.png | Bin 10355 -> 0 bytes
.../images/colourPicker/colorpicker_rgb_b.png | Bin 970 -> 0 bytes
.../images/colourPicker/colorpicker_rgb_g.png | Bin 1069 -> 0 bytes
.../images/colourPicker/colorpicker_rgb_r.png | Bin 1066 -> 0 bytes
.../colourPicker/colorpicker_select.gif | Bin 78 -> 0 bytes
.../colourPicker/colorpicker_submit.png | Bin 5030 -> 0 bytes
.../images/colourPicker/custom_background.png | Bin 1916 -> 0 bytes
.../assets/images/colourPicker/custom_hex.png | Bin 562 -> 0 bytes
.../images/colourPicker/custom_hsb_b.png | Bin 1097 -> 0 bytes
.../images/colourPicker/custom_hsb_h.png | Bin 970 -> 0 bytes
.../images/colourPicker/custom_hsb_s.png | Bin 1168 -> 0 bytes
.../images/colourPicker/custom_indic.gif | Bin 86 -> 0 bytes
.../images/colourPicker/custom_rgb_b.png | Bin 1008 -> 0 bytes
.../images/colourPicker/custom_rgb_g.png | Bin 1069 -> 0 bytes
.../images/colourPicker/custom_rgb_r.png | Bin 1018 -> 0 bytes
.../images/colourPicker/custom_submit.png | Bin 997 -> 0 bytes
vendor/assets/images/colourPicker/select.png | Bin 506 -> 0 bytes
vendor/assets/images/colourPicker/select2.png | Bin 518 -> 0 bytes
vendor/assets/images/colourPicker/slider.png | Bin 315 -> 0 bytes
vendor/assets/javascripts/colorpicker.js | 484 ------------------
vendor/assets/stylesheets/colorpicker.scss | 161 ------
33 files changed, 85 insertions(+), 693 deletions(-)
delete mode 100644 vendor/assets/images/colourPicker/blank.gif
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_background.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_hex.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_hsb_b.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_hsb_h.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_hsb_s.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_indic.gif
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_overlay.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_rgb_b.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_rgb_g.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_rgb_r.png
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_select.gif
delete mode 100644 vendor/assets/images/colourPicker/colorpicker_submit.png
delete mode 100644 vendor/assets/images/colourPicker/custom_background.png
delete mode 100644 vendor/assets/images/colourPicker/custom_hex.png
delete mode 100644 vendor/assets/images/colourPicker/custom_hsb_b.png
delete mode 100644 vendor/assets/images/colourPicker/custom_hsb_h.png
delete mode 100644 vendor/assets/images/colourPicker/custom_hsb_s.png
delete mode 100644 vendor/assets/images/colourPicker/custom_indic.gif
delete mode 100644 vendor/assets/images/colourPicker/custom_rgb_b.png
delete mode 100644 vendor/assets/images/colourPicker/custom_rgb_g.png
delete mode 100644 vendor/assets/images/colourPicker/custom_rgb_r.png
delete mode 100644 vendor/assets/images/colourPicker/custom_submit.png
delete mode 100644 vendor/assets/images/colourPicker/select.png
delete mode 100644 vendor/assets/images/colourPicker/select2.png
delete mode 100644 vendor/assets/images/colourPicker/slider.png
delete mode 100644 vendor/assets/javascripts/colorpicker.js
delete mode 100644 vendor/assets/stylesheets/colorpicker.scss
diff --git a/app/assets/javascripts/admins.js b/app/assets/javascripts/admins.js
index cd29fd8e..55fa3a43 100644
--- a/app/assets/javascripts/admins.js
+++ b/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()
+ });
+ })
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 1bec0ad4..9e2fd706 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -31,5 +31,4 @@
//= require tabler
//= require tabler.plugins
//= require jquery_ujs
-//= require colorpicker
//= require_tree .
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index f3fdace1..d675a905 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -33,7 +33,6 @@
@import "tabler/variables";
@import "bootstrap";
@import "tabler-custom";
-@import "colorpicker";
@import "utilities/variables";
@import "admins";
diff --git a/app/views/admins/index.html.erb b/app/views/admins/index.html.erb
index c3af385a..f52a799d 100644
--- a/app/views/admins/index.html.erb
+++ b/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
h+v*8l*BQUCyPMF0TmW&i*=2LJ#e`2#0~
zRsaAe`AI}URCwC#eanvINRp%)C+D=l9`;ZBJNpmnIHzu)uwC7iS()Jv(>)Z8B@~LP
zskuk>0)q)45bjPo-NPtU5fxQ4Hh2FoGyC6W_AoQwfBXI$J?{4V&pZ36_xa*}$2NB_
z?N>dXc9V5F3}^z>mkbZVghE~cjdhi>4p^L{_7V1g
z0{~9$y2|#@IR}5r_7lhDm;p?O=Nm?-=ks}Ndp@7r-i>fXsgVf|opit72e{e}uC_<3
ze!t&+*I{i3makJ;XH*@v5^yCjC_*9BjLu0I<&INn5Rqhf?FiXs6}@_Ie=cKAXoxsMO?
z2~YdD=C29Ej~RbVI3Gv*bLr0ue_Zv$QT=-G5Af
I`K-m+0B#44S5ebAxpF##Dg^E`
zqc^r(?ZExs%T8g1nu7=p2B51P;3}z^?|Z*h;$1Q_(V+To`zu#S4R2moFj>h4Lwo~8
z$7<8+P}tmDz0T!#k4J;+>xh;486{@S#nBd7PL`3-NFx84l03Oz^m2QT*N&kd3P|%Z
zE03FeicR9hru&uoCh6_s;c}fefn