From 880429f5f92d509cde682dd90cd48693d637af47 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 5 May 2020 02:02:16 +0200 Subject: [PATCH] Add new fields for themes - In the settings view - In the model validation - In the controller parameter permissions - In the CoffeeScript/Ruby helpers --- app/assets/javascripts/settings.coffee | 12 ++++++-- app/controllers/user_controller.rb | 12 ++++---- app/helpers/theme_helper.rb | 12 ++++++-- app/models/theme.rb | 12 ++++---- app/views/settings/_theme.haml | 42 ++++++++++++++++++++------ 5 files changed, 62 insertions(+), 28 deletions(-) diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee index 09dabb8b..13ff10ed 100644 --- a/app/assets/javascripts/settings.coffee +++ b/app/assets/javascripts/settings.coffee @@ -152,11 +152,17 @@ generateTheme = (payload) -> 'info_text': 'info-text', 'success_color': 'success', 'success_text': 'success-text', - 'panel_color': 'raised-bg', + 'dark_color': 'dark', + 'dark_text': 'dark-text', + 'light_color': 'light', + 'light_text': 'light-text', + 'raised_background': 'raised-bg', + 'raised_accent': 'raised-accent', 'background_color': 'background', - 'background_text': 'body-text', + 'body_text': 'body-text', 'input_color': 'input-bg', - 'input_text': 'input-text' + 'input_text': 'input-text', + 'muted_text': 'muted-text' } body = ":root {\n" diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb index ff7ca87d..507fb93a 100644 --- a/app/controllers/user_controller.rb +++ b/app/controllers/user_controller.rb @@ -117,12 +117,12 @@ class UserController < ApplicationController :success_color, :success_text, :warning_color, :warning_text, :info_color, :info_text, - :default_color, :default_text, - :panel_color, :panel_text, - :link_color, :background_color, - :background_text, :background_muted, - :input_color, :input_text, - :outline_color + :dark_color, :dark_text, + :light_color, :light_text, + :raised_background, :raised_accent, + :background_color, :body_text, + :muted_text, :input_color, + :input_text ]) if current_user.theme.nil? diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index c4a689f4..99e1ce7d 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -11,11 +11,17 @@ module ThemeHelper 'info_text' => 'info-text', 'success_color' => 'success', 'success_text' => 'success-text', - 'panel_color' => 'raised-bg', + 'dark_color' => 'dark', + 'dark_text' => 'dark-text', + 'light_color' => 'light', + 'light_text' => 'light-text', + 'raised_background' => 'raised-bg', + 'raised_accent' => 'raised-accent', 'background_color' => 'background', - 'background_text' => 'body-text', + 'body_text' => 'body-text', 'input_color' => 'input-bg', - 'input_text' => 'input-text' + 'input_text' => 'input-text', + 'muted_text' => 'muted-text' } theme = get_active_theme diff --git a/app/models/theme.rb b/app/models/theme.rb index 32479e2a..bcdc5d05 100644 --- a/app/models/theme.rb +++ b/app/models/theme.rb @@ -8,12 +8,12 @@ class Theme < ApplicationRecord :success_color, :success_text, :warning_color, :warning_text, :info_color, :info_text, - :default_color, :default_text, - :panel_color, :panel_text, - :link_color, :background_color, - :background_text, :background_muted, - :input_color, :input_text, - :outline_color, + :dark_color, :dark_text, + :light_color, :light_text, + :raised_background, :raised_accent, + :background_color, :body_text, + :muted_text, :input_color, + :input_text, greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF, allow_nil: true, only_integer: true diff --git a/app/views/settings/_theme.haml b/app/views/settings/_theme.haml index da0bd20d..69896805 100644 --- a/app/views/settings/_theme.haml +++ b/app/views/settings/_theme.haml @@ -18,9 +18,9 @@ Here you'll find general page values that are basically visible all across the page. .row .col-sm-6 - = f.text_field :background_color, class: 'color', data: {default: 0xFFFFFF} + = f.text_field :background_color, class: 'color', data: {default: 0xF0EDF4} .col-sm-6 - = f.text_field :background_text, class: 'color', data: {default: 0x222222} + = f.text_field :body_text, class: 'color', data: {default: 0x000000} .card .card-body %h2 Forms and Inputs @@ -38,9 +38,11 @@ Raised content basically describes all the different boxes and panels you can see across the site. .row .col-sm-6 - = f.text_field :panel_color, class: 'color', data: {default: 0xF9F9F9} + = f.text_field :raised_background, class: 'color', data: {default: 0xFFFFFF} .col-sm-6 - = f.text_field :panel_text, class: 'color', data: {default: 0x151515} + = f.text_field :raised_accent, class: 'color', data: {default: 0xF7F7F7} + .card-footer + %p Some text on top of a accented area on a raised element! .card .card-body %h2 Colors @@ -74,7 +76,7 @@ A simple primary alert—check it out! .row .col-sm-6 - = f.text_field :danger_color, class: 'color', data: {default: 0xFF0039} + = f.text_field :danger_color, class: 'color', data: {default: 0xDC3545} .col-sm-6 = f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF} .col-sm-12 @@ -82,7 +84,7 @@ A simple danger alert—check it out! .row .col-sm-6 - = f.text_field :warning_color, class: 'color', data: {default: 0xFF7518} + = f.text_field :warning_color, class: 'color', data: {default: 0xFFC107} .col-sm-6 = f.text_field :warning_text, class: 'color', data: {default: 0xFFFFFF} .col-sm-12 @@ -90,7 +92,7 @@ A simple warning alert—check it out! .row .col-sm-6 - = f.text_field :info_color, class: 'color', data: {default: 0x9954BB} + = f.text_field :info_color, class: 'color', data: {default: 0x17A2B8} .col-sm-6 = f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF} .col-sm-12 @@ -98,16 +100,36 @@ A simple info alert—check it out! .row .col-sm-6 - = f.text_field :success_color, class: 'color', data: {default: 0x3FB618} + = f.text_field :success_color, class: 'color', data: {default: 0x28A745} .col-sm-6 = f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF} .col-sm-12 .alert.alert-success A simple success alert—check it out! + .row + .col-sm-6 + = f.text_field :dark_color, class: 'color', data: {default: 0x343A40} + .col-sm-6 + = f.text_field :dark_text, class: 'color', data: {default: 0xFFFFFF} + .col-sm-12 + %button.btn.btn-dark.mb-3 A dark button + .row + .col-sm-6 + = f.text_field :light_color, class: 'color', data: {default: 0xF8F9FA} + .col-sm-6 + = f.text_field :light_text, class: 'color', data: {default: 0xFFFFFF} + .col-sm-12 + %button.btn.btn-light.mb-3 A light button + .row + .col-sm-6 + = f.text_field :muted_text, class: 'color', data: {default: 0x6C757D} + .col-sm-6 + %p.pt-4.text-muted Some muted text .card .card-body .pull-left = f.submit t('views.actions.save'), class: 'btn btn-primary' - .pull-right - = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger" + - if current_user.theme + .pull-right + = button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"