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

Merge pull request #935 from basecamp/mobile-color-picker

Browse Source 
Animate color piacker and split onto two rows for mobile
This commit is contained in:
Andy Smith
2025-08-18 14:58:27 -05:00
committed by GitHub
parent 49d29fa6f0 1f54e5d6bf
commit 40933ea491
2 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/color-picker.css
+36 -14
View File
@@ -1,18 +1,40 @@
.color-picker {
--panel-border-color: var(--card-color);
--panel-border-radius: 2em;
--panel-border-size: 2px;
--panel-padding: 0.5em;
--panel-size: auto;
@layer components {
.color-picker {
--color-picker-origin: calc(var(--btn-size) / 2 + var(--color-picker-spacer));
--color-picker-spacer: 0.5ch;
inline-size: auto !important;
inset: 50% auto auto calc(-1 * var(--panel-padding));
max-inline-size: var(--panel-size) !important;
position: absolute;
translate: 0 -50%;
z-index: var(--z-popup);
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;
&[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);
}
}
app/views/workflows/stages/_color.html.erb
+7 -9
View File
@@ -4,7 +4,7 @@
<span class="for-screen-reader">Change color</span>
</button>
<dialog class="color-picker panel fill-white shadow gap-half" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<dialog class="color-picker shadow" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<form method="dialog">
<button class="btn txt-small tooltip">
<%= icon_tag "remove" %>
@@ -12,15 +12,13 @@
</button>
</form>
<%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
<%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "color-picker__colors", data: { controller: "form", action: "change->form#submit" } do |form| %>
<% Card::COLORS.each do |color| %>
<span class="color-picker__color">
<label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
<%= form.radio_button :color, color %>
<%= icon_tag "check", class: "checked" %>
<span class="for-screen-reader"><%= color %></span>
</label>
</span>
<label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
<%= form.radio_button :color, color %>
<%= icon_tag "check", class: "checked" %>
<span class="for-screen-reader"><%= color %></span>
</label>
<% end %>
<% end %>
</dialog>