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

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?

app/helpers/theme_helper.rb

@@ -1,26 +1,29 @@
+# frozen_string_literal: true
+
 module ThemeHelper
   ATTRIBUTE_MAP = {
-    'primary_color' => 'primary',
+    "primary_color"     => "primary",
-    'primary_text' => 'primary-text',
+    "primary_text"      => "primary-text",
-    'danger_color' => 'danger',
+    "danger_color"      => "danger",
-    'danger_text' => 'danger-text',
+    "danger_text"       => "danger-text",
-    'warning_color' => 'warning',
+    "warning_color"     => "warning",
-    'warning_text' => 'warning-text',
+    "warning_text"      => "warning-text",
-    'info_color' => 'info',
+    "info_color"        => "info",
-    'info_text' => 'info-text',
+    "info_text"         => "info-text",
-    'success_color' => 'success',
+    "success_color"     => "success",
-    'success_text' => 'success-text',
+    "success_text"      => "success-text",
-    'dark_color' => 'dark',
+    "dark_color"        => "dark",
-    'dark_text' => 'dark-text',
+    "dark_text"         => "dark-text",
-    'light_color' => 'light',
+    "light_color"       => "light",
-    'light_text' => 'light-text',
+    "light_text"        => "light-text",
-    'raised_background' => 'raised-bg',
+    "raised_background" => "raised-bg",
-    'raised_accent' => 'raised-accent',
+    "raised_accent"     => "raised-accent",
-    'background_color' => 'background',
+    "background_color"  => "background",
-    'body_text' => 'body-text',
+    "body_text"         => "body-text",
-    'input_color' => 'input-bg',
+    "input_color"       => "input-bg",
-    'input_text' => 'input-text',
+    "input_text"        => "input-text",
-    'muted_text' => 'muted-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 = value.split(/(.{2})/).reject(&:empty?)
-    hexes.map(&:hex).join(', ')
+    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

app/javascript/retrospring/features/settings/theme.ts

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

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

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

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"
+- parent_layout "user/settings"

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

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