bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow selecting default color

Browse Source 
- Adjust swatch layout to be more resilliant and space efficient
- Select text on focus
- Update placeholder
This commit is contained in:
Jason Zimdars
2025-10-13 16:55:51 -05:00
parent 03dcfe8964
commit 8d82a1557b
2 changed files with 16 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/color-picker.css
+10 -34
View File
@@ -1,40 +1,16 @@
@layer components {
.color-picker {
--color-picker-origin: calc(var(--btn-size) / 2 + var(--color-picker-spacer));
--color-picker-spacer: 0.5ch;
background-color: var(--color-canvas);
border-radius: calc(var(--btn-size) / 2 + var(--color-picker-spacer));
gap: var(--color-picker-spacer);
inline-size: auto !important;
inset: calc(-1 * var(--color-picker-spacer)) auto auto calc(-1 * var(--color-picker-spacer));
max-inline-size: var(--panel-size) !important;
padding: var(--color-picker-spacer);
position: absolute;
transform: scale(0.5);
transform-origin: var(--color-picker-origin) var(--color-picker-origin);
transition: 150ms allow-discrete;
transition-property: display, opacity, overlay, transform;
z-index: var(--z-popup);opacity: 0;
&[open] {
display: flex;
opacity: 1;
transform: scale(1);
}
@starting-style {
&[open] {
opacity: 0;
transform: scale(0.5);
}
}
}
.color-picker__colors {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--color-picker-spacer);
grid-template-columns: repeat(3, 1fr);
gap: var(--inline-space-half);
.btn {
--btn-border-radius: 0.1em;
--btn-size: 2em;
--icon-size: 1.3em;
inline-size: 100%;
}
}
}
app/views/collections/show/menu/_column_form.html.erb
+6 -6
View File
@@ -1,10 +1,10 @@
<%= form_with model: [collection, column], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset" } do |form| %>
<%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name,
required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank" %>
<div class="flex flex-wrap gap-half justify-space-between margin-block-half">
<% Card::COLORS.each do |color| %>
<label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
<%= form.radio_button :color, color, checked: (column.color == color) %>
<%= form.text_field :name, class: "input", placeholder: "Name this column", value: column.name,
required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank", data: { action: "focus->form#select" } %>
<div class="color-picker__colors">
<% ([Card::DEFAULT_COLOR] + Card::COLORS).each do |color| %>
<label class="btn txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
<%= form.radio_button :color, color, checked: (column.color == color || (column.new_record? && color == Card::DEFAULT_COLOR)) %>
<%= icon_tag "check", class: "checked" %>
<span class="for-screen-reader"><%= color %></span>
</label>