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

Handle filter toggles with JS

Browse Source 
To make them feel faster
This commit is contained in:
Jorge Manrubia
2025-09-12 14:10:49 +02:00
parent ae4fbc6443
commit 5e0918d373
14 changed files with 40 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/filters.css
+12
View File
@@ -117,5 +117,17 @@
display: none;
}
}
.filters:not(.filters--expanded) {
.quick-filter:not([data-filter-show=true]) {
display: none;
}
}
.filters.filters--expanded {
.quick-filter {
display: block;
}
}
}
app/controllers/my/filter_expansions_controller.rb
-7
View File
@@ -1,7 +0,0 @@
class My::FilterExpansionsController < ApplicationController
include FilterScoped
def create
render turbo_stream: turbo_stream.replace("filter-settings", partial: "filters/settings", locals: { user_filtering: @user_filtering })
end
end
app/models/user/filtering.rb
+6 -6
View File
@@ -47,28 +47,28 @@ class User::Filtering
end
def show_indexed_by?
expanded? || !filter.indexed_by.all?
!filter.indexed_by.all?
end
def show_sorted_by?
expanded? || !filter.sorted_by.latest?
!filter.sorted_by.latest?
end
def show_tags?
return unless Tag.any?
expanded? || filter.tags.any?
filter.tags.any?
end
def show_assignees?
expanded? || filter.assignees.any?
filter.assignees.any?
end
def show_creators?
expanded? || filter.creators.any?
filter.creators.any?
end
def show_closers?
expanded? || filter.closers.any?
filter.closers.any?
end
def enable_collection_filtering(&block)
app/views/filters/_settings.html.erb
+4 -2
View File
@@ -1,5 +1,7 @@
<% cache user_filtering do %>
<aside id="filter-settings" class="filters flex align-center gap-half justify-center center margin-block-end">
<%= tag.aside id: "filter-settings",
class: class_names("filters flex align-center gap-half justify-center center margin-block-end", { "filters--expanded": user_filtering.expanded? }),
data: { controller: "toggle-class", toggle_class_toggle_class: "filters--expanded" } do %>
<div class="flex-inline center align-center gap-half">
<%= render "filters/settings/terms", user_filtering: user_filtering %>
<%= render "filters/settings/controls", user_filtering: user_filtering %>
@@ -7,5 +9,5 @@
<%= render "filters/settings/toggle", user_filtering: user_filtering %>
<%= render "filters/settings/manage", user_filtering: user_filtering %>
</div>
</aside>
<% end %>
<% end %>
app/views/filters/settings/_assignees.html.erb
+2 -3
View File
@@ -1,6 +1,6 @@
<% filter = user_filtering.filter %>
<% if user_filtering.show_assignees? %>
<div class="quick-filter position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= tag.div class: "quick-filter position-relative",
data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_assignees? } do %>
<button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
<span class="overflow-ellipsis">
<% if filter.assignment_status.unassigned? %>
@@ -76,5 +76,4 @@
<% end %>
</ul>
<% end %>
</div>
<% end %>
app/views/filters/settings/_closers.html.erb
+2 -4
View File
@@ -1,8 +1,7 @@
<% filter = user_filtering.filter %>
<% if user_filtering.show_closers? %>
<div class="quick-filter position-relative" data-controller="dialog"
data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= tag.div class: "quick-filter position-relative",
data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_closers? } do %>
<button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
<span class="overflow-ellipsis">
<% if filter.closers.any? %>
@@ -54,5 +53,4 @@
<% end %>
</ul>
<% end %>
</div>
<% end %>
app/views/filters/settings/_controls.html.erb
-2
View File
@@ -4,5 +4,3 @@
<%= render "filters/settings/assignees", user_filtering: user_filtering %>
<%= render "filters/settings/creators", user_filtering: user_filtering %>
<%= render "filters/settings/closers", user_filtering: user_filtering %>
<%= render "filters/settings/time_window", user_filtering: user_filtering, name: :creation, label: "Created" %>
<%= render "filters/settings/time_window", user_filtering: user_filtering, name: :closure, label: "Closed" %>
app/views/filters/settings/_creators.html.erb
+2 -4
View File
@@ -1,8 +1,7 @@
<% filter = user_filtering.filter %>
<% if user_filtering.show_creators? %>
<div class="quick-filter position-relative" data-controller="dialog"
data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= tag.div class: "quick-filter position-relative",
data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_creators? } do %>
<button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
<span class="overflow-ellipsis">
<% if filter.creators.any? %>
@@ -54,5 +53,4 @@
<% end %>
</ul>
<% end %>
</div>
<% end %>
app/views/filters/settings/_indexed_by.html.erb
+2 -3
View File
@@ -1,7 +1,7 @@
<% filter = user_filtering.filter %>
<% if user_filtering.show_indexed_by? %>
<div class="quick-filter position-relative <%= "default-value" if filter.indexed_by.all? %>" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= tag.div class: class_names("quick-filter position-relative", "default-value": filter.indexed_by.all?),
data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by? } do %>
<button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
<span class="overflow-ellipsis">
<%= filter.indexed_by == "all" ? "Status" : filter.indexed_by.humanize %>
@@ -36,5 +36,4 @@
<% end %>
</ul>
<% end %>
</div>
<% end %>
app/views/filters/settings/_sorted_by.html.erb
+2 -3
View File
@@ -1,7 +1,7 @@
<% filter = user_filtering.filter %>
<% if user_filtering.show_sorted_by? %>
<div class="quick-filter position-relative <%= "default-value" if filter.sorted_by.latest? %>" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= tag.div class: class_names("quick-filter position-relative", "default-value": filter.sorted_by.latest?),
data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_sorted_by? } do %>
<button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
<span class="overflow-ellipsis">
<%= sorted_by_label(filter.sorted_by) %>
@@ -36,5 +36,4 @@
<% end %>
</ul>
<% end %>
</div>
<% end %>
app/views/filters/settings/_tags.html.erb
+2 -3
View File
@@ -1,7 +1,7 @@
<% filter = user_filtering.filter %>
<% if user_filtering.show_tags? %>
<div class="quick-filter position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= tag.div class: "quick-filter position-relative",
data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_tags? } do %>
<button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
<span class="overflow-ellipsis">
<% if filter.tags.any? %>
@@ -53,5 +53,4 @@
<% end %>
</ul>
<% end %>
</div>
<% end %>
app/views/filters/settings/_time_window.html.erb
+2 -3
View File
@@ -1,6 +1,6 @@
<% filter = user_filtering.filter %>
<% if filter.public_send("#{name}_window").present? %>
<div class="quick-filter position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= tag.div class: "quick-filter position-relative",
data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: filter.public_send("#{name}_window").present? } do %>
<button class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#open:stop">
<span class="overflow-ellipsis">
<%= "#{label} #{TimeWindowParser.human_name_for(filter.public_send(name))&.downcase}" %>
@@ -29,5 +29,4 @@
<% end %>
<% end %>
</dialog>
</div>
<% end %>
app/views/filters/settings/_toggle.html.erb
+4 -6
View File
@@ -1,13 +1,11 @@
<% filter = user_filtering.filter %>
<% if user_filtering.expanded? %>
<%= link_to my_filter_expansion_path(**filter.as_params, expand_all: false), class: "btn txt-x-small btn--reversed", aria: { selected: true }, data: { turbo_method: "post" } do %>
<button type="button" class="btn txt-x-small btn--reversed" aria-selected="true" aria-label="Close filter options" data-action="toggle-class#toggle">
<%= icon_tag "filter" %>
<span class="for-screen-reader">Close filter options</span>
<% end %>
</button>
<% else %>
<%= link_to my_filter_expansion_path(**filter.as_params, expand_all: true), class: "btn txt-x-small", data: { turbo_method: "post" } do %>
<button type="button" class="btn txt-x-small" aria-label="Expand filter options" data-action="toggle-class#toggle">
<%= icon_tag "filter" %>
<span class="for-screen-reader">Expand filter options</span>
<% end %>
</button>
<% end %>
config/routes.rb
-1
View File
@@ -125,7 +125,6 @@ Rails.application.routes.draw do
resources :pins
resource :timezone
resource :menu
resource :filter_expansion, only: %i[ create destroy ]
end
namespace :prompts do