diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 6e535a767..b417b31d7 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -209,14 +209,6 @@ /* Colors: Cards */ --color-card-default: oklch(var(--lch-blue-dark)); --color-card-complete: var(--color-ink-darker); - --color-card-1: oklch(var(--lch-ink-medium)); - --color-card-2: oklch(var(--lch-uncolor-medium)); - --color-card-3: oklch(var(--lch-yellow-medium)); - --color-card-4: oklch(var(--lch-lime-medium)); - --color-card-5: oklch(var(--lch-aqua-medium)); - --color-card-6: oklch(var(--lch-violet-medium)); - --color-card-7: oklch(var(--lch-purple-medium)); - --color-card-8: oklch(var(--lch-pink-medium)); /* Colors: Syntax highlighting */ --color-code-token__att: oklch(var(--lch-blue-dark)); diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb index 56df2f54d..d0fcdeef3 100644 --- a/app/helpers/cards_helper.rb +++ b/app/helpers/cards_helper.rb @@ -9,7 +9,7 @@ module CardsHelper tag.article \ id: id, - style: "--card-color: #{card.color}; view-transition-name: #{id}", + style: "--card-color: #{card.color[:value]}; view-transition-name: #{id}", class: classes, **options, &block diff --git a/app/helpers/messages_helper.rb b/app/helpers/messages_helper.rb index 9dae7757c..7a7f64137 100644 --- a/app/helpers/messages_helper.rb +++ b/app/helpers/messages_helper.rb @@ -2,7 +2,7 @@ module MessagesHelper def messages_tag(card, &) turbo_frame_tag dom_id(card, :messages), class: "comments gap center", - style: "--card-color: #{card.color}", + style: "--card-color: #{card.color[:value]}", role: "group", aria: { label: "Messages" }, data: { controller: "created-by-current-user", diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb index 29348493a..c5a39fd8d 100644 --- a/app/helpers/notifications_helper.rb +++ b/app/helpers/notifications_helper.rb @@ -29,7 +29,7 @@ module NotificationsHelper link_to(notification, class: [ "card card--notification", { "card--closed": notification.card.closed? }, { "unread": !notification.read? } ], data: { turbo_frame: "_top", badge_target: "unread", action: "badge#update dialog#close" }, - style: { "--card-color:": notification.card.color }, + style: { "--card-color:": notification.card.color[:value] }, &) end end diff --git a/app/models/card/colored.rb b/app/models/card/colored.rb index 78152bab8..bf28d83eb 100644 --- a/app/models/card/colored.rb +++ b/app/models/card/colored.rb @@ -1,24 +1,25 @@ module Card::Colored extend ActiveSupport::Concern - COLORS = %w[ - var(--color-card-1) - var(--color-card-2) - var(--color-card-3) - var(--color-card-4) - var(--color-card-5) - var(--color-card-6) - var(--color-card-7) - var(--color-card-8) + COLORS = [ + { name: "Blue", value: "var(--color-card-default)" }, + { name: "Gray", value: "oklch(var(--lch-ink-dark))" }, + { name: "Tan", value: "oklch(var(--lch-uncolor-medium))" }, + { name: "Yellow", value: "oklch(var(--lch-yellow-medium))" }, + { name: "Lime", value: "oklch(var(--lch-lime-medium))" }, + { name: "Aqua", value: "oklch(var(--lch-aqua-medium))" }, + { name: "Violet", value: "oklch(var(--lch-violet-medium))" }, + { name: "Purple", value: "oklch(var(--lch-purple-medium))" }, + { name: "Pink", value: "oklch(var(--lch-pink-medium))" } ] - DEFAULT_COLOR = "var(--color-card-default)" + DEFAULT_COLOR = COLORS.first def color - color_from_column || DEFAULT_COLOR - end - - private - def color_from_column - column&.color&.presence + if column&.color.present? + found = COLORS.find { |c| c[:value] == column.color } + return found || { name: column.color, value: column.color } + else + DEFAULT_COLOR end + end end diff --git a/app/models/column.rb b/app/models/column.rb index ec5fd6217..3d671613e 100644 --- a/app/models/column.rb +++ b/app/models/column.rb @@ -4,7 +4,7 @@ class Column < ApplicationRecord belongs_to :board, touch: true has_many :cards, dependent: :nullify - before_validation -> { self.color ||= Card::DEFAULT_COLOR } + before_validation -> { self.color ||= Card::DEFAULT_COLOR[:value] } after_save_commit -> { cards.touch_all }, if: -> { saved_change_to_name? || saved_change_to_color? } after_destroy_commit -> { board.cards.touch_all } end diff --git a/app/views/boards/show/menu/_column_form.html.erb b/app/views/boards/show/menu/_column_form.html.erb index b42549d3c..311b33c42 100644 --- a/app/views/boards/show/menu/_column_form.html.erb +++ b/app/views/boards/show/menu/_column_form.html.erb @@ -3,11 +3,11 @@ required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank", data: { action: "focus->form#select" } %>
- <% ([Card::DEFAULT_COLOR] + Card::COLORS).each do |color| %> -
diff --git a/app/views/cards/_container.html.erb b/app/views/cards/_container.html.erb index 821211be9..9754a56a5 100644 --- a/app/views/cards/_container.html.erb +++ b/app/views/cards/_container.html.erb @@ -1,5 +1,5 @@ <% cache card do %> -
+
<%= render "cards/container/gild", card: card if card.published? && !card.closed? %> <%= render "cards/container/image", card: card %> diff --git a/app/views/events/event/_layout.html.erb b/app/views/events/event/_layout.html.erb index 08c406002..0b331d289 100644 --- a/app/views/events/event/_layout.html.erb +++ b/app/views/events/event/_layout.html.erb @@ -1,7 +1,7 @@ <%= link_to event.notifiable_target, id: dom_id(event, "timelined"), class: "event event--#{ event.action } #{ "golden-effect" if event.card.golden? } center-block flex flex-column full-width align-start justify-start position-relative", - style: "--card-color: #{ card.closed? ? "var(--color-card-complete)" : card.color };", + style: "--card-color: #{ card.closed? ? "var(--color-card-complete)" : card.color[:value] };", target: "_top", data: { related_element_target: "related", diff --git a/app/views/public/cards/show.html.erb b/app/views/public/cards/show.html.erb index a3fc7ffcc..f6dacc150 100644 --- a/app/views/public/cards/show.html.erb +++ b/app/views/public/cards/show.html.erb @@ -19,7 +19,7 @@ <% end %>
+ class="card-perma card-perma--public" data-controller="lightbox" style="--card-color: <%= @card.color[:value] %>;">
<%= card_article_tag @card, class: "card" do %>
diff --git a/test/models/column_test.rb b/test/models/column_test.rb index 6bc9e5210..8f125498a 100644 --- a/test/models/column_test.rb +++ b/test/models/column_test.rb @@ -4,7 +4,7 @@ class ColumnTest < ActiveSupport::TestCase test "creates column with default color when color not provided" do column = boards(:writebook).columns.create!(name: "New Column") - assert_equal Card::DEFAULT_COLOR, column.color + assert_equal Card::DEFAULT_COLOR[:value], column.color end test "touch all the cards when the name or color changes" do