Add theme previews

app/assets/stylesheets/application.sass.scss

@@ -14,6 +14,8 @@
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/maps";
 
+$enable-cssgrid: true;
+
 /**
   VENDOR
   ----------------------------------------------

app/assets/stylesheets/components/_themes.scss

@@ -13,3 +13,51 @@
   --background: #fceff1;
   --primary: var(--danger);
 }
+
+.theme-preview {
+  .card-header {
+    .fake-text {
+      display: inline-block;
+      width: 1.5rem;
+      background: RGB(var(--primary-text));
+
+      &:not(:first-child) {
+        background: RGBA(var(--primary-text), 0.5);
+        width: 1rem;
+      }
+    }
+  }
+
+  .card-body {
+    background: var(--background);
+
+    .raised {
+      background: var(--raised-bg);
+      border-radius: 4px;
+      padding: 4px;
+
+      .fake-text {
+        background: RGB(var(--raised-text));
+      }
+    }
+
+    .rounded-circle {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .card-footer {
+    background: var(--raised-bg);
+    color: RGB(var(--raised-text));
+  }
+
+  .fake-text {
+    display: block;
+    width: 3rem;
+    height: 6px;
+    background: RGB(var(--primary-text));
+    margin: 4px 0;
+  }
+}

app/components/theme_preview_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class ThemePreviewComponent < ApplicationComponent
+  delegate :id, :to_css, to: :@theme
+
+  def initialize(theme)
+    @theme = theme
+  end
+
+  def name
+    return @theme.name if @theme.name.present?
+
+    @theme.user_id ? t('.unnamed') : t('.default')
+  end
+end

app/components/theme_preview_component/theme_preview_component.en.yml

@@ -0,0 +1,2 @@
+default: "Default Theme"
+unnamed: "Unnamed"

app/components/theme_preview_component/theme_preview_component.html.haml

@@ -0,0 +1,14 @@
+.theme-preview.d-inline-block.g-col-4
+  .card{ style: to_css, data: { theme_id: id } }
+    .card-header.bg-primary
+      .fake-text
+      .fake-text
+      .fake-text
+    .card-body
+      .raised
+        .fake-text
+        .rounded-circle.bg-success
+        .rounded-circle.bg-danger
+        .rounded-circle.bg-warning
+        .rounded-circle.bg-info
+    .card-footer= name

app/controllers/settings/theme_controller.rb

@@ -5,7 +5,9 @@ class Settings::ThemeController < ApplicationController
 
   before_action :authenticate_user!
 
-  def edit; end
+  def edit
+    @built_in_themes = Theme.built_in
+  end
 
   def update
     if current_user.theme.nil?

app/helpers/theme_helper.rb

@@ -28,17 +28,11 @@ module ThemeHelper
     "muted_text"         => "muted-text",
   }.freeze
 
-  def get_theme_css(theme)
-    body = ":root {\n"
-
-    theme.attributes.each do |k, v|
-      next unless ATTRIBUTE_MAP.key?(k)
-
-      Array(ATTRIBUTE_MAP[k]).each do |var|
-        body += "\t--#{var}: #{get_color_for_key(var, v)};\n"
-      end
-    end
-    body + "\t--turbolinks-progress-color: ##{lighten(theme.primary_color)}\n}"
+  def get_theme_css(theme, wrap = true)
+    body = wrap ? ":root {\n" : ""
+    body += theme.to_css
+    body += "}" if wrap
+    body
   end
 
   def get_color_for_key(key, color)

app/models/theme.rb

@@ -3,6 +3,8 @@ class Theme < ApplicationRecord
 
   belongs_to :user
 
+  scope :built_in, -> { where(user_id: nil) }
+
   validates_numericality_of :primary_color, :primary_text,
     :danger_color, :danger_text,
     :success_color, :success_text,
@@ -11,12 +13,24 @@ class Theme < ApplicationRecord
     :dark_color, :dark_text,
     :light_color, :light_text,
     :raised_background, :raised_accent,
-    :background_color, :body_text, 
-    :muted_text, :input_color, 
+    :background_color, :body_text,
+    :muted_text, :input_color,
     :input_text,
     greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF,
     allow_nil: true, only_integer: true
 
+  def to_css
+    body = ""
+    attributes.each do |k, v|
+      next unless ATTRIBUTE_MAP.key?(k)
+
+      Array(ATTRIBUTE_MAP[k]).each do |var|
+        body += "\t--#{var}: #{get_color_for_key(var, v)};\n"
+      end
+    end
+    body + "\t--turbolinks-progress-color: ##{lighten(primary_color)}\n"
+  end
+
   def theme_color
     ('#' + ('0000000' + primary_color.to_s(16))[-6, 6])
   end

app/views/settings/theme/edit.html.haml

@@ -4,6 +4,17 @@
     %p.lead= t(".lead")
     = t(".body_html")
 
+    %h2= t(".standard.heading")
+    .grid
+      = render ThemePreviewComponent.new(Theme.new)
+      - @built_in_themes.each do |theme|
+        = render ThemePreviewComponent.new(theme)
+
+    %h2= t(".own.heading")
+    .grid
+      - current_user.themes.each do |theme|
+        = render ThemePreviewComponent.new(theme)
+
     - if current_user.active_theme
       .pull-right
         = link_to t(".delete"), settings_theme_path, data: { turbo_confirm: t("voc.confirm"), turbo_method: :delete }, tabindex: -1, class: "btn btn-danger"

config/locales/views.en.yml

@@ -561,6 +561,10 @@ en:
           body: "Raised content includes all the different boxes and panels you can see across the site."
           accent:
             example: "Some text on top of a accented area on a raised element!"
+        standard:
+          heading: "Built-in themes"
+        own:
+          heading: "Your themes"
     push_notifications:
       index:
         title: "Push Notifications"

spec/components/theme_preview_component_spec.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe ThemePreviewComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end