diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index 54e661ab..26508487 100644 --- a/app/assets/stylesheets/_variables.scss +++ b/app/assets/stylesheets/_variables.scss @@ -125,6 +125,8 @@ $spacers: map-merge($rs-spacers, $spacers); --muted-text: 108, 117, 125; --input-text: 0, 0, 0; --input-placeholder: 108, 117, 125; + --raised-text: 0, 0, 0; + --raised-accent-text: 0, 0, 0; --turbolinks-progress-color: #a58adc; // --primary lightened by 25% } diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss index 53fa696e..14b3f443 100644 --- a/app/assets/stylesheets/components/_notifications.scss +++ b/app/assets/stylesheets/components/_notifications.scss @@ -42,7 +42,7 @@ & .dropdown-item:hover, & .dropdown-item:active { background: transparent; - color: RGB(var(--body-text)); + color: RGB(var(--raised-text)); } } diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss index 969f7876..5bbe85ee 100644 --- a/app/assets/stylesheets/overrides/_card.scss +++ b/app/assets/stylesheets/overrides/_card.scss @@ -4,6 +4,7 @@ margin-bottom: map.get($spacers, 3); box-shadow: $box-shadow-sm; background-color: var(--raised-bg); + color: RGB(var(--raised-text)); p:last-child { margin-bottom: 0; @@ -17,4 +18,5 @@ .card-header, .card-footer { background-color: var(--raised-accent); + color: RGB(var(--raised-accent-text)); } diff --git a/app/assets/stylesheets/overrides/_dropdown.scss b/app/assets/stylesheets/overrides/_dropdown.scss index 5d647c3b..524ee2b6 100644 --- a/app/assets/stylesheets/overrides/_dropdown.scss +++ b/app/assets/stylesheets/overrides/_dropdown.scss @@ -1,14 +1,14 @@ .dropdown-menu { - color: RGB(var(--body-text)); + color: RGB(var(--raised-text)); background-color: var(--raised-bg); box-shadow: $box-shadow-lg; border: none; } .dropdown-item { - color: RGB(var(--body-text)); + color: RGB(var(--raised-text)); - &.active, + &.active, &:active, &:active:hover { color: RGB(var(--primary-text)); @@ -16,6 +16,7 @@ } &:hover { + color: RGB(var(--raised-accent-text)); background-color: var(--raised-accent); } } @@ -32,4 +33,4 @@ .dropdown-menu--lists { max-width: 275px; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/overrides/_list-group.scss b/app/assets/stylesheets/overrides/_list-group.scss index 0ef6477b..29839dea 100644 --- a/app/assets/stylesheets/overrides/_list-group.scss +++ b/app/assets/stylesheets/overrides/_list-group.scss @@ -13,9 +13,10 @@ } .list-group-item-action { - color: RGB(var(--body-text)); + color: RGB(var(--raised-text)); &:hover, &:focus { + color: RGB(var(--raised-accent-text)); background-color: var(--raised-accent); } diff --git a/app/controllers/settings/theme_controller.rb b/app/controllers/settings/theme_controller.rb index 14d6457b..58829a67 100644 --- a/app/controllers/settings/theme_controller.rb +++ b/app/controllers/settings/theme_controller.rb @@ -8,22 +8,8 @@ class Settings::ThemeController < ApplicationController def edit; end def update - update_attributes = params.require(:theme).permit(%i[ - primary_color primary_text - danger_color danger_text - success_color success_text - warning_color warning_text - info_color info_text - dark_color dark_text - light_color light_text - raised_background raised_accent - background_color body_text - muted_text input_color - input_text input_placeholder - ]) - if current_user.theme.nil? - current_user.theme = Theme.new update_attributes + current_user.theme = Theme.new theme_attributes current_user.theme.user_id = current_user.id if current_user.theme.save @@ -31,7 +17,7 @@ class Settings::ThemeController < ApplicationController else flash[:error] = t(".error", errors: current_user.theme.errors.messages.flatten.join(" ")) end - elsif current_user.theme.update(update_attributes) + elsif current_user.theme.update(theme_attributes) flash[:success] = t(".success") else flash[:error] = t(".error", errors: current_user.theme.errors.messages.flatten.join(" ")) @@ -43,4 +29,23 @@ class Settings::ThemeController < ApplicationController current_user.theme.destroy! redirect_to edit_settings_theme_path end + + private + + def theme_attributes + params.require(:theme).permit(%i[ + primary_color primary_text + danger_color danger_text + success_color success_text + warning_color warning_text + info_color info_text + dark_color dark_text + light_color light_text + raised_background raised_accent + raised_text raised_accent_text + background_color body_text + muted_text input_color + input_text input_placeholder + ]) + end end diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 3b3cf1e9..4c1a735f 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -2,28 +2,30 @@ module ThemeHelper ATTRIBUTE_MAP = { - "primary_color" => %w[primary primary-rgb], - "primary_text" => "primary-text", - "danger_color" => "danger", - "danger_text" => "danger-text", - "warning_color" => "warning", - "warning_text" => "warning-text", - "info_color" => "info", - "info_text" => "info-text", - "success_color" => "success", - "success_text" => "success-text", - "dark_color" => "dark", - "dark_text" => "dark-text", - "light_color" => "light", - "light_text" => "light-text", - "raised_background" => %w[raised-bg raised-bg-rgb], - "raised_accent" => %w[raised-accent raised-accent-rgb], - "background_color" => "background", - "body_text" => "body-text", - "input_color" => "input-bg", - "input_text" => "input-text", - "input_placeholder" => "input-placeholder", - "muted_text" => "muted-text" + "primary_color" => %w[primary primary-rgb], + "primary_text" => "primary-text", + "danger_color" => "danger", + "danger_text" => "danger-text", + "warning_color" => "warning", + "warning_text" => "warning-text", + "info_color" => "info", + "info_text" => "info-text", + "success_color" => "success", + "success_text" => "success-text", + "dark_color" => "dark", + "dark_text" => "dark-text", + "light_color" => "light", + "light_text" => "light-text", + "raised_background" => %w[raised-bg raised-bg-rgb], + "raised_text" => "raised-text", + "raised_accent" => %w[raised-accent raised-accent-rgb], + "raised_accent_text" => "raised-accent-text", + "background_color" => "background", + "body_text" => "body-text", + "input_color" => "input-bg", + "input_text" => "input-text", + "input_placeholder" => "input-placeholder", + "muted_text" => "muted-text" }.freeze def render_theme diff --git a/app/javascript/retrospring/utilities/theme.ts b/app/javascript/retrospring/utilities/theme.ts index 7ee601b8..e96da245 100644 --- a/app/javascript/retrospring/utilities/theme.ts +++ b/app/javascript/retrospring/utilities/theme.ts @@ -14,7 +14,9 @@ export const THEME_MAPPING = { 'light_color': 'light', 'light_text': 'light-text', 'raised_background': 'raised-bg', + 'raised_text': 'raised-text', 'raised_accent': 'raised-accent', + 'raised_accent_text': 'raised-accent-text', 'background_color': 'background', 'body_text': 'body-text', 'input_color': 'input-bg', diff --git a/app/views/settings/theme/edit.html.haml b/app/views/settings/theme/edit.html.haml index 060c3ebf..a5064c23 100644 --- a/app/views/settings/theme/edit.html.haml +++ b/app/views/settings/theme/edit.html.haml @@ -21,6 +21,23 @@ = f.text_field :background_color, class: "color", data: { default: 0xF0EDF4, theme_target: "color", action: "theme#updatePreview" } .col-sm-6 = f.text_field :body_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" } + .card + .card-body + %h2= t(".raised.heading") + %p= t(".raised.body") + + .row + .col-sm-6 + = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" } + .col-sm-6 + = f.text_field :raised_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" } + .row + .col-sm-6 + = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7, theme_target: "color", action: "theme#updatePreview" } + .col-sm-6 + = f.text_field :raised_accent_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" } + .card-footer + %p= t(".raised.accent.example") .card .card-body %h2= t(".colors.heading") @@ -93,23 +110,11 @@ .row .col-sm-6 - = f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D, theme_target: "color" } + = f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D, theme_target: "color", action: "theme#updatePreview" } .col-sm-6 .form-group %label.form-label Example Input %input.form-control{ placeholder: "A test placeholder" } - .card - .card-body - %h2= t(".raised.heading") - %p= t(".raised.body") - - .row - .col-sm-6 - = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF, theme_target: "color" } - .col-sm-6 - = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7, theme_target: "color" } - .card-footer - %p= t(".raised.accent.example") .card .card-body .pull-left diff --git a/config/locales/activerecord.en.yml b/config/locales/activerecord.en.yml index c14e12b4..2b1b178e 100644 --- a/config/locales/activerecord.en.yml +++ b/config/locales/activerecord.en.yml @@ -49,7 +49,9 @@ en: primary_color: "Primary colour" primary_text: "Primary text colour" raised_accent: "Raised accent colour" + raised_accent_text: "Raised accent text colour" raised_background: "Raised background colour" + raised_text: "Raised text colour" success_color: "Success colour" success_text: "Success text colour" warning_color: "Warning colour" diff --git a/db/migrate/20230123214851_add_raised_and_accent_text_to_themes.rb b/db/migrate/20230123214851_add_raised_and_accent_text_to_themes.rb new file mode 100644 index 00000000..596b0858 --- /dev/null +++ b/db/migrate/20230123214851_add_raised_and_accent_text_to_themes.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +class AddRaisedAndAccentTextToThemes < ActiveRecord::Migration[6.1] + def up + add_column :themes, :raised_text, :integer, default: 0x000000, null: false + add_column :themes, :raised_accent_text, :integer, default: 0x000000, null: false + end + + def down + remove_column :themes, :raised_text + remove_column :themes, :raised_accent_text + end +end diff --git a/db/migrate/20230129194809_use_body_text_for_raised_texts_in_themes.rb b/db/migrate/20230129194809_use_body_text_for_raised_texts_in_themes.rb new file mode 100644 index 00000000..7504cf5c --- /dev/null +++ b/db/migrate/20230129194809_use_body_text_for_raised_texts_in_themes.rb @@ -0,0 +1,14 @@ +# frozen_string_literal: true + +class UseBodyTextForRaisedTextsInThemes < ActiveRecord::Migration[6.1] + def up + execute <<~SQUIRREL + UPDATE themes + SET raised_text = body_text, + raised_accent_text = body_text + WHERE body_text != 0; + SQUIRREL + end + + def down; end +end diff --git a/db/schema.rb b/db/schema.rb index 45b1005d..82edbdda 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema.define(version: 2023_01_08_114333) do +ActiveRecord::Schema.define(version: 2023_01_29_194809) do # These are extensions that must be enabled in order to support this database enable_extension "plpgsql" @@ -181,7 +181,7 @@ ActiveRecord::Schema.define(version: 2023_01_08_114333) do t.datetime "created_at", null: false t.datetime "updated_at", null: false t.index ["name", "resource_type", "resource_id"], name: "index_roles_on_name_and_resource_type_and_resource_id" - t.index ["resource_type", "resource_id"], name: "index_roles_on_resource" + t.index ["resource_type", "resource_id"], name: "index_roles_on_resource_type_and_resource_id" end create_table "rpush_apps", force: :cascade do |t| @@ -301,6 +301,8 @@ ActiveRecord::Schema.define(version: 2023_01_08_114333) do t.integer "light_color", default: 16316922 t.integer "light_text", default: 0 t.integer "input_placeholder", default: 7107965, null: false + t.integer "raised_text", default: 0, null: false + t.integer "raised_accent_text", default: 0, null: false t.index ["user_id", "created_at"], name: "index_themes_on_user_id_and_created_at" end diff --git a/spec/factories/theme.rb b/spec/factories/theme.rb index 4339377a..ae357dd6 100644 --- a/spec/factories/theme.rb +++ b/spec/factories/theme.rb @@ -15,12 +15,14 @@ FactoryBot.define do dark_color { 6_710_886 } dark_text { 15_658_734 } raised_background { 16_777_215 } + raised_text { 3_355_443 } background_color { 13_026_795 } body_text { 3_355_443 } muted_text { 3_355_443 } input_color { 15_789_556 } input_text { 6_710_886 } raised_accent { 16_250_871 } + raised_accent_text { 3_355_443 } light_color { 16_316_922 } light_text { 0 } end diff --git a/spec/lib/use_case/data_export/theme_spec.rb b/spec/lib/use_case/data_export/theme_spec.rb index af997cc8..11156488 100644 --- a/spec/lib/use_case/data_export/theme_spec.rb +++ b/spec/lib/use_case/data_export/theme_spec.rb @@ -22,32 +22,34 @@ describe UseCase::DataExport::Theme, :data_export do expect(json_file("theme.json")).to eq( { theme: { - id: theme.id, - user_id: user.id, - primary_color: 9342168, - primary_text: 16777215, - danger_color: 14257035, - danger_text: 16777215, - success_color: 12573067, - success_text: 16777215, - warning_color: 14261899, - warning_text: 16777215, - info_color: 9165273, - info_text: 16777215, - dark_color: 6710886, - dark_text: 15658734, - raised_background: 16777215, - background_color: 13026795, - body_text: 3355443, - muted_text: 3355443, - created_at: "2022-12-10T13:37:42.000Z", - updated_at: "2022-12-10T13:37:42.000Z", - input_color: 15789556, - input_text: 6710886, - raised_accent: 16250871, - light_color: 16316922, - light_text: 0, - input_placeholder: 7107965 + id: theme.id, + user_id: user.id, + primary_color: 9342168, + primary_text: 16777215, + danger_color: 14257035, + danger_text: 16777215, + success_color: 12573067, + success_text: 16777215, + warning_color: 14261899, + warning_text: 16777215, + info_color: 9165273, + info_text: 16777215, + dark_color: 6710886, + dark_text: 15658734, + raised_background: 16777215, + raised_text: 3355443, + background_color: 13026795, + body_text: 3355443, + muted_text: 3355443, + created_at: "2022-12-10T13:37:42.000Z", + updated_at: "2022-12-10T13:37:42.000Z", + input_color: 15789556, + input_text: 6710886, + raised_accent: 16250871, + raised_accent_text: 3355443, + light_color: 16316922, + light_text: 0, + input_placeholder: 7107965 } } )