From d7911e9486aa6dc0196c1be2b68882f7a0366a32 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Mon, 14 Nov 2022 23:11:09 +0100 Subject: [PATCH 1/5] Add input placeholder field to theme --- .../20221114214508_add_input_placeholder_to_themes.rb | 11 +++++++++++ db/schema.rb | 6 +++--- 2 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 db/migrate/20221114214508_add_input_placeholder_to_themes.rb 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 ebffd650..1ba38cf6 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: 2022_11_13_110942) do +ActiveRecord::Schema.define(version: 2022_11_14_214508) do # These are extensions that must be enabled in order to support this database enable_extension "plpgsql" @@ -228,6 +228,7 @@ ActiveRecord::Schema.define(version: 2022_11_13_110942) 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 @@ -292,9 +293,8 @@ ActiveRecord::Schema.define(version: 2022_11_13_110942) do t.datetime "export_created_at" t.string "otp_secret_key" t.integer "otp_module", default: 0, null: false - t.datetime "deleted_at" - t.boolean "privacy_require_user", default: false t.boolean "privacy_lock_inbox", default: false + t.boolean "privacy_require_user", 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 From 752d6cb987aeaf9465a58e5aed9b31476486cd1f Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Mon, 14 Nov 2022 23:11:23 +0100 Subject: [PATCH 2/5] Make input placeholder themable --- app/javascript/styles/_variables.scss | 1 + app/javascript/styles/overrides/_inputs.scss | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) 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 +} From 420a25872e0453a5f2787e8146ebfe5967821d5a Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Mon, 14 Nov 2022 23:12:39 +0100 Subject: [PATCH 3/5] Allow input placeholder in theme settings --- app/controllers/settings/theme_controller.rb | 2 +- app/views/settings/theme/edit.html.haml | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) 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/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" From f35d49e5753ed9c42d99707f8e79739f05c27ab0 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Mon, 14 Nov 2022 23:13:22 +0100 Subject: [PATCH 4/5] Properly handle placeholder fields in theme application --- app/helpers/theme_helper.rb | 3 ++- app/javascript/retrospring/features/settings/theme.ts | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 5ccb139a..4e99b6e7 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -20,6 +20,7 @@ module ThemeHelper 'body_text' => 'body-text', 'input_color' => 'input-bg', 'input_text' => 'input-text', + 'input_placeholder' => 'input-placeholder', 'muted_text' => 'muted-text' }.freeze @@ -33,7 +34,7 @@ module ThemeHelper theme.attributes.each do |k, v| next unless ATTRIBUTE_MAP.key?(k) - if k.include? 'text' + if k.include? 'text' or k.include? 'placeholder' hex = get_hex_color_from_theme_value(v) body += "\t--#{ATTRIBUTE_MAP[k]}: #{get_decimal_triplet_from_hex(hex)};\n" else 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 +} From 921f02c4c989c79a29e8421de6029b34b55086e4 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 15 Nov 2022 00:32:54 +0100 Subject: [PATCH 5/5] Fix lints in ThemeHelper --- app/helpers/theme_helper.rb | 64 +++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb index 4e99b6e7..d1956600 100644 --- a/app/helpers/theme_helper.rb +++ b/app/helpers/theme_helper.rb @@ -1,27 +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', - 'input_placeholder' => 'input-placeholder', - '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 @@ -34,7 +36,7 @@ module ThemeHelper theme.attributes.each do |k, v| next unless ATTRIBUTE_MAP.key?(k) - if k.include? 'text' or k.include? 'placeholder' + 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 @@ -43,7 +45,7 @@ module ThemeHelper end body += "\t--turbolinks-progress-color: ##{lighten(theme.primary_color)}\n" - body += '}' + body += "}" content_tag(:style, body) end @@ -53,7 +55,7 @@ module ThemeHelper if theme theme.theme_color else - '#5e35b1' + "#5e35b1" end end @@ -62,7 +64,7 @@ module ThemeHelper if theme theme.mobile_theme_color else - '#f0edf4' + "#f0edf4" end end @@ -93,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) @@ -110,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