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

Merge pull request #805 from Retrospring/feature/input-placeholder-theming

This commit is contained in:
Andreas Nedbal 2022-11-18 23:21:19 +01:00 committed by GitHub
parent 88375f7d21 d3bfbff30a
commit 37fa0b82a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 64 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ class Settings::ThemeController < ApplicationController
raised_background raised_accent
background_color body_text
muted_text input_color
input_text
input_text input_placeholder
])
if current_user.theme.nil?

63
app/helpers/theme_helper.rb
View File

@ -1,26 +1,29 @@
# frozen_string_literal: true
module ThemeHelper
ATTRIBUTE_MAP = {
'primary_color' => 'primary',
'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' => 'raised-bg',
'raised_accent' => 'raised-accent',
'background_color' => 'background',
'body_text' => 'body-text',
'input_color' => 'input-bg',
'input_text' => 'input-text',
'muted_text' => 'muted-text'
"primary_color" => "primary",
"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" => "raised-bg",
"raised_accent" => "raised-accent",
"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
@ -33,7 +36,7 @@ module ThemeHelper
theme.attributes.each do |k, v|
next unless ATTRIBUTE_MAP.key?(k)
if k.include? 'text'
if k.include?("text") || k.include?("placeholder")
hex = get_hex_color_from_theme_value(v)
body += "\t--#{ATTRIBUTE_MAP[k]}: #{get_decimal_triplet_from_hex(hex)};\n"
else
@ -42,7 +45,7 @@ module ThemeHelper
end
body += "\t--turbolinks-progress-color: ##{lighten(theme.primary_color)}\n"
body += '}'
body += "}"
content_tag(:style, body)
end
@ -52,7 +55,7 @@ module ThemeHelper
if theme
theme.theme_color
else
'#5e35b1'
"#5e35b1"
end
end
@ -61,7 +64,7 @@ module ThemeHelper
if theme
theme.mobile_theme_color
else
'#f0edf4'
"#f0edf4"
end
end
@ -92,12 +95,12 @@ module ThemeHelper
end
def get_hex_color_from_theme_value(value)
("0000000#{value.to_s(16)}")[-6, 6]
"0000000#{value.to_s(16)}"[-6, 6]
end
def get_decimal_triplet_from_hex(value)
hexes = value.split(/(.{2})/).reject { |c| c.empty? }
hexes.map(&:hex).join(', ')
hexes = value.split(/(.{2})/).reject(&:empty?)
hexes.map(&:hex).join(", ")
end
def rgb_values_from_hex(value)
@ -109,10 +112,10 @@ module ThemeHelper
end
def rgb_to_hex(rgb_values)
rgb_values.map.with_index { |v, i| v << (2 - i) * 8 }.reduce(&:+).to_s(16)
rgb_values.map.with_index { |v, i| v << ((2 - i) * 8) }.reduce(&:+).to_s(16)
end
def lighten(value, amount = 0.25)
rgb_to_hex(rgb_values_from_hex(value).map { |v| [(v + 255 * amount).round, 255].min })
rgb_to_hex(rgb_values_from_hex(value).map { |v| [(v + (255 * amount)).round, 255].min })
end
end

5
app/javascript/retrospring/features/settings/theme.ts
View File

@ -36,6 +36,7 @@ const generateTheme = (payload: Record<string, string>): void => {
'body_text': 'body-text',
'input_color': 'input-bg',
'input_text': 'input-text',
'input_placeholder': 'input-placeholder',
'muted_text': 'muted-text'
};
@ -43,7 +44,7 @@ const generateTheme = (payload: Record<string, string>): void => {
(Object.keys(payload)).forEach((payloadKey) => {
if (themeAttributeMap[payloadKey]) {
if (themeAttributeMap[payloadKey].includes('text')) {
if (themeAttributeMap[payloadKey].includes('text') || themeAttributeMap[payloadKey].includes('placeholder')) {
const hex = getHexColorFromThemeValue(payload[payloadKey]);
body += `--${themeAttributeMap[payloadKey]}: ${getDecimalTripletsFromHex(hex)};\n`;
}
@ -111,4 +112,4 @@ export function themeSubmitHandler(): void {
Array.from(document.querySelectorAll('#update .color')).forEach((color: HTMLInputElement) => {
color.value = String(parseInt(color.value.substr(1, 6), 16));
});
}
}

1
app/javascript/styles/_variables.scss
View File

@ -97,6 +97,7 @@ $spacers: (
--body-text: 0, 0, 0;
--muted-text: 108, 117, 125;
--input-text: 0, 0, 0;
--input-placeholder: 108, 117, 125;
--turbolinks-progress-color: #a58adc; // --primary lightened by 25%
}

6
app/javascript/styles/overrides/_inputs.scss
View File

@ -9,10 +9,14 @@
border-color: var(--primary);
box-shadow: .5px 0 0 0.1rem var(--primary);
}
&::placeholder {
color: RGB(var(--input-placeholder));
}
}
.input-group-text {
color: RGB(var(--body-text));
background-color: var(--raised-accent);
border: 0;
}
}

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

@ -87,6 +87,14 @@
= f.text_field :input_color, class: "color", data: { default: 0xFFFFFF }
.col-sm-6
= f.text_field :input_text, class: "color", data: { default: 0x000000 }
.row
.col-sm-6
= f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D }
.col-sm-6
.form-group
%label Example Input
%input.form-control{ placeholder: "A test placeholder" }
.card
.card-body
%h2= t(".raised.heading")
@ -105,4 +113,4 @@
= f.primary
- provide(:title, generate_title(t(".title")))
- parent_layout "user/settings"
- parent_layout "user/settings"

11
db/migrate/20221114214508_add_input_placeholder_to_themes.rb Normal file
View File

@ -0,0 +1,11 @@
# frozen_string_literal: true
class AddInputPlaceholderToThemes < ActiveRecord::Migration[6.1]
def up
add_column :themes, :input_placeholder, :integer, default: 0x6C757D, null: false
end
def down
remove_column :themes, :input_placeholder
end
end

2
db/schema.rb
View File

@ -228,6 +228,7 @@ ActiveRecord::Schema.define(version: 2022_11_15_194933) do
t.integer "raised_accent", default: 16250871
t.integer "light_color", default: 16316922
t.integer "light_text", default: 0
t.integer "input_placeholder", default: 7107965, null: false
t.index ["user_id", "created_at"], name: "index_themes_on_user_id_and_created_at"
end
@ -294,7 +295,6 @@ ActiveRecord::Schema.define(version: 2022_11_15_194933) do
t.integer "otp_module", default: 0, null: false
t.boolean "privacy_lock_inbox", default: false
t.boolean "privacy_require_user", default: false
t.boolean "privacy_hide_social_graph", default: false
t.index ["confirmation_token"], name: "index_users_on_confirmation_token", unique: true
t.index ["email"], name: "index_users_on_email", unique: true
t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true