mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
cf4e560a4c
User requested replacing the in-house color disclosure with the categories color+icon popover. Done as a controller extraction so categories and goals share one Stimulus controller (user's option: "Extract a shared color_icon_picker_controller.js"). - `git mv` app/javascript/controllers/category_controller.js to color_icon_picker_controller.js. Categories form + color_avatar partial updated to use the new identifier (data-controller= "color-icon-picker", target/action selectors renamed). - Goal model gains an icon column (migration 20260511190000_add_icon_to_goals.rb) + ICONS = Category.icon_codes + inclusion validation. GoalsController permits :icon in goal_params + goal_update_params. - Goals::AvatarComponent now renders icon when present (falls back to first-letter initial), and adopts the Categories tinted-bg + colored -content style (bg = `color-mix(in oklab, COLOR 10%, transparent)`, text/icon = COLOR). Matches the picker's live preview so what the user sees during selection equals the saved state. - New goals/_color_picker.html.erb mirrors categories/_form's popover: avatar + pen overlay summary + popup with color row (+ rainbow custom-hex trigger) + icon grid. Pickr / contrast validation / auto- adjust all inherited from the shared controller. - Stepper step 1 layout: drop the inline letter-avatar (data-goal- stepper-target="avatarPreview") in favour of the picker avatar next to the name input. Step 1's tail no longer renders a separate color partial. Edit form passes icons local through. Verified live: new goal modal renders 11 color radios (10 presets + custom) + 141 icon radios + pen-summary; categories form still operational (no console errors) under the renamed controller.
55 lines
1.4 KiB
Ruby
55 lines
1.4 KiB
Ruby
class Goals::AvatarComponent < ApplicationComponent
|
|
SIZES = {
|
|
"sm" => { box: "w-6 h-6", text: "text-[10px]", radius: "rounded-md" },
|
|
"md" => { box: "w-9 h-9", text: "text-sm", radius: "rounded-lg" },
|
|
"lg" => { box: "w-11 h-11", text: "text-base", radius: "rounded-xl" },
|
|
"xl" => { box: "w-16 h-16", text: "text-2xl", radius: "rounded-2xl" }
|
|
}.freeze
|
|
|
|
PALETTE = Goal::COLORS
|
|
|
|
# Deterministic color pick from the palette so the same string maps to
|
|
# the same color across processes (Ruby's String#hash is randomized per
|
|
# boot for DoS protection — not stable enough for visual identity).
|
|
def self.color_for(name)
|
|
return PALETTE.first if name.blank?
|
|
PALETTE[Digest::MD5.hexdigest(name).to_i(16) % PALETTE.size]
|
|
end
|
|
|
|
def initialize(goal: nil, name: nil, color: nil, icon: nil, size: "md")
|
|
@goal = goal
|
|
@name = name || goal&.name
|
|
@color = color || goal&.color || Goal::COLORS.first
|
|
@icon = icon || goal&.icon
|
|
@size = SIZES.key?(size) ? size : "md"
|
|
end
|
|
|
|
attr_reader :color, :icon
|
|
|
|
def initial
|
|
return "?" if @name.blank?
|
|
@name.strip.first&.upcase || "?"
|
|
end
|
|
|
|
def icon_size
|
|
case @size
|
|
when "sm" then "xs"
|
|
when "md" then "sm"
|
|
when "lg" then "md"
|
|
when "xl" then "xl"
|
|
end
|
|
end
|
|
|
|
def box_classes
|
|
SIZES[@size][:box]
|
|
end
|
|
|
|
def text_classes
|
|
SIZES[@size][:text]
|
|
end
|
|
|
|
def radius_classes
|
|
SIZES[@size][:radius]
|
|
end
|
|
end
|