FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1017 from Retrospring/feature/raised-texts 

Add new raised text and raised accent text theme fields
This commit is contained in:
Karina Kwiatek 2023-01-31 12:57:15 +01:00 committed by GitHub
parent 2008fe28fa 87aac34f16
commit 2517b1330a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 140 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/_variables.scss
View File

@ -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%
}

2
app/assets/stylesheets/components/_notifications.scss
View File

@ -42,7 +42,7 @@
& .dropdown-item:hover,
& .dropdown-item:active {
background: transparent;
color: RGB(var(--body-text));
color: RGB(var(--raised-text));
}
}

2
app/assets/stylesheets/overrides/_card.scss
View File

@ -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));
}

9
app/assets/stylesheets/overrides/_dropdown.scss
View File

@ -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;
}
}
}

3
app/assets/stylesheets/overrides/_list-group.scss
View File

@ -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);
}

37
app/controllers/settings/theme_controller.rb
View File

@ -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

46
app/helpers/theme_helper.rb
View File

@ -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

2
app/javascript/retrospring/utilities/theme.ts
View File

@ -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',

31
app/views/settings/theme/edit.html.haml
View File

@ -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

2
config/locales/activerecord.en.yml
View File

@ -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"

13
db/migrate/20230123214851_add_raised_and_accent_text_to_themes.rb Normal file
View File

@ -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

14
db/migrate/20230129194809_use_body_text_for_raised_texts_in_themes.rb Normal file
View File

@ -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

6
db/schema.rb
View File

@ -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

2
spec/factories/theme.rb
View File

@ -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

54
spec/lib/use_case/data_export/theme_spec.rb
View File

@ -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
}
}
)