feat: show membership requests in the admin popup

ui/app/AppLayouts/Chat/CommunityColumn.qml

@@ -87,64 +87,15 @@ Item {
         }
     }
 
-    Rectangle {
+    Loader {
-        property int nbRequests: chatsModel.activeCommunity.communityMembershipRequests.nbRequests
+        id: membershipRequestsLoader
-
-        id: membershipRequestsBtn
-        visible: nbRequests > 0
         width: parent.width
-        height: visible ? 52 : 0
+        active: chatsModel.activeCommunity.admin
-        color: Style.current.secondaryBackground
         anchors.top: communityHeader.bottom
-        anchors.topMargin: visible ? Style.current.halfPadding : 0
+        anchors.topMargin: item && item.visible ? Style.current.halfPadding : 0
 
-        StyledText {
+        sourceComponent: Component {
-            text: qsTr("Membership requests")
+            MembershipRequestsButton {}
-            font.pixelSize: 15
-            anchors.left: parent.left
-            anchors.leftMargin: Style.current.padding
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Rectangle {
-            id: badge
-            anchors.right: caret.left
-            anchors.rightMargin: Style.current.padding
-            anchors.verticalCenter: parent.verticalCenter
-            color: Style.current.blue
-            width: 22
-            height: 22
-            radius: width / 2
-            Text {
-                font.pixelSize: 12
-                color: Style.current.white
-                anchors.centerIn: parent
-                text: membershipRequestsBtn.nbRequests.toString()
-            }
-        }
-
-        SVGImage {
-            id: caret
-            source: "../../img/caret.svg"
-            fillMode: Image.PreserveAspectFit
-            rotation: -90
-            anchors.right: parent.right
-            anchors.rightMargin: Style.current.padding
-            anchors.verticalCenter: parent.verticalCenter
-            width: 13
-
-
-            ColorOverlay {
-                anchors.fill: parent
-                source: parent
-                color: Style.current.darkGrey
-            }
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
-            onClicked: membershipRequestPopup.open()
         }
     }
 
@@ -154,7 +105,7 @@ Item {
 
     ScrollView {
         id: chatGroupsContainer
-        anchors.top: membershipRequestsBtn.bottom
+        anchors.top: membershipRequestsLoader.bottom
         anchors.topMargin: Style.current.padding
         anchors.bottom: parent.bottom
         anchors.left: parent.left

ui/app/AppLayouts/Chat/CommunityComponents/CommunityMembersPopup.qml

@@ -28,6 +28,7 @@ ModalPopup {
         }
 
         StyledText {
+            id: nbMembersText
             text: community.nbMembers.toString()
             width: 160
             anchors.left: parent.left
@@ -36,6 +37,11 @@ ModalPopup {
             font.pixelSize: 14
             color: Style.current.darkGrey
         }
+
+        Separator {
+            anchors.top: nbMembersText.bottom
+            anchors.topMargin: Style.current.padding
+        }
     }
 
     CommunityPopupButton {
@@ -61,13 +67,35 @@ ModalPopup {
         anchors.right: parent.right
         anchors.top: inviteBtn.bottom
         anchors.topMargin: Style.current.smallPadding
-        anchors.leftMargin: -Style.current.padding
+        anchors.leftMargin: -Style.current.xlPadding
-        anchors.rightMargin: -Style.current.padding
+        anchors.rightMargin: -Style.current.xlPadding
     }
 
+    MembershipRequestsButton {
+        id: membershipRequestsBtn
+        anchors.top: sep.bottom
+        anchors.topMargin: visible ? Style.current.smallPadding : 0
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: -Style.current.xlPadding
+        anchors.rightMargin: -Style.current.xlPadding
+    }
+
+    Separator {
+        id: sep2
+        visible: membershipRequestsBtn.visible
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: membershipRequestsBtn.bottom
+        anchors.topMargin: Style.current.smallPadding
+        anchors.leftMargin: -Style.current.xlPadding
+        anchors.rightMargin: -Style.current.xlPadding
+    }
+
+
     ListView {
         id: memberList
-        anchors.top: sep.bottom
+        anchors.top: sep2.visible ? sep2.bottom : sep.bottom
         anchors.topMargin: Style.current.smallPadding
         anchors.bottom: popup.bottom
         anchors.left: parent.left

ui/app/AppLayouts/Chat/CommunityComponents/CommunityPopupButton.qml

@@ -11,7 +11,6 @@ Item {
     width: contentItem.width
     height: contentItem.height
 
-
     default property alias actionContent: placeholder.data
     signal clicked()
 

ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml

@@ -116,37 +116,61 @@ ModalPopup {
         Loader {
             active: isAdmin
             width: parent.width
-            sourceComponent: CommunityPopupButton {
+            sourceComponent: Component {
-                //% "Members"
+                CommunityPopupButton {
-                label: qsTrId("members-title")
+                    id: memberBtn
+                    label: qsTr("Members")
                     iconName: "members"
                     txtColor: Style.current.textColor
                     onClicked: openPopup(communityMembersPopup)
+
                     Component {
                         id: communityMembersPopup
-                    CommunityMembersPopup { }
+                        CommunityMembersPopup {}
                     }
+
                     Item {
+                        property int nbRequests: chatsModel.activeCommunity.communityMembershipRequests.nbRequests
+
+                        id: memberBlock
                         anchors.top: parent.top
                         anchors.right: parent.right
                         anchors.rightMargin: 0
-                    width: 100
+                        width: childrenRect.width
+                        height: memberBtn.height
+
                         StyledText {
+                            id: nbMemberText
                             text: nbMembers.toString()
-                        anchors.right: caret.left
+                            anchors.verticalCenter: parent.verticalCenter
-                        anchors.rightMargin: Style.current.smallPadding
-                        anchors.top: parent.top
-                        anchors.topMargin: 10
                             padding: 0
                             font.pixelSize: 15
                             color: Style.current.secondaryText
                         }
 
+                        Rectangle {
+                            id: badge
+                            visible: memberBlock.nbRequests > 0
+                            anchors.left: nbMemberText.right
+                            anchors.leftMargin: visible ? Style.current.halfPadding : 0
+                            anchors.verticalCenter: parent.verticalCenter
+                            color: Style.current.blue
+                            width: visible ? 22 : 0
+                            height: 22
+                            radius: width / 2
+                            Text {
+                                font.pixelSize: 12
+                                color: Style.current.white
+                                anchors.centerIn: parent
+                                text: memberBlock.nbRequests
+                            }
+                        }
+
                         SVGImage {
                             id: caret
-                        anchors.right: parent.right
+                            anchors.left: badge.right
-                        anchors.topMargin: Style.current.padding
+                            anchors.leftMargin: Style.current.padding
-                        anchors.top: parent.top
+                            anchors.verticalCenter: parent.verticalCenter
                             source: "../../../img/caret.svg"
                             width: 13
                             height: 7
@@ -160,6 +184,7 @@ ModalPopup {
                     }
                 }
             }
+        }
 
         Loader {
             active: isAdmin

ui/app/AppLayouts/Chat/CommunityComponents/MembershipRequestsButton.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
+import "../../../../shared"
+import "../../../../imports"
+import "../components"
+import "./"
+
+Rectangle {
+    property int nbRequests: chatsModel.activeCommunity.communityMembershipRequests.nbRequests
+
+    id: membershipRequestsBtn
+    visible: nbRequests > 0
+    width: parent.width
+    height: visible ? 52 : 0
+    color: Style.current.secondaryBackground
+
+    StyledText {
+        text: qsTr("Membership requests")
+        font.pixelSize: 15
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Rectangle {
+        id: badge
+        anchors.right: caret.left
+        anchors.rightMargin: Style.current.padding
+        anchors.verticalCenter: parent.verticalCenter
+        color: Style.current.blue
+        width: 22
+        height: 22
+        radius: width / 2
+        Text {
+            font.pixelSize: 12
+            color: Style.current.white
+            anchors.centerIn: parent
+            text: membershipRequestsBtn.nbRequests.toString()
+        }
+    }
+
+    SVGImage {
+        id: caret
+        source: "../../../img/caret.svg"
+        fillMode: Image.PreserveAspectFit
+        rotation: -90
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        anchors.verticalCenter: parent.verticalCenter
+        width: 13
+
+
+        ColorOverlay {
+            anchors.fill: parent
+            source: parent
+            color: Style.current.darkGrey
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: membershipRequestPopup.open()
+    }
+}

ui/app/AppLayouts/Chat/CommunityComponents/MembershipRequestsPopup.qml

@@ -96,6 +96,7 @@ ModalPopup {
 
                 StyledText {
                     text: requestLine.displayName
+                    elide: Text.ElideRight
                     anchors.left: accountImage.right
                     anchors.leftMargin: Style.current.padding
                     anchors.right: thumbsUp.left

ui/nim-status-client.pro

@@ -130,6 +130,7 @@ DISTFILES += \
     app/AppLayouts/Chat/CommunityComponents/CommunityButton.qml \
     app/AppLayouts/Chat/CommunityComponents/CommunityDetailPopup.qml \
     app/AppLayouts/Chat/CommunityComponents/CommunityMembersPopup.qml \
+    app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml \
     app/AppLayouts/Chat/CommunityComponents/CommunityList.qml \
     app/AppLayouts/Chat/CommunityComponents/CommunityWelcomeBanner.qml \
     app/AppLayouts/Chat/CommunityComponents/CreateChannelPopup.qml \
@@ -137,6 +138,7 @@ DISTFILES += \
     app/AppLayouts/Chat/CommunityComponents/ImportCommunityPopup.qml \
     app/AppLayouts/Chat/CommunityComponents/InviteFriendsToCommunityPopup.qml \
     app/AppLayouts/Chat/CommunityComponents/MembershipRadioButton.qml \
+    app/AppLayouts/Chat/CommunityComponents/MembershipRequestsButton.qml \
     app/AppLayouts/Chat/CommunityComponents/MembershipRequestsPopup.qml \
     app/AppLayouts/Chat/CommunityComponents/MembershipRequirementPopup.qml \
     app/AppLayouts/Chat/ContactsColumn/AddChat.qml \