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

Merge pull request #1411 from basecamp/filter-section-improvements

Browse Source 
Hide filters when empty
This commit is contained in:
Andy Smith
2025-10-28 16:48:59 -05:00
committed by GitHub
parent 59a63aac55 7ce10b3dcf
commit ae9e38bfd0
3 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/filters.css
+15
View File
@@ -19,6 +19,14 @@
}
}
.filters__list {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--inline-space-half);
justify-content: center;
}
.filter {
&[aria-selected] {
display: flex;
@@ -133,12 +141,19 @@
}
.quick-filter {
position: relative;
&:has([aria-checked="true"]):not(.quick-filter--with-default) {
.input--select {
--input-background: var(--color-selected);
}
}
/* Hide a quick filter if there's nothing in it to filter by */
&:not(:has(.popup__item)) {
display: none !important;
}
@media (max-width: 80ch) {
display: none;
}
app/views/filters/_settings.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<%= yield form if block_given? %>
<div class="flex-inline center align-center gap-half" data-controller="toggle-enable">
<div class="filters__list" data-controller="toggle-enable">
<%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %>
<%= yield form if block_given? %>
<% end %>
app/views/filters/settings/_tags.html.erb
+26 -27
View File
@@ -1,39 +1,38 @@
<% filter = user_filtering.filter %>
<%= tag.div class: "quick-filter position-relative",
<%= tag.div class: "quick-filter",
data: {
controller: "dialog multi-selection-combobox",
action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
filter_show: user_filtering.show_tags?,
multi_selection_combobox_no_selection_label_value: "Tagged…" } do %>
<button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
<span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
</span>
</button>
<button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
<span class="overflow-ellipsis" data-multi-selection-combobox-target="label"></span>
</button>
<template data-multi-selection-combobox-target="hiddenFieldTemplate">
<%= hidden_field_tag "tag_ids[]", nil, data: { filter_settings_target: "field" } %>
</template>
<template data-multi-selection-combobox-target="hiddenFieldTemplate">
<%= hidden_field_tag "tag_ids[]", nil, data: { filter_settings_target: "field" } %>
</template>
<%= filter_dialog "Tagged…" do %>
<strong class="popup__title">Tagged…</strong>
<%= filter_dialog "Tagged…" do %>
<strong class="popup__title">Tagged…</strong>
<% if user_filtering.tags.many? %>
<%= text_field_tag nil, nil, id: 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" } %>
<% end %>
<ul class="popup__list" data-filter-target="list" role="listbox">
<% user_filtering.tags.each do |tag| %>
<%= content_tag(:li, class: "popup__item", data: {
filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: tag.id, multi_selection_combobox_label: tag.hashtag },
role: "checkbox", aria: { checked: filter.tags.include?(tag) }) do %>
<button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
<span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
</button>
<% end %>
<% end %>
</ul>
<% if user_filtering.tags.many? %>
<%= text_field_tag nil, nil, id: 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" } %>
<% end %>
<ul class="popup__list" data-filter-target="list" role="listbox">
<% user_filtering.tags.each do |tag| %>
<%= content_tag(:li, class: "popup__item", data: {
filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: tag.id, multi_selection_combobox_label: tag.hashtag },
role: "checkbox", aria: { checked: filter.tags.include?(tag) }) do %>
<button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
<span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
</button>
<% end %>
<% end %>
</ul>
<% end %>
<% end %>