From 00bcafc3a5b10f9d7459f6f78d674b12d634dd0e Mon Sep 17 00:00:00 2001
From: Felix Eckhofer <felix@eckhofer.com>
Date: Fri, 20 Dec 2024 23:36:58 +0100
Subject: [PATCH] Only show list of translators after filteredlist is
interacted with
---
.../controllers/filteredlist_controller.js | 16 ++++++++++++++--
app/views/assignments/_filteredlist.html.erb | 8 ++++----
app/views/assignments/_user_add.html.erb | 2 +-
app/views/sessions/_session.html.erb | 6 +++---
4 files changed, 22 insertions(+), 10 deletions(-)
diff --git a/app/javascript/controllers/filteredlist_controller.js b/app/javascript/controllers/filteredlist_controller.js
index 102ba2d..c658117 100644
--- a/app/javascript/controllers/filteredlist_controller.js
+++ b/app/javascript/controllers/filteredlist_controller.js
@@ -15,10 +15,22 @@ export default class extends Controller {
this.filter = debounce(this.filter_nodebounce.bind(this), 300);
}
+ expand() {
+ this.listTarget.classList.remove("hidden");
+ this.inputTarget.classList.remove("rounded-b-md");
+ this.filter_nodebounce();
+ }
+
+ contract() {
+ this.listTarget.classList.add("hidden");
+ this.inputTarget.classList.add("rounded-b-md");
+ this.filter_nodebounce();
+ }
+
filter_nodebounce() {
const query = this.inputTarget.value.toLowerCase();
- if (query) {
+ if (query || !this.listTarget.classList.contains("hidden")) {
this.clearTarget.classList.remove("hidden");
} else {
this.clearTarget.classList.add("hidden");
@@ -37,6 +49,6 @@ export default class extends Controller {
clear_filter() {
this.inputTarget.value = '';
this.filter_nodebounce();
- this.inputTarget.focus();
+ this.contract();
}
}
diff --git a/app/views/assignments/_filteredlist.html.erb b/app/views/assignments/_filteredlist.html.erb
index 06ed844..e4e5f2f 100644
--- a/app/views/assignments/_filteredlist.html.erb
+++ b/app/views/assignments/_filteredlist.html.erb
@@ -3,10 +3,10 @@
<input
type="text"
data-filteredlist-target="input"
- data-action="input->filteredlist#filter"
+ data-action="input->filteredlist#filter focus->filteredlist#expand"
autocomplete="off"
- class="w-full bg-white/60 border border-gray-300 rounded-t-md shadow-sm text-sm p-1 pr-8 focus:ring-indigo-500 focus:border-indigo-500"
- placeholder="Filter..."
+ class="w-full bg-white/60 border border-gray-300 rounded-t-md rounded-b-md shadow-sm text-sm p-1 pr-8 focus:ring-indigo-500 focus:border-indigo-500"
+ placeholder="Assign translator (type to filter)"
/>
<button
data-action="click->filteredlist#clear_filter"
@@ -14,7 +14,7 @@
data-filteredlist-target="clear"
class="absolute hidden inset-y-0 right-0 px-2 text-gray-500"> × </button>
</div>
- <ul data-filteredlist-target="list" class="max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2">
+ <ul data-filteredlist-target="list" class="hidden max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2">
<% users.each do |user| %>
<%= render partial: 'assignments/filteredlist_option', locals: { session: session, user: user } %>
<% end %>
diff --git a/app/views/assignments/_user_add.html.erb b/app/views/assignments/_user_add.html.erb
index 819b115..191b07f 100644
--- a/app/views/assignments/_user_add.html.erb
+++ b/app/views/assignments/_user_add.html.erb
@@ -4,7 +4,7 @@
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10" style="background-color: <%= user.avatar_color %>" title="<%= user.name %>">
<span style="color: <%= user.text_color %>"><%= user.name %></span>
<button type="button" class="group relative -mr-1 size-3.5 rounded-sm hover:bg-gray-500/20">
- <%= link_to conference_session_assignments_path(session.conference, session, user_id: user.id), data: { turbo_method: :post, turbo_frame: dom_id(session) } do %>
+ <%= link_to conference_session_assignments_path(session.conference, session, user_id: user.id), data: { turbo_method: :post, turbo_frame: dom_id(session), action: "filteredlist#contract" } do %>
<span class="sr-only">Add</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" stroke-width="1" class="size-3.5 stroke-gray-600/50 group-hover:stroke-gray-600/75 fill-gray-600/50" style="stroke: <%= user.text_color %>; fill: <%= user.text_color %>">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
diff --git a/app/views/sessions/_session.html.erb b/app/views/sessions/_session.html.erb
index 59e8592..b2ab250 100644
--- a/app/views/sessions/_session.html.erb
+++ b/app/views/sessions/_session.html.erb
@@ -83,8 +83,8 @@
</ul>
<% end %>
</div>
- <small class="hidden">unassigned (<%= unassigned_users.length %>)</small>
- <hr class="hidden">
- <%# render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
+ <hr>
+ <small>unassigned (<%= unassigned_users.length %>)</small>
+ <%= render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
</div>
<% end %>
--
GitLab