From 6e6e5f474708c80d543a9a81b49b00b2c7243a0f Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 15 Oct 2023 19:42:23 +0300
Subject: [PATCH] Group popout "improvements"

---
 public/css/rm-groups.css      |  3 ++-
 public/index.html             |  6 ++---
 public/scripts/group-chats.js | 49 ++++++++++++++++++++---------------
 public/style.css              |  7 ++++-
 4 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/public/css/rm-groups.css b/public/css/rm-groups.css
index dfcb7c90f..b33c23103 100644
--- a/public/css/rm-groups.css
+++ b/public/css/rm-groups.css
@@ -226,4 +226,5 @@
 
 .group_member .avatar {
     flex-shrink: 0;
-}
\ No newline at end of file
+    flex-basis: auto;
+}
diff --git a/public/index.html b/public/index.html
index c197912d0..bf9e71f33 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3611,9 +3611,9 @@
                             <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                         </div>
                         <div class="inline-drawer-content">
-                            <div name="Current Group Members" class="flex-container flexFlowColumn overflowYAuto flex1">
-                                <div id="rm_group_members_pagination" class="group_pagination"></div>
-                                <div id="rm_group_members" class="overflowYAuto flex-container"></div>
+                            <div id="currentGroupMembers" name="Current Group Members" class="flex-container flexFlowColumn overflowYAuto flex1">
+                                <div id="rm_group_members_pagination" class="rm_group_members_pagination group_pagination"></div>
+                                <div id="rm_group_members" class="rm_group_members overflowYAuto flex-container"></div>
                             </div>
                         </div>
                     </div>
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index 6321f7d9c..22bca164e 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -993,27 +993,29 @@ function printGroupCandidates() {
 
 function printGroupMembers() {
     const storageKey = 'GroupMembers_PerPage';
-    $("#rm_group_members_pagination").pagination({
-        dataSource: getGroupCharacters({ doFilter: false, onlyMembers: true }),
-        pageRange: 1,
-        position: 'top',
-        showPageNumbers: false,
-        prevText: '<',
-        nextText: '>',
-        formatNavigator: PAGINATION_TEMPLATE,
-        showNavigator: true,
-        showSizeChanger: true,
-        pageSize: Number(localStorage.getItem(storageKey)) || 5,
-        sizeChangerOptions: [5, 10, 25, 50, 100, 200],
-        afterSizeSelectorChange: function (e) {
-            localStorage.setItem(storageKey, e.target.value);
-        },
-        callback: function (data) {
-            $("#rm_group_members").empty();
-            for (const i of data) {
-                $("#rm_group_members").append(getGroupCharacterBlock(i.item));
-            }
-        },
+    $(".rm_group_members_pagination").each(function() {
+        $(this).pagination({
+            dataSource: getGroupCharacters({ doFilter: false, onlyMembers: true }),
+            pageRange: 1,
+            position: 'top',
+            showPageNumbers: false,
+            prevText: '<',
+            nextText: '>',
+            formatNavigator: PAGINATION_TEMPLATE,
+            showNavigator: true,
+            showSizeChanger: true,
+            pageSize: Number(localStorage.getItem(storageKey)) || 5,
+            sizeChangerOptions: [5, 10, 25, 50, 100, 200],
+            afterSizeSelectorChange: function (e) {
+                localStorage.setItem(storageKey, e.target.value);
+            },
+            callback: function (data) {
+                $(".rm_group_members").empty();
+                for (const i of data) {
+                    $(".rm_group_members").append(getGroupCharacterBlock(i.item));
+                }
+            },
+        });
     });
 }
 
@@ -1563,6 +1565,9 @@ function doCurMemberListPopout() {
             .append(controlBarHtml)
             .append(memberListClone)
 
+        // Remove pagination from popout
+        newElement.find('.group_pagination').empty();
+
         $('body').append(newElement);
         loadMovingUIState();
         $("#groupMemberListPopout").fadeIn(250)
@@ -1571,6 +1576,8 @@ function doCurMemberListPopout() {
             $("#groupMemberListPopout").fadeOut(250, () => { $("#groupMemberListPopout").remove() })
         })
 
+        // Re-add pagination not working in popout
+        printGroupMembers();
     } else {
         console.debug('saw existing popout, removing')
         $("#groupMemberListPopout").fadeOut(250, () => { $("#groupMemberListPopout").remove() });
diff --git a/public/style.css b/public/style.css
index 571c387d4..9fb4edf53 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3474,6 +3474,11 @@ a {
 
 #groupMemberListPopout {
     padding: 0;
+    height: 50%;
+}
+
+#groupMemberListPopout #currentGroupMembers {
+    height: 100%;
 }
 
 #groupMemberListPopout #rm_group_members {
@@ -3623,4 +3628,4 @@ a {
         height: 100vh;
         z-index: 9999;
     }
-}
\ No newline at end of file
+}