diff --git a/app/controllers/settings/theme_controller.rb b/app/controllers/settings/theme_controller.rb index 22b702a2..14d6457b 100644 --- a/app/controllers/settings/theme_controller.rb +++ b/app/controllers/settings/theme_controller.rb @@ -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? diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 5ccb139a..d1956600 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -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 diff --git a/app/javascript/retrospring/features/settings/theme.ts b/app/javascript/retrospring/features/settings/theme.ts index 541e5ea6..d2c4602b 100644 --- a/app/javascript/retrospring/features/settings/theme.ts +++ b/app/javascript/retrospring/features/settings/theme.ts @@ -36,6 +36,7 @@ const generateTheme = (payload: Record): 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): 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)); }); -} \ No newline at end of file +} diff --git a/app/javascript/styles/_variables.scss b/app/javascript/styles/_variables.scss index afc864c4..9810883c 100644 --- a/app/javascript/styles/_variables.scss +++ b/app/javascript/styles/_variables.scss @@ -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% } diff --git a/app/javascript/styles/overrides/_inputs.scss b/app/javascript/styles/overrides/_inputs.scss index bb2c75ce..a1ef2007 100644 --- a/app/javascript/styles/overrides/_inputs.scss +++ b/app/javascript/styles/overrides/_inputs.scss @@ -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; -} \ No newline at end of file +} diff --git a/app/views/settings/theme/edit.html.haml b/app/views/settings/theme/edit.html.haml index 03623b73..51caa6fe 100644 --- a/app/views/settings/theme/edit.html.haml +++ b/app/views/settings/theme/edit.html.haml @@ -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" \ No newline at end of file +- parent_layout "user/settings" diff --git a/db/migrate/20221114214508_add_input_placeholder_to_themes.rb b/db/migrate/20221114214508_add_input_placeholder_to_themes.rb new file mode 100644 index 00000000..ca3d5687 --- /dev/null +++ b/db/migrate/20221114214508_add_input_placeholder_to_themes.rb @@ -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 diff --git a/db/schema.rb b/db/schema.rb index ea7dc831..907abcfd 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -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