GRN2-134: Added Color Input for lighten and darken (#529)

* Added Color Input for lighten and darken

* rspec

app/assets/javascripts/admins.js

@@ -31,32 +31,45 @@ $(document).on('turbolinks:load', function(){
       $("#delete-confirm").parent().attr("action", url)
     })
 
-    $('.colorinput').ColorPicker({
-      onHide: function (colpkr) {
-        var colour = $("#user-colour").val();
+    /* COLOR SELECTORS */
 
-        // 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()
-        });
-      },
-      
+    $('#colorinput-regular').ColorPicker({
       onBeforeShow: function () {
-        var colour = $("#user-colour").val();
+        var colour = rgb2hex($("#colorinput-regular").css("background-color"))
 
         $(this).ColorPickerSetColor(colour);
       },
+      onSubmit: function(_hsb, hex, _rgb, _el) {
+        $.post($("#coloring-path-regular").val(), {color: '#' + hex}).done(function(data) {
+          location.reload()
+        });
+      },
+    });
 
-      onChange: function (hsb, hex, rgb) {
-        $('.colorinput span').css('backgroundColor', '#' + hex);
-        $("#user-colour").val('#' + hex);
-      }
+    $('#colorinput-lighten').ColorPicker({
+      onBeforeShow: function () {
+        var colour = rgb2hex($("#colorinput-lighten").css("background-color"))
+
+        $(this).ColorPickerSetColor(colour);
+      },
+      onSubmit: function(_hsb, hex, _rgb, _el) {
+        $.post($("#coloring-path-lighten").val(), {color: '#' + hex}).done(function(data) {
+          location.reload()
+        });
+      },
+    });
+
+    $('#colorinput-darken').ColorPicker({
+      onBeforeShow: function () {
+        var colour = rgb2hex($("#colorinput-darken").css("background-color"))
+
+        $(this).ColorPickerSetColor(colour);
+      },
+      onSubmit: function(_hsb, hex, _rgb, _el) {
+        $.post($("#coloring-path-darken").val(), {color: '#' + hex}).done(function(data) {
+          location.reload()
+        });
+      },
     });
   }
 
@@ -79,3 +92,11 @@ function changeBrandingImage(path) {
   var url = $("#branding-url").val()
   $.post(path, {url: 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]);
+}

app/assets/stylesheets/utilities/_primary_themes.scss

@@ -1,3 +1,9 @@
+.btn {
+  &:focus {
+    box-shadow: 0 0 0 2px $primary-color-lighten;
+  }
+}
+
 .btn-primary,
 .btn-primary:visited,
 .btn-primary i {
@@ -97,6 +103,7 @@ input:focus, select:focus {
 
 .bg-primary {
   background-color: $primary-color !important;
+  color: white !important;
 }
 
 .btn-danger {
@@ -129,3 +136,21 @@ input:focus, select:focus {
     }
   }
 }
+
+.primary-regular {
+  background-color: $primary-color !important;
+  border-color: $primary-color !important;
+  color: white !important;
+}
+
+.primary-lighten {
+  background-color: $primary-color-lighten !important;
+  border-color: $primary-color-lighten !important;
+  color: $primary-color !important;
+}
+
+.primary-darken {
+  background-color: $primary-color-darken !important;
+  border-color: $primary-color-darken !important;
+  color: white !important;
+}

app/controllers/admins_controller.rb

@@ -18,10 +18,11 @@
 
 class AdminsController < ApplicationController
   include Pagy::Backend
+  include Themer
   include Emailer
 
   manage_users = [:edit_user, :promote, :demote, :ban_user, :unban_user, :approve]
-  site_settings = [:branding, :coloring, :registration_method]
+  site_settings = [:branding, :coloring, :coloring_lighten, :coloring_darken, :registration_method]
 
   authorize_resource class: false
   before_action :find_user, only: manage_users
@@ -107,6 +108,18 @@ class AdminsController < ApplicationController
   # POST /admins/color
   def coloring
     @settings.update_value("Primary Color", params[:color])
+    @settings.update_value("Primary Color Lighten", color_lighten(params[:color]))
+    @settings.update_value("Primary Color Darken", color_darken(params[:color]))
+    redirect_to admins_path
+  end
+
+  def coloring_lighten
+    @settings.update_value("Primary Color Lighten", params[:color])
+    redirect_to admins_path
+  end
+
+  def coloring_darken
+    @settings.update_value("Primary Color Darken", params[:color])
     redirect_to admins_path
   end
 

app/controllers/concerns/themer.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+# BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+#
+# Copyright (c) 2018 BigBlueButton Inc. and by respective authors (see below).
+#
+# This program is free software; you can redistribute it and/or modify it under the
+# terms of the GNU Lesser General Public License as published by the Free Software
+# Foundation; either version 3.0 of the License, or (at your option) any later
+# version.
+#
+# BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+# PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+#
+# You should have received a copy of the GNU Lesser General Public License along
+# with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+
+module Themer
+extend ActiveSupport::Concern
+
+# Lightens a color by 40%
+def color_lighten(color)
+  # Uses the built in Sass Engine to lighten the color
+
+  dummy_scss = "h1 { color: $lighten; }"
+  compiled = Sass::Engine.new("$lighten:lighten(#{color}, 40%);" + dummy_scss, syntax: :scss).render
+
+  string_locater = 'color: '
+  color_start = compiled.index(string_locater) + string_locater.length
+
+  compiled[color_start..color_start + 6]
+end
+
+# Darkens a color by 10%
+def color_darken(color)
+  # Uses the built in Sass Engine to darken the color
+
+  dummy_scss = "h1 { color: $darken; }"
+  compiled = Sass::Engine.new("$darken:darken(#{color}, 10%);" + dummy_scss, syntax: :scss).render
+
+  string_locater = 'color: '
+  color_start = compiled.index(string_locater) + string_locater.length
+
+  compiled[color_start..color_start + 6]
+end
+end

app/controllers/themes_controller.rb

@@ -22,13 +22,16 @@ class ThemesController < ApplicationController
   # GET /primary
   def index
     color = @settings.get_value("Primary Color") || Rails.configuration.primary_color_default
+    lighten_color = @settings.get_value("Primary Color Lighten") || Rails.configuration.primary_color_lighten_default
+    darken_color = @settings.get_value("Primary Color Darken") || Rails.configuration.primary_color_darken_default
+
     file_name = Rails.root.join('app', 'assets', 'stylesheets', 'utilities', '_primary_themes.scss')
     @file_contents = File.read(file_name)
 
     # Include the variables and covert scss file to css
     @compiled = Sass::Engine.new("$primary-color:#{color};" \
-                                 "$primary-color-lighten:lighten(#{color}, 40%);" \
-                                 "$primary-color-darken:darken(#{color}, 10%);" +
+                                 "$primary-color-lighten:#{lighten_color};" \
+                                 "$primary-color-darken:#{darken_color};" +
                                  @file_contents, syntax: :scss).render
 
     respond_to do |format|

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

@@ -33,14 +33,21 @@
       <div class="mb-7 form-group">
         <label class="form-label"><%= t("administrator.site_settings.color.title") %></label>
         <label class="form-label text-muted"><%= t("administrator.site_settings.color.info") %></label>
-        <div class="row gutters-xs">
-          <div class="col-auto">
-            <input id="coloring-path" value="<%= admin_coloring_path %>" hidden>
-            <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>
+          <div class="color-inputs">
+            <input id="coloring-path-regular" type="hidden" value="<%= admin_coloring_path%>">
+            <input id="coloring-path-lighten" type="hidden" value="<%= admin_coloring_lighten_path%>">
+            <input id="coloring-path-darken" type="hidden" value="<%= admin_coloring_darken_path%>">
+
+            <div id="colorinput-regular" class="btn primary-regular mr-3">
+              <%= t("administrator.site_settings.color.regular") %>
+            </div>
+
+            <div id="colorinput-lighten" class="btn primary-lighten mr-3">
+              <%= t("administrator.site_settings.color.lighten") %>
+            </div>
+
+            <div id="colorinput-darken" class="btn primary-darken">
+              <%= t("administrator.site_settings.color.darken") %>
             </div>
           </div>
         </div>

config/application.rb

@@ -116,6 +116,12 @@ module Greenlight
     # Default primary color if the user does not specify one
     config.primary_color_default = "#467fcf"
 
+    # Default primary color lighten if the user does not specify one
+    config.primary_color_lighten_default = "#e8eff9"
+
+    # Default primary color darken if the user does not specify one
+    config.primary_color_darken_default = "#316cbe"
+
     # Default registration method if the user does not specify one
     config.registration_method_default = config.registration_methods[:open]
 

config/locales/en.yml

@@ -29,8 +29,11 @@ en:
         placeholder: Image Url...
         title: Branding Image
       color:
-        info: Change the primary color used across the website
+        info: Changing the Regular Color will change both Lighten and Darken. Lighten and Darken can then be changed individually
         title: Primary Color
+        regular: Regular
+        lighten: Lighten
+        Darken: Darken
       registration:
         info: Change the way that users register to the website
         title: Registration Method

config/routes.rb

@@ -39,6 +39,8 @@ Rails.application.routes.draw do
   scope '/admins' do
     post '/branding', to: 'admins#branding', as: :admin_branding
     post '/coloring', to: 'admins#coloring', as: :admin_coloring
+    post '/coloring_lighten', to: 'admins#coloring_lighten', as: :admin_coloring_lighten
+    post '/coloring_darken', to: 'admins#coloring_darken', as: :admin_coloring_darken
     post '/signup', to: 'admins#signup', as: :admin_signup
     get '/edit/:user_uid', to: 'admins#edit_user', as: :admin_edit_user
     post '/promote/:user_uid', to: 'admins#promote', as: :admin_promote

spec/controllers/admins_controller_spec.rb

@@ -185,7 +185,7 @@ describe AdminsController, type: :controller do
         allow_any_instance_of(User).to receive(:greenlight_account?).and_return(true)
 
         @request.session[:user_id] = @admin.id
-        primary_color = "#000000"
+        primary_color = Faker::Color.hex_color
 
         post :coloring, params: { color: primary_color }
 
@@ -194,6 +194,36 @@ describe AdminsController, type: :controller do
         expect(feature[:value]).to eq(primary_color)
         expect(response).to redirect_to(admins_path)
       end
+
+      it "changes the primary-lighten on the page" do
+        allow(Rails.configuration).to receive(:loadbalanced_configuration).and_return(true)
+        allow_any_instance_of(User).to receive(:greenlight_account?).and_return(true)
+
+        @request.session[:user_id] = @admin.id
+        primary_color = Faker::Color.hex_color
+
+        post :coloring_lighten, params: { color: primary_color }
+
+        feature = Setting.find_by(provider: "provider1").features.find_by(name: "Primary Color Lighten")
+
+        expect(feature[:value]).to eq(primary_color)
+        expect(response).to redirect_to(admins_path)
+      end
+
+      it "changes the primary-darken on the page" do
+        allow(Rails.configuration).to receive(:loadbalanced_configuration).and_return(true)
+        allow_any_instance_of(User).to receive(:greenlight_account?).and_return(true)
+
+        @request.session[:user_id] = @admin.id
+        primary_color = Faker::Color.hex_color
+
+        post :coloring_darken, params: { color: primary_color }
+
+        feature = Setting.find_by(provider: "provider1").features.find_by(name: "Primary Color Darken")
+
+        expect(feature[:value]).to eq(primary_color)
+        expect(response).to redirect_to(admins_path)
+      end
     end
 
     context "POST #registration_method" do

vendor/assets/stylesheets/colorpicker.scss

@@ -74,13 +74,13 @@
 	position: absolute;
 	font-size: 10px;
 	font-family: Arial, Helvetica, sans-serif;
-	color: #898989;
+	color: white;
 	top: 4px;
 	right: 11px;
 	text-align: right;
 	margin: 0;
 	padding: 0;
-	height: 11px;
+	height: 14px;
 }
 .colorpicker_hex {
 	position: absolute;