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

Add collapsible nav sections

Browse Source
This commit is contained in:
Andy Smith
2025-09-12 12:32:32 -05:00
parent e1a428b46b
commit 373b139b9a
13 changed files with 50 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/popup.css
+19 -2
View File
@@ -45,8 +45,6 @@
white-space: nowrap;
}
.popup__section {}
.popup__section-title {
background: var(--color-canvas);
font-size: var(--text-small);
@@ -61,6 +59,25 @@
&::-webkit-details-marker {
display: none;
}
&:is(summary) {
align-items: center;
cursor: pointer;
display: flex;
gap: 2ch;
justify-content: space-between;
}
.icon--caret-down {
opacity: 0.66;
transition: rotate 150ms ease-out;
}
.popup__section:not([open]) & {
.icon--caret-down {
rotate: -90deg;
}
}
}
.popup__list {
app/helpers/filters_helper.rb
+12 -1
View File
@@ -20,7 +20,6 @@ module FiltersHelper
concat icon_tag(icon, class: "popup__icon")
concat(link_to(path, class: "popup__btn btn") do
concat tag.span(label, class: "overflow-ellipsis")
concat tag.span(" ›", class: "translucent flex-item-no-shrink flex-item-justify-end")
end)
end
end
@@ -36,6 +35,18 @@ module FiltersHelper
}, &block
end
def filter_collapsible_section(title, &block)
tag.details class: "popup__section", open: true do
concat(tag.summary(class: "popup__section-title") do
concat title
concat icon_tag "caret-down"
end)
concat(tag.ul(class: "popup__list") do
capture(&block)
end)
end
end
def filter_hotkey_link(title, path, key, icon)
link_to path, class: "popup__item btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do
concat icon_tag(icon)
app/views/filters/menu/_collections.html.erb
+4 -7
View File
@@ -1,11 +1,8 @@
<% if user_filtering.collections.any? %>
<details class="popup__section" open>
<summary class="popup__section-title">Collections</summary>
<%= filter_collapsible_section "Collections" do %>
<%= form_with url: user_filtering.self_filter_path, method: :get, data: { controller: "form" } do |form| %>
<ul class="popup__list">
<%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
<%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
</ul>
<%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
<%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
<% end %>
</details>
<% end %>
<% end %>
app/views/filters/menu/_custom.html.erb
+3 -4
View File
@@ -1,7 +1,6 @@
<%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %>
<div class="popup__section-title">Saved filters</div>
<ul class="popup__list">
<%= filter_collapsible_section "Saved filters" do %>
<%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %>
<%= render "filters/menu/custom/create" %>
<%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter, locals: { user_filtering: user_filtering } %>
</ul>
<% end %>
<% end %>
app/views/filters/menu/_places.html.erb
+2 -4
View File
@@ -1,10 +1,8 @@
<div class="popup__section-title">Jump to…</div>
<ul class="popup__list">
<%= filter_collapsible_section "Jump to…" do %>
<%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %>
<%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %>
<%= filter_place_menu_item notifications_path, "Notifications", "bell" %>
<%= filter_place_menu_item notifications_settings_path, "Notification Settings", "settings" %>
<%= filter_place_menu_item search_path, "Search", "search" %>
<%= filter_place_menu_item workflows_path, "Workflows", "bolt" %>
</ul>
<% end %>
app/views/filters/menu/_tags.html.erb
+2 -4
View File
@@ -1,5 +1,3 @@
<div class="popup__section-title">Tags</div>
<ul class="popup__list">
<%= filter_collapsible_section "Tags" do %>
<%= render partial: "filters/menu/tags/tag", collection: user_filtering.tags, as: :tag %>
</ul>
<% end %>
app/views/filters/menu/_users.html.erb
+2 -3
View File
@@ -1,4 +1,3 @@
<div class="popup__section-title">People</div>
<ul class="popup__list">
<%= filter_collapsible_section "People" do %>
<%= render partial: "filters/menu/users/user", collection: user_filtering.users, as: :user %>
</ul>
<% end %>
app/views/filters/menu/collections/_all_option.html.erb
-1
View File
@@ -12,7 +12,6 @@
<%= link_to clear_url_path, class: "popup__btn btn" do %>
<span class="overflow-ellipsis">All collections</span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
<% end %>
</li>
<% end %>
app/views/filters/menu/collections/_collection.html.erb
-1
View File
@@ -14,6 +14,5 @@
<%= link_to cards_path(collection_ids: [ collection ]), class: "popup__btn btn" do %>
<span class="overflow-ellipsis"><%= collection.name %></span>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<% end %>
</li>
app/views/filters/menu/custom/_create.html.erb
+1 -1
View File
@@ -1,6 +1,6 @@
<li class="popup__item overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
<%= icon_tag "bookmark", class: "popup__icon" %>
<%= link_to cards_path(expand_all: true), class: "popup__btn btn" do %>
Create a new filter
<strong class="txt-small">Create a new filter</strong>
<% end %>
</li>
app/views/filters/menu/custom/_filter.html.erb
+5 -6
View File
@@ -1,10 +1,9 @@
<li class="popup__item overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
<%= icon_tag "bookmark", class: "popup__icon" %>
<%= link_to cards_path(filter_id: filter.id), class: "popup__btn btn" do %>
<%= icon_tag "bookmark" %>
<div class="flex flex-column txt-tight-lines min-width txt-small">
<span class="overflow-ellipsis"><%= filter_selected_collections_title(user_filtering) %></span>
<span class="overflow-ellipsis"><%= filter.summary %></span>
<div class="txt-tight-lines min-width txt-small overflow-ellipsis">
<div><%= filter_selected_collections_title(user_filtering) %></div>
<div><%= filter.summary %></div>
</div>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<% end %>
</li>
app/views/filters/menu/tags/_tag.html.erb
-1
View File
@@ -2,6 +2,5 @@
<%= icon_tag "tag", class: "popup__icon" %>
<%= link_to cards_path(tag_ids: [tag]), class: "popup__btn btn" do %>
<span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<% end %>
</li>
app/views/filters/menu/users/_user.html.erb
-1
View File
@@ -2,6 +2,5 @@
<%= icon_tag "person", class: "popup__icon" %>
<%= link_to user, class: "popup__btn btn" do %>
<span class="overflow-ellipsis"><%= user.name %></span>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<% end %>
</li>