Render custom color scheme via css action; iterate on color scheme ux

Author: rossta

app/controllers/application_controller.rb

@@ -2,20 +2,25 @@ class ApplicationController < ActionController::Base
   include Erroring
   include Authentication
 
-  before_action :set_color_theme
+  def custom_color_scheme_params = preview_color_scheme_id ? {settings: {color_scheme_id: preview_color_scheme_id}} : {}
+  helper_method :custom_color_scheme_params
 
-  def set_color_theme
-    @color_scheme = find_color_theme
+  def custom_color_scheme?
+    preview_color_scheme_id.present? || session_color_scheme_id.present?
   end
+  helper_method :custom_color_scheme?
 
-  def find_color_theme
-    if session[:color_scheme_id]
-      begin
-        return ColorScheme.find(session[:color_scheme_id])
-      rescue ActiveRecord::RecordNotFound
-      end
-    end
+  def preview_color_scheme_id = params.dig(:settings, :color_scheme_id)
 
-    ColorScheme.cached_default
+  def session_color_scheme_id = session[:color_scheme_id]
+
+  def find_color_scheme
+    preview_color_scheme || session_color_scheme || default_color_scheme
   end
+
+  def preview_color_scheme = preview_color_scheme_id && ColorScheme.find(preview_color_scheme_id)
+
+  def session_color_scheme = session_color_scheme_id && ColorScheme.find(session_color_scheme_id)
+
+  def default_color_scheme = @default_color_scheme ||= ColorScheme.cached_default
 end

app/controllers/settings/color_schemes_controller.rb

@@ -1,15 +1,21 @@
 class Settings::ColorSchemesController < ApplicationController
   def show
-    @color_scheme = selected_color_scheme || session_color_scheme || ColorScheme.cached_default
-    @settings = Settings.new(color_scheme: @color_scheme)
-
-    render ColorSchemes::ShowView.new(
-      settings: @settings,
-      fallback_color_scheme: session_color_scheme || ColorScheme.cached_default,
-      curated_color_schemes: ColorScheme.cached_curated,
-      selected: selected_color_scheme_id.present?,
-      saved: session[:color_scheme_id].presence == @color_scheme.id
-    )
+    @color_scheme = find_color_scheme
+
+    respond_to do |format|
+      format.html {
+        render ColorSchemes::ShowView.new(
+          settings: Settings.new(color_scheme: @color_scheme),
+          curated_color_schemes: ColorScheme.cached_curated,
+          preview_color_scheme: preview_color_scheme,
+          session_color_scheme: session_color_scheme,
+          default_color_scheme: default_color_scheme
+        )
+      }
+      format.css {
+        render ColorSchemes::Css.new(color_scheme: @color_scheme), layout: false
+      }
+    end
   end
 
   def update
@@ -30,9 +36,11 @@ def update
 
   private
 
-  def selected_color_scheme_id = params.dig(:settings, :color_scheme_id) || session[:color_scheme_id]
+  def preview_color_scheme_id = params.dig(:settings, :color_scheme_id)
+
+  def default_color_scheme = @default_color_scheme ||= ColorScheme.cached_default
 
   def session_color_scheme = session[:color_scheme_id] && ColorScheme.find(session[:color_scheme_id])
 
-  def selected_color_scheme = selected_color_scheme_id && ColorScheme.find(selected_color_scheme_id)
+  def preview_color_scheme = preview_color_scheme_id && ColorScheme.find(preview_color_scheme_id)
 end

app/views/application/theme/_color.html.erb

@@ -1,5 +1,7 @@
-<style>
-  :root {
-    <%= render ColorSchemes::Css.new(color_scheme: @color_scheme || ColorScheme.find_or_create_default) %>
-  }
-</style>
+<% if custom_color_scheme? %>
+  <%= stylesheet_link_tag settings_color_scheme_path(**custom_color_scheme_params, format: :css) %>
+<% else %>
+  <style>
+    <%= render ColorSchemes::Css.new(color_scheme: ColorScheme.cached_default) %>
+  </style>
+<% end %>

app/views/color_schemes/show_view.rb

@@ -6,13 +6,19 @@ class ColorSchemes::ShowView < ApplicationView
   include Phlex::Rails::Helpers::ButtonTo
   include Phlex::Rails::Helpers::ContentFor
 
-  def initialize(settings:, fallback_color_scheme: nil, curated_color_schemes: [], selected: false, saved: false)
+  def initialize(
+    settings:,
+    curated_color_schemes: [],
+    default_color_scheme: ColorScheme.cached_default,
+    preview_color_scheme: nil,
+    session_color_scheme: nil
+  )
     @settings = settings
     @color_scheme = settings.color_scheme
-    @fallback_color_scheme = fallback_color_scheme
     @curated_color_schemes = curated_color_schemes
-    @selected = selected
-    @saved = saved
+    @preview_color_scheme = preview_color_scheme
+    @session_color_scheme = session_color_scheme
+    @default_color_scheme = default_color_scheme
   end
 
   def view_template
@@ -21,9 +27,9 @@ def view_template
     end
     render Pages::Header.new(title: "Theme: Color")
     div(class: "section-content container py-gap") do
-      if @saved || @selected
+      if previewing? || preserving?
         h3 do
-          plain "You are now #{@saved ? "using" : "previewing"} the"
+          plain "You are now #{(@color_scheme == @session_color_scheme) ? "using" : "previewing"} the"
           whitespace
           span(class: "emphasis") { @color_scheme.display_name }
           whitespace
@@ -36,81 +42,102 @@ def view_template
       p { "You can preview and save your desired color scheme for this site. We have curated some options for you below." }
 
       div(class: "flex items-center") do
-        span(class: "mr-2 text-small") { "Preview" }
-
-        form_with(model: @settings, url: url_for, method: :get) do |f|
-          fieldset do
-            f.select(
-              :color_scheme_id,
-              @curated_color_schemes.map { |cs| [cs.display_name, cs.id] },
-              {
-                prompt: "Pick one!",
-                selected: @selected && @color_scheme.id
-              },
-              # requestSubmit and Turbo
-              # https://stackoverflow.com/questions/68624668/how-can-i-submit-a-form-on-input-change-with-turbo-streams
-              onchange: "this.form.requestSubmit()",
-              class: "mr-2"
-            )
-          end
-        end
+        preview_select
 
         span(class: "mr-2 text-small") { "OR" }
 
         link_to "I feel lucky!",
           settings_color_scheme_path(settings: {color_scheme_id: @curated_color_schemes.sample.id}),
           class: "button secondary mr-2"
 
-        if @selected && @color_scheme != @fallback_color_scheme
+        if previewing? && (@color_scheme != (@session_color_scheme || @default_color_scheme))
           span(class: "mr-2 text-small") { "OR" }
 
-          button_to "Reset preview",
-            settings_color_scheme_path(settings: {color_scheme_id: @fallback_color_scheme.id}),
-            method: :patch,
+          link_to "Reset preview",
+            settings_color_scheme_path,
             class: "button tertiary mr-2"
         end
       end
 
-      if @selected
-        div(class: "flex items-center") do
-          span(class: "mr-2 text-small") { plain "Save" }
+      if previewing?
+        h3 { @preview_color_scheme.display_name }
+        p { "You are previewing #{@preview_color_scheme.display_name}." }
+        color_swatches(@preview_color_scheme)
+        p do
+          plain "Click"
+          whitespace
+          span(class: "emphasis") { "Save" }
+          whitespace
+          plain "to set #{@preview_color_scheme.display_name} as your new color scheme."
+        end
+        save_preview_button
+      end
 
-          button_to "Save this color scheme",
-            settings_color_scheme_path(settings: {color_scheme_id: @color_scheme.id}),
-            method: :patch,
-            class: "button primary mr-2"
+      if preserving?
+        h3 { @session_color_scheme.display_name }
+        p { "You have saved #{@session_color_scheme.display_name} as your personal color scheme." }
+        color_swatches(@session_color_scheme)
+      end
 
-          span(class: "mr-2 text-small") { unsafe_raw "&bull;" }
+      h3 { @default_color_scheme.display_name }
+      p { "This is the default color scheme for this site." }
+      color_swatches(@default_color_scheme)
+      if preserving?
+        p { "You can delete #{@session_color_scheme.display_name} as your color scheme choice and go back to the default color scheme by clicking the Delete button below." }
+        unsave_button
+      end
+    end
+  end
 
-          button_to "Reset to default",
-            settings_color_scheme_path(settings: {color_scheme_id: ColorScheme.cached_default.id}),
-            method: :patch,
-            class: "button tertiary mr-2"
-        end
+  def preview_select
+    form_with(model: @settings, url: url_for, method: :get) do |f|
+      fieldset do
+        f.select(
+          :color_scheme_id,
+          @curated_color_schemes.sort_by { |cs| cs.name }.map { |cs| [cs.display_name, cs.id] },
+          {
+            prompt: "Pick one!",
+            selected: previewing? && @color_scheme.id
+          },
+          # requestSubmit and Turbo
+          # https://stackoverflow.com/questions/68624668/how-can-i-submit-a-form-on-input-change-with-turbo-streams
+          onchange: "this.form.requestSubmit()",
+          class: "mr-2"
+        )
       end
+    end
+  end
 
-      h3 { display_name }
+  def save_preview_button
+    button_to "Save #{@preview_color_scheme.display_name}",
+      settings_color_scheme_path(settings: {color_scheme_id: @preview_color_scheme.id}),
+      method: :patch,
+      class: "button primary mr-2"
+  end
 
-      div(class: "color-scheme color-scheme__#{@color_scheme.name.parameterize}") do
-        @color_scheme.weights.each do |weight, color|
-          div(class: "color-swatch color-swatch__weight:#{weight}", style: "background-color: #{color.hex}") do
-            div(class: "color-swatch__weight") { weight }
-            div(class: "color-swatch__color") { color.hex.delete("#").upcase }
-          end
+  def unsave_button
+    button_to "Delete my color scheme choice",
+      settings_color_scheme_path(settings: {color_scheme_id: ColorScheme.cached_default.id}),
+      method: :patch,
+      class: "button warn mr-2"
+  end
+
+  def color_swatches(color_scheme)
+    div(class: "color-scheme color-scheme__#{color_scheme.name.parameterize}") do
+      color_scheme.weights.each do |weight, color|
+        div(class: "color-swatch color-swatch__weight:#{weight}", style: "background-color: #{color.hex}") do
+          div(class: "color-swatch__weight") { weight }
+          div(class: "color-swatch__color") { color.hex.delete("#").upcase }
         end
       end
     end
   end
 
   private
 
-  def default_color_scheme? = @color_scheme.id == ColorScheme.cached_default.id
+  def previewing? = @preview_color_scheme.present?
 
-  def display_name
-    if default_color_scheme?
-      "#{@color_scheme.display_name} (default)"
-    else
-      @color_scheme.display_name
-    end
-  end
+  def preserving? = @session_color_scheme.present?
+
+  def default_color_scheme? = @color_scheme.id == @default_color_scheme
 end

app/views/components/color_schemes/css.rb

@@ -5,6 +5,17 @@ def initialize(color_scheme:)
     @color_scheme = color_scheme
   end
 
+  def view_template
+    unsafe_raw <<-CSS
+      :root {
+        #{color_scheme.weights.map { |weight, color| "--color-#{color_name}-#{weight}: #{to_hsla_css(color)};" }.join("\n\t\t")}
+        #{color_scheme.weights.map { |weight, color| "--my-color-#{weight}: var(--color-#{color_name}-#{weight});" }.join("\n\t\t")}
+      }
+    CSS
+  end
+
+  private
+
   def color_name
     color_scheme.name.parameterize
   end
@@ -13,13 +24,4 @@ def to_hsla_css(color)
     hsl = color.hsl
     "hsla(#{hsl[:h]}, #{hsl[:s]}%, #{hsl[:l]}%, 1)"
   end
-
-  def view_template
-    color_scheme.weights.each do |weight, color|
-      unsafe_raw "--color-#{color_name}-#{weight}: #{to_hsla_css(color)};\n"
-    end
-    color_scheme.weights.each do |weight, color|
-      unsafe_raw "--my-color-#{weight}: var(--color-#{color_name}-#{weight});\n"
-    end
-  end
 end

spec/system/settings/color_schemes_spec.rb

@@ -15,7 +15,7 @@
     chosen_color = curated_colors.second
     select chosen_color.display_name, from: "settings[color_scheme_id]"
 
-    click_button "Save this color scheme"
+    click_button "Save #{chosen_color.display_name}"
 
     expect(page).to have_content("You are now using the #{chosen_color.display_name} color scheme")