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

Stub out column menus

Browse Source
This commit is contained in:
Andy Smith
2025-09-24 15:38:01 -05:00
parent 0da89ee2f4
commit d9958d01d0
3 changed files with 48 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+22 -2
View File
@@ -106,10 +106,13 @@
font-size: var(--text-x-small);
font-weight: 600;
gap: 0.5ch;
line-height: var(--column-width-collapsed);
position: relative;
text-transform: uppercase;
> * {
grid-area: unset !important;
}
.cards.is-collapsed & {
block-size: 100%;
flex-direction: column;
@@ -145,6 +148,9 @@
}
.cards:not(.is-collapsed) & {
display: grid;
grid-template-columns: auto 1fr auto;
inline-size: 100%;
margin-block-end: calc(-0.5 * var(--cards-gap));
&:hover {
@@ -155,20 +161,34 @@
}
.cards__expander-count {
line-height: var(--column-width-collapsed);
.cards:not(.is-collapsed) & {
display: none;
opacity: 0;
}
}
.cards__expander-title {
font-weight: inherit;
font-size: inherit;
grid-column: 2;
line-height: var(--column-width-collapsed);
.cards.is-collapsed & {
writing-mode: vertical-rl;
}
}
.cards__expander-menu {
.panel {
--panel-padding: 1ch;
}
.cards.is-collapsed & {
display: none;
}
}
.blank-slate--card {
box-shadow: none !important;
border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
app/helpers/cards_helper.rb
+16
View File
@@ -74,6 +74,22 @@ module CardsHelper
tag.header class: "cards__expander btn btn--plain", data: { action: "click->collapsible-columns#toggle" }, style: "--card-count: #{[ count, 20 ].min}", aria: { role: "button" } do
concat(tag.span count > 99 ? "99+" : count, class: "cards__expander-count")
concat(tag.h2 title, class: "cards__expander-title")
concat(tag.div class: "cards__expander-menu position-relative", data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" } do
concat(tag.button class: "btn btn--circle txt-x-small borderless", data: { action: "click->dialog#open:stop" } do
concat(icon_tag "menu-dots-horizontal", class: "translucent")
concat(tag.span "Column options", class: "for-screen-reader")
end)
concat(tag.dialog class: "popup panel flex-column gap fill-white shadow txt-small margin-block-double", data: { dialog_target: "dialog" } do
concat(tag.ul class: "popup__list" do
concat(tag.li class: "popup__item" do
concat(tag.button "Rename column", class: "popup__btn btn")
end)
concat(tag.li class: "popup__item" do
concat(tag.button "Delete column", class: "popup__btn btn")
end)
end)
end)
end)
end
end
end
app/views/cards/index/_columns.html.erb
+10 -4
View File
@@ -18,10 +18,16 @@
<%= render "cards/index/engagement/closed", column: columns.closed %>
<button class="btn btn--circle txt-x-small borderless">
<%= icon_tag "menu-dots-horizontal" %>
<span class="for-screen-reader">Add a new column, etc.</span>
</button>
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open:stop">
<%= icon_tag "add", class: "translucent" %>
<span class="for-screen-reader">Add a new column, etc.</span>
</button>
<dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
<input class="input" placeholder="Column name" />
<button class="btn btn--link">Add a column</button>
</dialog>
</div>
</div>
</div>
<% end %>