Merge pull request #16719 from opf/fix/more-specific-button-text-for-…

…expandable-list-component Make expandable list button text more specific
opf · Sep 16, 2024 · 6b44e19 · 6b44e19
2 parents 1e47ba1 + f76c6db
commit 6b44e19
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 32 deletions.
diff --git a/app/components/op_primer/expandable_list_component.html.erb b/app/components/op_primer/expandable_list_component.html.erb
@@ -2,7 +2,7 @@
   component_wrapper(data: wrapper_data_attributes) do
     if elements.count == 0
       render(Primer::Beta::Text.new(color: :subtle)) { t("label_meeting_no_participants") }
-    elsif elements.count <= @cutoff_limit
+    elsif @cutoff_limit.nil? || elements.count <= @cutoff_limit
       flex_layout do |list|
         elements.each do |item|
           list.with_row(mt: 1) { item.to_s }
@@ -13,26 +13,26 @@
         elements.take(@cutoff_limit).each do |item|
           list.with_row(mt: 1) { item.to_s }
         end
-
-        list.with_row do
-          flex_layout do |flex|
-            flex.with_row(display: :none, data: { 'expandable-list-target': "hiddenElements" }) do
-              flex_layout do |hidden_user_list|
-                elements[@cutoff_limit..].each do |item|
-                  hidden_user_list.with_row(mt: 1) { item.to_s }
-                end
-              end
+        list.with_row(display: :none, data: { "expandable-list-target": "hiddenElements" }) do
+          flex_layout do |hidden_user_list|
+            elements[@cutoff_limit..].each do |item|
+              hidden_user_list.with_row(mt: 1) { item.to_s }
             end
-            flex.with_row(mt: 1) do
+            hidden_user_list.with_row(mt: 2) do
               render(Primer::Beta::Button.new(
-                scheme: :link,
-                data: { 'expandable-list-target': "showHideButton",
-                        action: 'click->expandable-list#showhiddenElements keydown.enter->expandable-list#showhiddenElements'
-                }
-              )) { I18n.t('label_show_hide_n_items', count: elements.count - @cutoff_limit) }
+                       scheme: :link,
+                       data: { action: "expandable-list#hideElements" }
+                     )) { I18n.t("label_show_less") }
             end
           end
         end
+        list.with_row(mt: 2) do
+          render(Primer::Beta::Button.new(
+                   scheme: :link,
+                   data: { "expandable-list-target": "showButton",
+                           action: "expandable-list#showElements" }
+                 )) { I18n.t("label_show_n_more", count: elements.count - @cutoff_limit) }
+        end
       end
     end
   end

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -2278,9 +2278,9 @@ en:
   label_share: "Share"
   label_share_project_list: "Share project list"
   label_share_work_package: "Share work package"
-  label_show_hide: "Show/hide"
-  label_show_hide_n_items: "Show/hide %{count} items"
   label_show_all_registered_users: "Show all registered users"
+  label_show_n_more: "Show %{count} more"
+  label_show_less: "Show less"
   label_journal: "Journal"
   label_journal_diff: "Description Comparison"
   label_language: "Language"

diff --git a/frontend/src/stimulus/controllers/dynamic/expandable-list.controller.ts b/frontend/src/stimulus/controllers/dynamic/expandable-list.controller.ts
@@ -31,14 +31,17 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class ExxpandableListController extends Controller {
-  static targets = ['showHideButton', 'hiddenElements'];
+  static targets = ['hiddenElements', 'showButton'];
   declare readonly hiddenElementsTarget:HTMLElement;
+  declare readonly showButtonTarget:HTMLElement;
 
-  showhiddenElements():void {
-    if (this.hiddenElementsTarget.classList.contains('d-none')) {
-      this.hiddenElementsTarget.classList.remove('d-none');
-    } else {
-      this.hiddenElementsTarget.classList.add('d-none');
-    }
+  showElements():void {
+    this.hiddenElementsTarget.classList.remove('d-none');
+    this.showButtonTarget.classList.add('d-none');
+  }
+
+  hideElements():void {
+    this.hiddenElementsTarget.classList.add('d-none');
+    this.showButtonTarget.classList.remove('d-none');
   }
 }
diff --git a/modules/meeting/app/components/meetings/side_panel/participants_component.html.erb b/modules/meeting/app/components/meetings/side_panel/participants_component.html.erb
@@ -2,7 +2,6 @@
   component_wrapper do
     render(Primer::OpenProject::SidePanel::Section.new) do |section|
       section.with_title { Meeting.human_attribute_name(:participants) }
-      section.with_description { I18n.t('meeting.attachments.text') }
       section.with_counter(count: @meeting.invited_or_attended_participants.count)
 
       if @meeting.editable?
@@ -21,12 +20,6 @@
       component_wrapper(data: wrapper_data_attributes) do
         flex_layout do |participants_container|
           participants_container.with_row do
-            flex_layout(align_items: :center, justify_content: :space_between) do |heading|
-
-            end
-          end
-
-          participants_container.with_row(mt: 2) do
             render(OpPrimer::ExpandableListComponent.new(cutoff_limit: 5)) do |list|
               elements.each do |item|
                 list.with_element { render_participant(item) }