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

Merge pull request #1098 from basecamp/collapsible-nav-sections

Browse Source 
Collapsible nav sections
This commit is contained in:
Andy Smith
2025-09-15 12:54:21 -05:00
committed by GitHub
parent 46de946e25 cab6992555
commit 60e515e462
29 changed files with 185 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-perma.css
+1 -1
View File
@@ -221,7 +221,7 @@
z-index: 1;
}
.btn:not(.popup__item, .btn--plain, .btn--reversed) {
.btn:not(.popup__btn, .btn--plain, .btn--reversed) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-inverted);
}
app/assets/stylesheets/cards.css
+4
View File
@@ -27,6 +27,10 @@
@media (prefers-color-scheme: dark) {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
.popup {
inline-size: 260px;
}
}
/* Header
app/assets/stylesheets/fizzy-menu.css
+1 -1
View File
@@ -63,7 +63,7 @@
max-inline-size: 100%;
/* When all its children are hidden, hide this as well so it doesn't take up space */
&:has(.popup__group[hidden]):not(:has(.popup__group:not([hidden]))) {
&:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
display: none;
}
app/assets/stylesheets/icons.css
+2 -1
View File
@@ -7,8 +7,9 @@
flex-shrink: 0;
inline-size: var(--icon-size, 1em);
mask-image: var(--svg);
mask-position: center;
mask-repeat: no-repeat;
mask-size: cover;
mask-size: var(--icon-size, 1em);
pointer-events: none;
user-select: none;
}
app/assets/stylesheets/layout.css
+5
View File
@@ -20,6 +20,11 @@
max-inline-size: 100dvw;
}
:where(#header) {
position: relative;
z-index: var(--z-nav);
}
:is(#header, #footer) {
@media print {
display: none;
app/assets/stylesheets/popup.css
+91 -67
View File
@@ -1,8 +1,11 @@
@layer components {
.popup {
--btn-background: transparent;
--panel-border-radius: 0.5em;
--panel-padding: var(--block-space);
--panel-size: auto;
--popup-icon-size: 24px;
--popup-item-padding-inline: var(--inline-space-half);
inset: 0 auto auto 50%;
max-block-size: 80vh;
@@ -31,30 +34,71 @@
--panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
}
.card & {
inline-size: 260px;
form {
display: contents;
}
}
#header:has(.popup) {
position: relative;
z-index: var(--z-nav);
.popup__title {
font-weight: 800;
white-space: nowrap;
}
.popup__footer {
background-color: var(--color-canvas);
border-block-start: 1px solid var(--color-ink-lighter);
/* Hide lists when all the items within are hidden */
.popup__section {
&:has(.popup__section-title:only-child),
&:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
display: none;
}
}
.popup__section-title {
background: var(--color-canvas);
font-size: var(--text-small);
inset: auto 0 0;
line-height: 1.6;
margin-block-start: var(--block-space-half);
padding: 1.5ch;
font-weight: bold;
list-style: none;
padding: var(--block-space-half) var(--inline-space-half);
position: sticky;
text-align: center;
text-transform: uppercase;
top: calc(-1 * var(--block-space));
z-index: 1;
&:is(summary) {
align-items: center;
cursor: pointer;
display: flex;
gap: 2ch;
justify-content: space-between;
}
&::-webkit-details-marker {
display: none;
}
.icon--caret-down {
opacity: 0.66;
transition: rotate 150ms ease-out;
}
.popup__section:not([open]) & {
.icon--caret-down {
rotate: -90deg;
}
}
}
.popup__group {
.popup__list {
display: flex;
flex-direction: column;
inline-size: 100%;
list-style: none;
margin: 0;
max-inline-size: 100%;
padding: 0;
row-gap: 1px;
}
.popup__item {
align-items: center;
background: transparent;
border-radius: 0.3em;
@@ -62,14 +106,6 @@
inline-size: 100%;
max-inline-size: 100%;
.popup__list &:has(*:first-child:not(.popup__item)) {
padding-inline-start: var(--inline-space-half);
}
.btn {
--btn-background: transparent;
}
@media (any-hover: hover) {
&:hover {
background: var(--color-ink-lightest);
@@ -85,52 +121,31 @@
}
}
}
}
.popup__list {
display: flex;
flex-direction: column;
inline-size: 100%;
list-style: none;
margin: 0;
max-inline-size: 100%;
padding: 0;
row-gap: 2px;
&:has(> :first-child:not(.popup__btn)) {
padding-inline-start: var(--popup-item-padding-inline);
}
/* Hide lists when all the items within are hidden */
&:has(.popup__group-title:only-child),
&:has(.popup__group[hidden]):not(:has(.popup__group:not([hidden]))) {
display: none;
&:has(> :last-child:not(.popup__btn)) {
padding-inline-end: var(--popup-item-padding-inline);
}
}
.popup__item {
--btn-background: transparent;
/* The actionable thing with padding within popup__item */
.popup__btn {
--btn-border-radius: 0.3em;
--btn-border-size: 0;
--btn-font-weight: 500;
--btn-padding: var(--inline-space-half) var(--inline-space);
flex: 1 1 auto;
font-weight: 500;
justify-content: start;
inline-size: 100%;
min-inline-size: 0;
max-inline-size: 100%;
padding: var(--inline-space-half) var(--popup-item-padding-inline);
text-align: start;
@media (any-hover: hover) {
&:where(:not(:active):hover) {
--btn-background: var(--color-selected);
}
}
.icon {
block-size: 1em;
inline-size: 1em;
}
&:has(input:checked) {
--btn-background: transparent;
--btn-color: var(--color-ink);
.icon.checked {
@@ -145,31 +160,40 @@
}
}
.popup__new {
--btn-icon-size: 1em;
.popup__icon {
--icon-size: 1em;
padding-inline-start: var(--inline-space-half);
inline-size: var(--popup-icon-size);
}
.icon {
margin-inline-end: 0.5em;
.popup__radio {
--icon-size: var(--text-x-small);
block-size: var(--popup-icon-size);
inline-size: var(--popup-icon-size);
flex-shrink: 0;
&:hover {
--btn-border-color: var(--color-ink);
}
}
.popup__title {
font-weight: 800;
}
.popup__group-title {
background: var(--color-canvas);
.popup__footer {
background-color: var(--color-canvas);
border-block-start: 1px solid var(--color-ink-lighter);
font-size: var(--text-small);
font-weight: bold;
padding: var(--block-space-half) var(--inline-space-half);
inset: auto 0 0;
line-height: 1.6;
margin-block-start: var(--block-space-half);
padding: 1.5ch;
position: sticky;
text-transform: uppercase;
top: calc(-1 * var(--block-space));
text-align: center;
z-index: 1;
}
/* Variants
/* ------------------------------------------------------------------------ */
.popup--animated {
opacity: 0;
transform: scale(0.2) translateX(-50%);
app/helpers/filters_helper.rb
+16 -5
View File
@@ -16,11 +16,10 @@ module FiltersHelper
end
def filter_place_menu_item(path, label, icon)
tag.li class: "popup__group", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
concat icon_tag(icon)
concat(link_to(path, class: "popup__item btn") do
tag.li class: "popup__item", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
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,8 +35,20 @@ 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__group 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
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)
concat tag.span(title.html_safe)
concat tag.kbd(key)
app/views/cards/assignments/new.html.erb
+3 -3
View File
@@ -5,7 +5,7 @@
dialog_target: "dialog",
navigable_list_focus_on_selection_value: false,
navigable_list_actionable_items_value: true } do %>
<strong class="popup__title txt-nowrap">Assign this to…</strong>
<strong class="popup__title">Assign this to…</strong>
<% if @collection.users.active.count > 1 %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half", autofocus: true,
@@ -14,9 +14,9 @@
<ul class="popup__list" data-filter-target="list">
<% @collection.users.active.alphabetically.each do |user| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= button_to card_assignments_path(@card, params: { assignee_id: user.id }), method: :post,
class: "popup__item btn",
class: "popup__btn btn",
form_class: "max-width flex-item-grow" do %>
<span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
<%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.assignees.include?(user) %>
app/views/cards/display/perma/_collection.html.erb
+3 -3
View File
@@ -12,7 +12,7 @@
dialog_target: "dialog",
navigable_list_focus_on_selection_value: false,
navigable_list_actionable_items_value: true } do %>
<strong class="popup__title pad-inline-half txt-nowrap">Move this card to…</strong>
<strong class="popup__title pad-inline-half">Move this card to…</strong>
<% if Current.user.collections.count > 1 %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half font-weight-normal", autofocus: true,
@@ -21,9 +21,9 @@
<ul class="popup__list margin-block-start-half margin-none-block-end" data-filter-target="list">
<% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
class: "popup__item btn",
class: "popup__btn btn",
form_class: "max-width flex-item-grow" do %>
<span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
<%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if card.collection == collection %>
app/views/cards/index/_workflow_filter.html.erb
+2 -2
View File
@@ -17,12 +17,12 @@
<%= filter_hidden_field_tag key, value %>
<% end %>
<%= link_to cards_path(filter.as_params.except(:stage_ids, :engagement_status)), class: "popup__item btn" do %>
<%= link_to cards_path(filter.as_params.except(:stage_ids, :engagement_status)), class: "popup__btn btn" do %>
<span class="overflow-ellipsis">All stages</span>
<% end %>
<% workflow.stages.each do |stage| %>
<div class="popup__item btn">
<div class="popup__btn btn">
<%= form.check_box :stage_ids, {
multiple: true,
checked: filter.stages.include?(stage),
app/views/cards/taggings/new.html.erb
+3 -3
View File
@@ -5,7 +5,7 @@
data-navigable-list-actionable-items-value="true"
data-action="keydown->navigable-list#navigate filter:changed->navigable-list#reset dialog:show@document->navigable-list#reset"
>
<strong class="popup__title txt-nowrap">Tag this…</strong>
<strong class="popup__title">Tag this…</strong>
<%= form_with url: card_taggings_path(@card), class: "flex flex-column gap-half full-width margin-block-half" do |form| %>
<%= form.text_field :tag_title, placeholder: @tags.any? ? "Add a new tag or filter…" : "Name this tag…", class: "input txt-small full-width",
@@ -14,9 +14,9 @@
<ul class="popup__list" data-filter-target="list">
<% @tags.each do |tag| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= button_to card_taggings_path(@card, params: { tag_title: tag.title }), method: :post,
class: "popup__item btn",
class: "popup__btn btn",
form_class: "max-width flex-item-grow" do %>
<span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
<%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.tagged_with?(tag) %>
app/views/filters/menu/_collections.html.erb
+2 -3
View File
@@ -2,10 +2,9 @@
<%= form_with url: user_filtering.self_filter_path(script_name: Account.sole.slug), method: :get, class: "display-contents",
data: { controller: "form" } do |form| %>
<% if user_filtering.collections.any? %>
<ul class="popup__list">
<li class="popup__group-title">Collections</li>
<%= filter_collapsible_section "Collections" do %>
<%= 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>
<% end %>
<% end %>
<% end %>
app/views/filters/menu/_custom.html.erb
+3 -8
View File
@@ -1,11 +1,6 @@
<%= form_with url: cards_path, method: :get, class: "display-contents",
data: { controller: "form" } do |form| %>
<ul class="popup__list">
<li class="popup__group-title">Saved filters</li>
<%= 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 -5
View File
@@ -1,11 +1,8 @@
<ul class="popup__list">
<li class="popup__group-title">Jump to…</li>
<%= 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 @@
<ul class="popup__list">
<li class="popup__group-title">Tags</li>
<%= 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 @@
<ul class="popup__list">
<li class="popup__group-title">People</li>
<%= 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
+3 -4
View File
@@ -1,8 +1,8 @@
<% clear_url_path = user_filtering.self_filter_path(user_filtering.as_params.except(:collection_ids), script_name: request.script_name) %>
<% if Current.user.collections.many? %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-all">
<%= link_to clear_url_path, class: "btn txt-xx-small flex-item-no-shrink" do %>
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-all">
<%= link_to clear_url_path, class: "popup__radio btn" do %>
<%= check_box_tag "filter_collections", nil, user_filtering.collections.blank?, class: "form-checkbox" %>
<span class="for-screen-reader">
See everything in all collections
@@ -10,9 +10,8 @@
<%= icon_tag "check", size: 18, class: "checked" %>
<% end %>
<%= link_to clear_url_path, class: "popup__item btn" do %>
<%= 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
+3 -4
View File
@@ -1,5 +1,5 @@
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-<%= collection.id %>">
<label class="btn txt-xx-small">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-<%= collection.id %>">
<label class="popup__radio btn">
<%= form.check_box "collection_ids[]", {
checked: user_filtering.filter.collections.include?(collection),
data: { action: "change->form#submit" },
@@ -12,8 +12,7 @@
<%= icon_tag "check", size: 18, class: "checked" %>
</label>
<%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
<%= 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
+4 -7
View File
@@ -1,9 +1,6 @@
<li class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
<%= link_to cards_path(expand_all: true), class: "btn popup__new popup__item" do %>
<%= icon_tag "bookmark" %>
<div class="flex flex-column txt-tight-lines min-width txt-small">
<strong class="overflow-ellipsis">Create a new filter</strong>
</div>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<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 %>
<strong class="txt-small">Create a new filter</strong>
<% end %>
</li>
app/views/filters/menu/custom/_filter.html.erb
+6 -7
View File
@@ -1,10 +1,9 @@
<li class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
<%= link_to cards_path(filter_id: filter.id), class: "btn popup__new popup__item" 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>
<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 %>
<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
+3 -4
View File
@@ -1,7 +1,6 @@
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
<%= icon_tag "tag" %>
<%= link_to cards_path(tag_ids: [tag]), class: "popup__item btn" do %>
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
<%= 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
+3 -4
View File
@@ -1,7 +1,6 @@
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
<%= icon_tag "person" %>
<%= link_to user, class: "popup__item btn" do %>
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
<%= 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>
app/views/filters/settings/_assignees.html.erb
+5 -5
View File
@@ -14,7 +14,7 @@
</button>
<%= filter_dialog "Assigned to…" do %>
<strong class="popup__title txt-nowrap">Assigned to…</strong>
<strong class="popup__title">Assigned to…</strong>
<% if User.active.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
@@ -22,7 +22,7 @@
<% end %>
<ul class="popup__list" data-filter-target="list">
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
<% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -34,7 +34,7 @@
<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
<%= form.button type: "submit", class: "popup__item btn" do %>
<%= form.button type: "submit", class: "popup__btn btn" do %>
<span class="overflow-ellipsis flex-item-grow">No one</span>
<% if filter.assignment_status.unassigned? %>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
@@ -43,7 +43,7 @@
<% end %>
</li>
<% User.active.order(:name).each do |user| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
<% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -61,7 +61,7 @@
<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
<%= form.button type: "submit", class: "popup__item btn" do %>
<%= form.button type: "submit", class: "popup__btn btn" do %>
<span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
<% if filter.assignees.include?(user) %>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
app/views/filters/settings/_closers.html.erb
+3 -3
View File
@@ -13,7 +13,7 @@
</button>
<%= filter_dialog "Closed by…" do %>
<strong class="popup__title txt-nowrap">Closed by…</strong>
<strong class="popup__title">Closed by…</strong>
<% if user_filtering.users.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
@@ -22,7 +22,7 @@
<ul class="popup__list" data-filter-target="list">
<% user_filtering.users.each do |user| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
<% filter.as_params.except(:closer_ids).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -40,7 +40,7 @@
<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
<%= form.button type: "submit", class: "popup__item btn" do %>
<%= form.button type: "submit", class: "popup__btn btn" do %>
<span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
<% if filter.closers.include?(user) %>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
app/views/filters/settings/_creators.html.erb
+3 -3
View File
@@ -13,7 +13,7 @@
</button>
<%= filter_dialog "Added by…" do %>
<strong class="popup__title txt-nowrap">Added by…</strong>
<strong class="popup__title">Added by…</strong>
<% if user_filtering.users.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
@@ -22,7 +22,7 @@
<ul class="popup__list" data-filter-target="list">
<% user_filtering.users.each do |user| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
<% filter.as_params.except(:creator_ids).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -40,7 +40,7 @@
<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
<%= form.button type: "submit", class: "popup__item btn" do %>
<%= form.button type: "submit", class: "popup__btn btn" do %>
<span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
<% if filter.creators.include?(user) %>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
app/views/filters/settings/_indexed_by.html.erb
+3 -3
View File
@@ -9,11 +9,11 @@
</button>
<%= filter_dialog "Filter by…" do %>
<strong class="popup__title txt-nowrap">Filter by…</strong>
<strong class="popup__title">Filter by…</strong>
<ul class="popup__list" data-filter-target="list">
<% Filter::INDEXES.each do |index| %>
<li class="popup__group" data-navigable-list-target="item">
<li class="popup__item" data-navigable-list-target="item">
<%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
<% filter.as_params.except(:indexed_by).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -23,7 +23,7 @@
<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
<%= form.button type: "submit", class: "popup__item btn" do %>
<%= form.button type: "submit", class: "popup__btn btn" do %>
<span class="overflow-ellipsis flex-item-grow"><%= index.humanize %></span>
<% if filter.indexed_by == index %>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
app/views/filters/settings/_sorted_by.html.erb
+3 -3
View File
@@ -9,11 +9,11 @@
</button>
<%= filter_dialog "Sort by…" do %>
<strong class="popup__title txt-nowrap">Sort by…</strong>
<strong class="popup__title">Sort by…</strong>
<ul class="popup__list" data-filter-target="list">
<% Filter::SORTED_BY.each do |sort| %>
<li class="popup__group" data-navigable-list-target="item">
<li class="popup__item" data-navigable-list-target="item">
<%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
<% filter.as_params.except(:sorted_by).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -23,7 +23,7 @@
<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
<%= form.button type: "submit", class: "popup__item btn" do %>
<%= form.button type: "submit", class: "popup__btn btn" do %>
<span class="overflow-ellipsis flex-item-grow"><%= sorted_by_label(sort) %></span>
<% if filter.sorted_by == sort %>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
app/views/filters/settings/_tags.html.erb
+3 -3
View File
@@ -13,7 +13,7 @@
</button>
<%= filter_dialog "Tagged…" do %>
<strong class="popup__title txt-nowrap">Tagged…</strong>
<strong class="popup__title">Tagged…</strong>
<% if user_filtering.tags.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
@@ -22,7 +22,7 @@
<ul class="popup__list" data-filter-target="list">
<% user_filtering.tags.each do |tag| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__item" data-filter-target="item" data-navigable-list-target="item">
<%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
<% filter.as_params.except(:tag_ids).each do |key, value| %>
<%= filter_hidden_field_tag key, value %>
@@ -40,7 +40,7 @@
<%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
<%= form.button type: "submit", class: "popup__item btn" do %>
<%= form.button type: "submit", class: "popup__btn btn" do %>
<span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
<% if filter.tags.include?(tag) %>
<%= icon_tag "check", class: "checked flex-item-justify-end" %>
app/views/filters/settings/_time_window.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<% end %>
<% TimeWindowParser::VALUES.each do |value| %>
<div class="popup__item btn">
<div class="popup__btn btn">
<%= form.radio_button name, value,
checked: filter.public_send(name) == value,
data: { action: "change->form#submit" } %>