keystone_ui-colors 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5224ad9955865982d987f3916ba22c431da0a8119ca42df9117f37374fc88b6
-  data.tar.gz: d0bcd8a902a86d5410943af32b8ad41319af8b3adb30c5ebfeae6dbfdb1e8194
+  metadata.gz: 0be1b3b828200e62a25182fce5604530b562f4b9223163c2ff72ec9956165a58
+  data.tar.gz: f17e542ec6c0edaf81af9550f500422ad98735c4e83070810b0664ecd65f5704
 SHA512:
-  metadata.gz: 1e83b526543374f4cce58b86a0aace773fba8205fea2f2de28a2bf87925d5c64299055e8d71fab02ab1d80447b557ce75dd730c01403812e7e2a67155868adb0
-  data.tar.gz: '080fc6a5bafcc87e2d3555db311698d234fc5f13d623b9792999a4fd7a0129462ed0b1ae826973a0ab0cd53b4c48e92cd72fa1c0c77ab2a5eb0022294deec8f7'
+  metadata.gz: 82da08d19ce27f46e0197a9a3d4cd7ca9b121530ecd564a52e79968e0145e08d733f29e1deaf9caf998e02d009addbc84b5d1b7090830d291596a132c575e9df
+  data.tar.gz: f5658c136c63b0134a25d867c90071b3c103ae35d59e36160d7004d1ca693958232b5f3e20892e207b60636f02a7043f86a65fc25fb0758d89875fa892d57af4

data/README.md

@@ -85,6 +85,8 @@ KeystoneUi::Colors.configure do |config|
   config.default_mode = "light"                # Fallback theme mode: "light", "dark", "system" or "custom"
   config.default_background = "#ffffff"        # Custom mode background when nothing else sets one
   config.default_text = "#18181b"              # Custom mode text colour when nothing else sets one
+  config.account_colors = true                 # Let account owners choose their account's colours
+  config.current_account_method = nil          # Controller method for the current account, such as :current_account
   config.layout = "application"                # Layout for settings page
 end
 ```
@@ -117,6 +119,44 @@ gray and zinc shade as a blend of the text into it.
 - Anything not set falls back to `config.default_background` and
   `config.default_text`.
 
+## Account Colours
+
+Colours are chosen at up to three levels, and a page uses the first that applies:
+
+1. The signed-in user's own colours, when the app lets accounts choose and the
+   user's account lets its members choose.
+2. The account's colours, when the app lets accounts choose.
+3. The app's configured defaults, which fall back to keystone_ui's own colours.
+
+An account's colours are a `ThemePreference` owned by the account. Its
+`members_choose` column, `true` by default, decides whether members may use their
+own colours. Set `config.current_account_method` to the controller method that
+returns the current account. With none set, the account level is skipped.
+
+Light, Dark and System stay each user's own choice at every level. Custom is
+offered to a user who may choose their own colours, and to anyone whose applying
+colours draw a background other than white.
+
+Two partials place the pickers in an app's own settings, each taking `person:`,
+`account:` and `submit_url:`:
+
+- `keystone_ui/colors/settings/picker` saves through `KeystoneUi::Colors::PickColours`.
+  A user who may not choose colours sees only the mode, and a save from them keeps
+  only the mode.
+- `keystone_ui/colors/settings/account_picker` saves through
+  `KeystoneUi::Colors::PickAccountColours`, and holds the account's colours and
+  its Members switch.
+
+Who may set an account's colours is for the app to decide. With settings_hub,
+register the account picker in the account area behind a capability:
+
+```ruby
+SettingsHub.section :account_appearance, area: :account, title: "Appearance",
+  capability: :manage_account,
+  renders: "keystone_ui/colors/settings/account_picker",
+  runs: "KeystoneUi::Colors::PickAccountColours"
+```
+
 ## Keeping a Page on the Host's Colours
 
 A controller that declares `keystone_host_colors` renders its pages in the host's

data/app/controllers/concerns/keystone_ui/colors/current_palette.rb

@@ -21,6 +21,8 @@ module KeystoneUi
         owner = send(KeystoneUi::Colors.configuration.current_owner_method)
 
         return apply_host_palette unless owner
+        account = keystone_account
+        return apply_chosen_palette(owner, account) if account || !KeystoneUi::Colors.configuration.account_colors
 
         cached = session[:keystone_ui_colors_palette]
 
@@ -54,6 +56,12 @@ module KeystoneUi
         end
       end
 
+      def apply_chosen_palette(owner, account)
+        choice = KeystoneUi::Colors::ColourChoice.new(person: owner, account: account)
+        @keystone_theme_mode = choice.mode
+        write_palette(choice.applying_preference)
+      end
+
       def apply_host_palette
         @keystone_theme_mode = KeystoneUi::Colors.configuration.default_mode
         build_palette_css(
@@ -73,6 +81,20 @@ module KeystoneUi
 
       private
 
+      def keystone_account
+        method = KeystoneUi::Colors.configuration.current_account_method
+        send(method) if method
+      end
+
+      def write_palette(preference)
+        surface = preference&.surface || KeystoneUi::Colors.configuration.default_surface
+        build_palette_css(
+          preference&.accent || KeystoneUi::Colors.configuration.default_accent,
+          surface,
+          KeystoneUi::Colors::CustomColours.new(template_name: preference&.template_name, surface: surface, text: preference&.text)
+        )
+      end
+
       def build_palette_css(accent, surface, custom = nil)
         accent_shades = resolve_shades(accent, :accent)
         surface_shades = resolve_shades(surface, :surface)

data/app/javascript/keystone_ui/colors/theme_settings_controller.js

@@ -4,9 +4,15 @@ export default class extends Controller {
   static targets = ["accentPicker", "surfacePicker", "textPicker", "customRadio", "templateLabel"]
 
   connect() {
-    this.accentPickerTarget.addEventListener("change", () => this.customColorChanged())
-    this.surfacePickerTarget.addEventListener("change", () => this.customColorChanged())
-    this.textPickerTarget.addEventListener("change", () => this.customColorChanged())
+    this.colorPickerTargets().forEach(picker => picker.addEventListener("change", () => this.customColorChanged()))
+  }
+
+  colorPickerTargets() {
+    return [
+      this.hasAccentPickerTarget && this.accentPickerTarget,
+      this.hasSurfacePickerTarget && this.surfacePickerTarget,
+      this.hasTextPickerTarget && this.textPickerTarget
+    ].filter(Boolean)
   }
 
   selectTemplate(event) {

data/app/models/keystone_ui/colors/colour_choice.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Colors
+    class ColourChoice
+      WHITE = "#ffffff"
+
+      def initialize(person:, account:)
+        @person = person
+        @account = account
+      end
+
+      def person_chooses?
+        return false unless KeystoneUi::Colors.configuration.account_colors
+
+        account_preference.nil? || account_preference.members_choose
+      end
+
+      def applying_preference
+        return nil unless KeystoneUi::Colors.configuration.account_colors
+        return own_preference || account_preference if person_chooses?
+
+        account_preference
+      end
+
+      def mode
+        own_preference&.mode || KeystoneUi::Colors.configuration.default_mode
+      end
+
+      def custom_offered?
+        preference = applying_preference
+        background = CustomColours.new(template_name: preference&.template_name, surface: preference&.surface, text: preference&.text).background
+        !background.casecmp?(WHITE)
+      end
+
+      private
+
+      def own_preference
+        @own_preference ||= ThemePreference.find_by(owner: @person)
+      end
+
+      def account_preference
+        return nil unless @account
+
+        @account_preference ||= ThemePreference.find_by(owner: @account)
+      end
+    end
+  end
+end

data/app/models/keystone_ui/colors/pick_account_colours.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Colors
+    class PickAccountColours
+      def initialize(values:, person: nil, account: nil)
+        @account = account
+        @values = values
+      end
+
+      def call
+        return Refusal.new("This app does not let accounts choose their colours.") unless KeystoneUi::Colors.configuration.account_colors
+
+        result = PickColours.new(owner: @account, values: @values.except(:members_choose, :mode)).call
+        return result unless result.ok? && @values.key?(:members_choose)
+
+        ThemePreference.find_by(owner: @account).update!(members_choose: @values[:members_choose] == "1")
+        result
+      end
+    end
+  end
+end

data/app/models/keystone_ui/colors/pick_colours.rb

@@ -23,8 +23,21 @@ module KeystoneUi
         @preference ||= ThemePreference.find_or_initialize_by(owner: @owner)
       end
 
+      def mode_only
+        defaults = preference.new_record? ? { accent: KeystoneUi::Colors.configuration.default_accent, surface: KeystoneUi::Colors.configuration.default_surface } : {}
+        defaults.merge(mode: @values[:mode]).compact
+      end
+
+      def custom_colours
+        colours = { accent: @values[:accent], surface: @values[:surface], text: @values[:text], mode: @values[:mode] }.compact
+        colours[:template_name] = nil if @values.key?(:template_name)
+        colours
+      end
+
       def chosen_colours
-        return { accent: @values[:accent], surface: @values[:surface], text: @values[:text], mode: @values[:mode] }.compact if @values[:template_name].blank?
+        return mode_only unless ColourChoice.new(person: @owner, account: @account).person_chooses?
+
+        return custom_colours if @values[:template_name].blank?
 
         template = Templates[@values[:template_name]]
         {

data/app/views/keystone_ui/colors/settings/_account_picker.html.erb

@@ -0,0 +1,22 @@
+<% preference = KeystoneUi::Colors::ThemePreference.find_or_initialize_by(owner: account) %>
+
+<%= ui_panel(padding: :lg) do %>
+  <%= form_with(
+    url: submit_url,
+    method: :patch,
+    data: { turbo: false, controller: "keystone-ui--colors--theme-settings", selected_template: preference.template_name }
+  ) do |form| %>
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <%= render partial: "keystone_ui/colors/settings/colours", locals: { preference: preference } %>
+
+      <%= ui_section(title: "Members", spacing: :sm) do %>
+        <%= hidden_field_tag "members_choose", "0", id: nil %>
+        <%= ui_checkbox_row(name: "members_choose", value: "1", label: "Members choose their own colours", checked: preference.members_choose) %>
+      <% end %>
+
+      <div>
+        <%= ui_button(label: "Save", type: :submit) %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/keystone_ui/colors/settings/_colours.html.erb

@@ -0,0 +1,83 @@
+<%
+  current_accent_hex = if preference.accent&.start_with?("#")
+    preference.accent
+  else
+    KeystoneUi::Colors::Palettes.accent(preference.accent || "blue")[500]
+  end
+
+  current_surface_hex = if preference.surface&.start_with?("#")
+    preference.surface
+  else
+    KeystoneUi::Colors::Palettes.surface(preference.surface || "zinc")[500]
+  end
+
+  current_text_hex = KeystoneUi::Colors::CustomColours.new(
+    template_name: preference.template_name,
+    surface: preference.surface,
+    text: preference.text
+  ).text
+
+  selected_template = preference.template_name
+  custom_selected = preference.accent&.start_with?("#") || (selected_template.blank? && preference.persisted?)
+%>
+
+<%= ui_section(title: "Theme", spacing: :sm) do %>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+    <% KeystoneUi::Colors::Templates.names.each do |name| %>
+      <% template = KeystoneUi::Colors::Templates[name] %>
+      <% accent_hex = KeystoneUi::Colors::Palettes.accent(template[:accent])[500] %>
+      <% surface_hex = KeystoneUi::Colors::Palettes.surface(template[:surface])[500] %>
+      <%= ui_option_card(
+        name: "template_name",
+        value: name,
+        selected: selected_template == name.to_s,
+        input_data: {
+          action: "keystone-ui--colors--theme-settings#selectTemplate",
+          "accent-hex": accent_hex,
+          "surface-hex": surface_hex,
+          "text-hex": template[:text]
+        },
+        label_data: {
+          "keystone-ui--colors--theme-settings-target": "templateLabel",
+          template: name
+        }
+      ) do %>
+        <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; background-color: <%= accent_hex %>;"></span>
+        <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; background-color: <%= surface_hex %>;"></span>
+        <span><%= template[:label] %></span>
+      <% end %>
+    <% end %>
+    <%= ui_option_card(
+      name: "template_name",
+      value: "",
+      selected: custom_selected,
+      input_data: {
+        "keystone-ui--colors--theme-settings-target": "customRadio"
+      },
+      label_data: {
+        "keystone-ui--colors--theme-settings-target": "templateLabel",
+        template: "custom"
+      }
+    ) do %>
+      <span>Custom</span>
+    <% end %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Accent Color", spacing: :sm) do %>
+  <div data-keystone-ui--colors--theme-settings-target="accentPicker">
+    <%= ui_color_picker(name: "accent", value: current_accent_hex) %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Surface", spacing: :sm) do %>
+  <div data-keystone-ui--colors--theme-settings-target="surfacePicker">
+    <%= ui_color_picker(name: "surface", value: current_surface_hex) %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Text Color", spacing: :sm) do %>
+  <div data-keystone-ui--colors--theme-settings-target="textPicker">
+    <%= ui_color_picker(name: "text", value: current_text_hex) %>
+  </div>
+<% end %>

data/app/views/keystone_ui/colors/settings/_picker.html.erb

@@ -1,26 +1,8 @@
 <%
   preference = KeystoneUi::Colors::ThemePreference.find_or_initialize_by(owner: person)
 
-  current_accent_hex = if preference.accent&.start_with?("#")
-    preference.accent
-  else
-    KeystoneUi::Colors::Palettes.accent(preference.accent || "blue")[500]
-  end
-
-  current_surface_hex = if preference.surface&.start_with?("#")
-    preference.surface
-  else
-    KeystoneUi::Colors::Palettes.surface(preference.surface || "zinc")[500]
-  end
-
-  current_text_hex = KeystoneUi::Colors::CustomColours.new(
-    template_name: preference.template_name,
-    surface: preference.surface,
-    text: preference.text
-  ).text
-
   selected_template = preference.template_name
-  custom_selected = preference.accent&.start_with?("#") || (selected_template.blank? && preference.persisted?)
+  choice = KeystoneUi::Colors::ColourChoice.new(person: person, account: account)
 %>
 
 <%= ui_panel(padding: :lg) do %>
@@ -30,70 +12,14 @@
     data: { turbo: false, controller: "keystone-ui--colors--theme-settings", selected_template: selected_template }
   ) do |form| %>
     <div style="display: flex; flex-direction: column; gap: 2rem;">
-      <%= ui_section(title: "Theme", spacing: :sm) do %>
-        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
-          <% KeystoneUi::Colors::Templates.names.each do |name| %>
-            <% template = KeystoneUi::Colors::Templates[name] %>
-            <% accent_hex = KeystoneUi::Colors::Palettes.accent(template[:accent])[500] %>
-            <% surface_hex = KeystoneUi::Colors::Palettes.surface(template[:surface])[500] %>
-            <%= ui_option_card(
-              name: "template_name",
-              value: name,
-              selected: selected_template == name.to_s,
-              input_data: {
-                action: "keystone-ui--colors--theme-settings#selectTemplate",
-                "accent-hex": accent_hex,
-                "surface-hex": surface_hex,
-                "text-hex": template[:text]
-              },
-              label_data: {
-                "keystone-ui--colors--theme-settings-target": "templateLabel",
-                template: name
-              }
-            ) do %>
-              <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; background-color: <%= accent_hex %>;"></span>
-              <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; background-color: <%= surface_hex %>;"></span>
-              <span><%= template[:label] %></span>
-            <% end %>
-          <% end %>
-          <%= ui_option_card(
-            name: "template_name",
-            value: "",
-            selected: custom_selected,
-            input_data: {
-              "keystone-ui--colors--theme-settings-target": "customRadio"
-            },
-            label_data: {
-              "keystone-ui--colors--theme-settings-target": "templateLabel",
-              template: "custom"
-            }
-          ) do %>
-            <span>Custom</span>
-          <% end %>
-        </div>
-      <% end %>
-
-      <%= ui_section(title: "Accent Color", spacing: :sm) do %>
-        <div data-keystone-ui--colors--theme-settings-target="accentPicker">
-          <%= ui_color_picker(name: "accent", value: current_accent_hex) %>
-        </div>
-      <% end %>
-
-      <%= ui_section(title: "Surface", spacing: :sm) do %>
-        <div data-keystone-ui--colors--theme-settings-target="surfacePicker">
-          <%= ui_color_picker(name: "surface", value: current_surface_hex) %>
-        </div>
-      <% end %>
-
-      <%= ui_section(title: "Text Color", spacing: :sm) do %>
-        <div data-keystone-ui--colors--theme-settings-target="textPicker">
-          <%= ui_color_picker(name: "text", value: current_text_hex) %>
-        </div>
+      <% if choice.person_chooses? %>
+        <%= render partial: "keystone_ui/colors/settings/colours", locals: { preference: preference } %>
       <% end %>
 
       <%= ui_section(title: "Mode", spacing: :sm) do %>
         <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
           <% KeystoneUi::Colors::ThemePreference::MODES.each do |mode| %>
+            <% next if mode == "custom" && !(choice.person_chooses? || choice.custom_offered?) %>
             <%= ui_radio_card(name: "mode", value: mode, label: mode.capitalize, checked: (preference.mode || KeystoneUi::Colors.configuration.default_mode) == mode) %>
           <% end %>
         </div>

data/lib/generators/keystone_ui/colors/install/templates/create_keystone_ui_colors_theme_preferences.rb.erb

@@ -6,6 +6,7 @@ class CreateKeystoneUiColorsThemePreferences < ActiveRecord::Migration[<%= Activ
       t.string :template_name
       t.string :mode
       t.string :text
+      t.boolean :members_choose, default: true, null: false
       t.references :owner, polymorphic: true, null: false
       t.timestamps
     end

data/lib/generators/keystone_ui/colors/update/templates/add_members_choose_to_keystone_ui_colors_theme_preferences.rb.erb

@@ -0,0 +1,5 @@
+class AddMembersChooseToKeystoneUiColorsThemePreferences < ActiveRecord::Migration[<%= ActiveRecord::Migration.current_version %>]
+  def change
+    add_column :keystone_ui_colors_theme_preferences, :members_choose, :boolean, default: true, null: false
+  end
+end

data/lib/generators/keystone_ui/colors/update/update_generator.rb

@@ -27,6 +27,13 @@ module KeystoneUi
           )
         end
 
+        def add_members_choose_migration
+          migration_template(
+            File.expand_path("templates/add_members_choose_to_keystone_ui_colors_theme_preferences.rb.erb", __dir__),
+            "db/migrate/add_members_choose_to_keystone_ui_colors_theme_preferences.rb"
+          )
+        end
+
         def copy_stimulus_controller
           copy_file "theme_settings_controller.js",
             "app/javascript/controllers/keystone_ui/colors/theme_settings_controller.js"

data/lib/keystone_ui/colors/configuration.rb

@@ -3,7 +3,7 @@
 module KeystoneUi
   module Colors
     class Configuration
-      attr_accessor :current_owner_method, :authentication_method, :default_template, :default_accent, :default_surface, :default_mode, :default_background, :default_text, :layout
+      attr_accessor :current_owner_method, :authentication_method, :default_template, :default_accent, :default_surface, :default_mode, :default_background, :default_text, :account_colors, :current_account_method, :layout
 
       def initialize
         @current_owner_method = :current_user
@@ -14,6 +14,8 @@ module KeystoneUi
         @default_mode = "light"
         @default_background = "#ffffff"
         @default_text = "#18181b"
+        @account_colors = true
+        @current_account_method = nil
         @layout = "application"
       end
     end

data/lib/keystone_ui/colors/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Colors
-    VERSION = "0.3.1"
+    VERSION = "0.4.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-colors
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -82,17 +82,22 @@ files:
 - app/helpers/keystone_ui/colors/palette_helper.rb
 - app/javascript/keystone_ui/colors/theme_settings_controller.js
 - app/models/keystone_ui/colors/application_record.rb
+- app/models/keystone_ui/colors/colour_choice.rb
 - app/models/keystone_ui/colors/custom_colours.rb
 - app/models/keystone_ui/colors/forget_the_theme_choice.rb
 - app/models/keystone_ui/colors/kept.rb
+- app/models/keystone_ui/colors/pick_account_colours.rb
 - app/models/keystone_ui/colors/pick_colours.rb
 - app/models/keystone_ui/colors/refusal.rb
 - app/models/keystone_ui/colors/theme_preference.rb
+- app/views/keystone_ui/colors/settings/_account_picker.html.erb
+- app/views/keystone_ui/colors/settings/_colours.html.erb
 - app/views/keystone_ui/colors/settings/_picker.html.erb
 - app/views/keystone_ui/colors/settings/show.html.erb
 - config/routes.rb
 - lib/generators/keystone_ui/colors/install/install_generator.rb
 - lib/generators/keystone_ui/colors/install/templates/create_keystone_ui_colors_theme_preferences.rb.erb
+- lib/generators/keystone_ui/colors/update/templates/add_members_choose_to_keystone_ui_colors_theme_preferences.rb.erb
 - lib/generators/keystone_ui/colors/update/templates/add_mode_to_keystone_ui_colors_theme_preferences.rb.erb
 - lib/generators/keystone_ui/colors/update/templates/add_text_to_keystone_ui_colors_theme_preferences.rb.erb
 - lib/generators/keystone_ui/colors/update/update_generator.rb