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 7f4c0825..05a46f47 100644 Binary files a/vendor/assets/images/colourPicker/colorpicker_submit.png and b/vendor/assets/images/colourPicker/colorpicker_submit.png differ diff --git a/vendor/assets/stylesheets/colorpicker.scss b/vendor/assets/stylesheets/colorpicker.scss index 57022942..c55437a2 100644 --- a/vendor/assets/stylesheets/colorpicker.scss +++ b/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;