From 9638ebcbc531760259b80b56122326ee3f445c89 Mon Sep 17 00:00:00 2001 From: farhatahmad <35435341+farhatahmad@users.noreply.github.com> Date: Wed, 22 May 2019 13:34:37 -0400 Subject: [PATCH] GRN2-134: Added Color Input for lighten and darken (#529) * Added Color Input for lighten and darken * rspec --- app/assets/javascripts/admins.js | 61 ++++++++++++------ .../utilities/_primary_themes.scss | 25 +++++++ app/controllers/admins_controller.rb | 15 ++++- app/controllers/concerns/themer.rb | 47 ++++++++++++++ app/controllers/themes_controller.rb | 7 +- .../admin_settings/_site_settings.html.erb | 23 ++++--- config/application.rb | 6 ++ config/locales/en.yml | 5 +- config/routes.rb | 2 + spec/controllers/admins_controller_spec.rb | 32 ++++++++- .../colourPicker/colorpicker_submit.png | Bin 984 -> 5030 bytes vendor/assets/stylesheets/colorpicker.scss | 4 +- 12 files changed, 192 insertions(+), 35 deletions(-) create mode 100644 app/controllers/concerns/themer.rb diff --git a/app/assets/javascripts/admins.js b/app/assets/javascripts/admins.js index 4d5da355..71b7cad1 100644 --- a/app/assets/javascripts/admins.js +++ b/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]); +} diff --git a/app/assets/stylesheets/utilities/_primary_themes.scss b/app/assets/stylesheets/utilities/_primary_themes.scss index 12ae6fe0..2a6cabc4 100644 --- a/app/assets/stylesheets/utilities/_primary_themes.scss +++ b/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; +} \ No newline at end of file diff --git a/app/controllers/admins_controller.rb b/app/controllers/admins_controller.rb index 6e206b49..97b03f0d 100644 --- a/app/controllers/admins_controller.rb +++ b/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 diff --git a/app/controllers/concerns/themer.rb b/app/controllers/concerns/themer.rb new file mode 100644 index 00000000..45e5a615 --- /dev/null +++ b/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 . + +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 diff --git a/app/controllers/themes_controller.rb b/app/controllers/themes_controller.rb index 812a3aa4..2f26c7f3 100644 --- a/app/controllers/themes_controller.rb +++ b/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| diff --git a/app/views/shared/admin_settings/_site_settings.html.erb b/app/views/shared/admin_settings/_site_settings.html.erb index 660cde17..93e81488 100644 --- a/app/views/shared/admin_settings/_site_settings.html.erb +++ b/app/views/shared/admin_settings/_site_settings.html.erb @@ -33,14 +33,21 @@
-
-
- - -
- - - +
+ + + + +
+ <%= t("administrator.site_settings.color.regular") %> +
+ +
+ <%= t("administrator.site_settings.color.lighten") %> +
+ +
+ <%= t("administrator.site_settings.color.darken") %>
diff --git a/config/application.rb b/config/application.rb index 9cfdef7d..b09f714e 100644 --- a/config/application.rb +++ b/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] diff --git a/config/locales/en.yml b/config/locales/en.yml index 987f31e4..68f4a159 100755 --- a/config/locales/en.yml +++ b/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 diff --git a/config/routes.rb b/config/routes.rb index e3ca5d3d..3801a8ab 100644 --- a/config/routes.rb +++ b/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 diff --git a/spec/controllers/admins_controller_spec.rb b/spec/controllers/admins_controller_spec.rb index c476821b..7359092c 100644 --- a/spec/controllers/admins_controller_spec.rb +++ b/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 diff --git a/vendor/assets/images/colourPicker/colorpicker_submit.png b/vendor/assets/images/colourPicker/colorpicker_submit.png index 7f4c0825f53cc4faba8fc9e043502276765da1f5..05a46f476882a54485fcc795a65a7c9d6339f0f1 100644 GIT binary patch literal 5030 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 vd}vV?#qlwN4