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

Render tags and users in menu, filter them

Browse Source
This commit is contained in:
Jason Zimdars
2025-06-18 15:36:01 -05:00
parent ec18e60be4
commit 1b1a38b8a1
8 changed files with 81 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/fizzy-menu.css
+1
View File
@@ -6,6 +6,7 @@
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
z-index: 5;
}
.fizzy-menu {
app/assets/stylesheets/popup.css
+12 -4
View File
@@ -1,13 +1,15 @@
@layer components {
.popup {
--panel-border-radius: 0.5em;
--panel-padding: var(--block-space);
--panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
--panel-size: auto;
inline-size: auto;
inset: 0 auto auto 50%;
max-block-size: 80vh;
min-inline-size: min(25ch, 90vw);
max-inline-size: min(50ch, 90vw);
max-inline-size: min(55ch, 90vw);
overflow: auto;
position: absolute;
transform: translateX(-50%);
z-index: var(--z-popup);
@@ -33,6 +35,14 @@
}
}
.popup__footer {
background-color: var(--color-canvas);
inset: auto 0 0 0;
padding: var(--block-space);
position: sticky;
z-index: 1;
}
.popup__group {
background: var(--color-ink-lightest);
max-inline-size: 100%;
@@ -104,8 +114,6 @@
}
.popup__list {
max-block-size: 40dvh;
overflow: auto;
row-gap: 2px;
}
app/views/cards/index/_header.html.erb
+19 -5
View File
@@ -28,12 +28,26 @@
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
<%= render "events/filter/header" %>
<menu contents>
<%= render "cards/index/collections_filter", filter: filter %>
</menu>
<p class="txt-small txt-align-center margin-block-half full-width">
<% if Current.user.collections.many? %>
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">Collections</strong>
<menu contents>
<%= render "cards/index/collections_filter", filter: filter %>
</menu>
<% end %>
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">Tags</strong>
<div class="flex flex-column max-width popup__list full-width">
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
</div>
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">People</strong>
<div class="flex flex-column max-width popup__list full-width">
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
</div>
<footer class="popup__footer txt-small txt-align-center full-width">
Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
</p>
</footer>
<% end %>
</div>
</header>
app/views/cards/show/_collections.html.erb
+1
View File
@@ -1,3 +1,4 @@
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">Collections</strong>
<%= form_with url: cards_path, method: :get, class: "flex flex-column max-width popup__list full-width",
data: { controller: "form" } do |form| %>
<% if Current.user.collections.one? %>
app/views/cards/show/_header.html.erb
+17 -5
View File
@@ -24,12 +24,24 @@
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
<%= render "events/filter/header" %>
<menu contents>
<%= render "cards/show/collections" %>
</menu>
<p class="txt-small txt-align-center margin-block-half full-width">
<% if Current.user.collections.many? %>
<menu contents>
<%= render "cards/show/collections" %>
</menu>
<% end %>
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">Tags</strong>
<div class="flex flex-column max-width popup__list full-width">
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
</div>
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">People</strong>
<div class="flex flex-column max-width popup__list full-width">
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
</div>
<footer class="popup__footer txt-small txt-align-center full-width">
Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
</p>
</footer>
<% end %>
</div>
</header>
app/views/events/_filter.html.erb
+17 -6
View File
@@ -14,7 +14,6 @@
<% end %>
<%= tag.dialog class: "fizzy-dialog filter events__popup popup popup--animated panel flex-column align-start fill-white",
style: "z-index: 5;",
data: {
action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
controller: "filter navigable-list",
@@ -25,19 +24,31 @@
type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
<%= render "events/filter/header" %>
<%= render "events/filter/custom_collections" %>
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">Collections</strong>
<%= form_with url: events_path, method: :get, class: "flex flex-column max-width popup__list full-width",
data: { controller: "form" } do |form| %>
<% if Current.user.collections.many? %>
<div contents>
<menu contents>
<%= render "events/filter/custom_collections" %>
<%= render "events/filter/all_collections_option", form: form, filter: filter %>
<%= render partial: "events/filter/collection_option", collection: Current.user.collections.alphabetically, as: :collection, locals: { form: form, filter: filter } %>
</div>
</menu>
<% end %>
<% end %>
<p class="txt-small txt-align-center margin-block-half full-width">
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">Tags</strong>
<div class="flex flex-column max-width popup__list full-width">
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
</div>
<strong class="txt-uppercase txt-x-small margin-block-half pad-inline">People</strong>
<div class="flex flex-column max-width popup__list full-width">
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
</div>
<footer class="popup__footer txt-small txt-align-center full-width">
Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
</p>
</footer>
<% end %>
</div>
app/views/events/filter/_tag.html.erb
+7
View File
@@ -0,0 +1,7 @@
<li class="popup__group flex align-center" data-value="<%= tag.title.downcase %>" data-filter-target="item" data-navigable-list-target="item">
<%= icon_tag "tag" %>
<%= link_to cards_path(tag_ids: [ tag ]), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= tag.title %></span>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<% end %>
</li>
app/views/events/filter/_user.html.erb
+7
View File
@@ -0,0 +1,7 @@
<li class="popup__group flex align-center" data-value="<%= user.name.downcase %>" data-filter-target="item" data-navigable-list-target="item">
<%= icon_tag "person" %>
<%= link_to user, class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= user.name %></span>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<% end %>
</li>