refactor(Communities): use `StatusModal` in `MembershipRequestsPopup`

Closes #2894

ui/StatusQ

@@ -1 +1 @@
-Subproject commit 28ff7b267beaf864f25bcb89b4c19fc071ef3a10
+Subproject commit 6c67aaf3a3031af92931dce9673418e81f80749f

ui/app/AppLayouts/Chat/CommunityColumn.qml

@@ -80,12 +80,13 @@ Item {
         anchors.horizontalCenter: parent.horizontalCenter
 
         active: chatsModel.communities.activeCommunity.admin && nbRequests > 0
+        height: nbRequests > 0 ? 64 : 0
         sourceComponent: Component {
             StatusContactRequestsIndicatorListItem {
                 //% "Membership requests"
                 title: qsTrId("membership-requests")
                 requestsCount: membershipRequests.nbRequests
-                sensor.onClicked: membershipRequestPopup.open()
+                sensor.onClicked: openPopup(membershipRequestPopup)
             }
         }
     }
@@ -311,9 +312,16 @@ Item {
         standardButtons: StandardButton.Ok
     }
 
-    MembershipRequestsPopup {
+    Component {
         id: membershipRequestPopup
+        MembershipRequestsPopup {
+            anchors.centerIn: parent
+            onClosed: {
+                destroy()
             }
+        }
+    }
+
 }
 
 /*##^##

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

@@ -69,7 +69,7 @@ Item {
             //% "Membership requests"
             title: qsTrId("membership-requests")
             requestsCount: nbRequests
-            sensor.onClicked: membershipRequestPopup.open()
+            sensor.onClicked: openPopup(membershipRequestPopup)
         }
 
         StatusModalDivider {
@@ -206,4 +206,14 @@ Item {
             }
         }
     }
+
+    Component {
+        id: membershipRequestPopup
+        MembershipRequestsPopup {
+            anchors.centerIn: parent
+            onClosed: {
+                destroy()
+            }
+        }
+    }
 }

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

@@ -79,6 +79,8 @@ Column {
             StatusBadge {
                 visible: !!membersListItem.nbRequests
                 value: membersListItem.nbRequests
+                anchors.top: parent.top
+                anchors.topMargin: 2
             },
             StatusIcon {
                 icon: "chevron-down"

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

@@ -31,7 +31,7 @@ StatusModal {
     
     property Component pinnedMessagesPopupComponent
 
-    header.title: qsTrId("New channel")
+    header.title: qsTr("New channel")
 
     onOpened: {
         contentComponent.channelName.text = ""

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

@@ -1,122 +1,82 @@
 import QtQuick 2.12
+import QtQuick.Controls 2.3
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
 import "../../../../imports"
 import "../../../../shared"
-import "../../../../shared/status"
-
-ModalPopup {
-    property alias membershipRequestList: membershipRequestList
 
+StatusModal {
     id: popup
 
     onOpened: {
-        errorText.text = ""
+        contentComponent.errorText.text = ""
     }
 
-    header: Item {
+    header.title: qsTr("Membership requests")
-        height: 60
+    header.subTitle: contentComponent.membershipRequestList.count
-        width: parent.width
 
-        StyledText {
+    content: Column {
-            id: titleText
+        property alias errorText: errorText
-            //% "Membership requests"
+        property alias membershipRequestList: membershipRequestList
-            text: qsTrId("membership-requests")
+        width: popup.width
-            anchors.top: parent.top
-            anchors.topMargin: 2
-            anchors.left: parent.left
-            font.bold: true
-            font.pixelSize: 17
-            wrapMode: Text.WordWrap
-        }
 
-        StyledText {
+        StatusBaseText {
-            id: nbRequestsText
-            text: membershipRequestList.count
-            width: 160
-            anchors.left: titleText.left
-            anchors.top: titleText.bottom
-            anchors.topMargin: 2
-            font.pixelSize: 15
-            color: Style.current.secondaryText
-        }
-
-        Separator {
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.rightMargin: -Style.current.padding
-            anchors.leftMargin: -Style.current.padding
-        }
-    }
-
-    Item {
-        anchors.fill: parent
-
-        StyledText {
             id: errorText
             visible: !!text
             height: visible ? implicitHeight : 0
-            color: Style.current.danger
+            color: Theme.palette.dangerColor1
-            anchors.top: parent.top
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.Wrap
-            anchors.topMargin: visible ? Style.current.smallPadding : 0
             width: parent.width
         }
 
+        Item {
+            height: 8
+            width: parent.width
+        }
+
+        ScrollView {
+            width: parent.width
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            topPadding: 8
+            bottomPadding: 8
+            height: 300
+            clip: true
+
             ListView {
                 id: membershipRequestList
+                anchors.fill: parent
                 model: chatsModel.communities.activeCommunity.communityMembershipRequests
-            anchors.top: errorText.bottom
+                clip: true
-            anchors.topMargin: Style.current.smallPadding
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.rightMargin: -Style.current.padding
-            anchors.leftMargin: -Style.current.padding
-            height: parent.height
 
-            delegate: Item {
+                delegate: StatusListItem {
-                property int contactIndex: profileModel.contacts.list.getContactIndexByPubkey(publicKey)
+                    anchors.horizontalCenter: parent.horizontalCenter
-                property string identicon: utilsModel.generateIdenticon(publicKey)
+
-                property string profileImage: contactIndex === -1 ? identicon :
+                    property int contactIndex: profileModel.contacts.list.getContactIndexByPubkey(model.publicKey)
-                                                                    profileModel.contacts.list.rowData(contactIndex, 'thumbnailImage') || identicon
+                    property string nickname: appMain.getUserNickname(model.publicKey)
+                    property string profileImage: contactIndex === -1 ? "" : profileModel.contacts.list.rowData(contactIndex, 'thumbnailImage') 
                     property string displayName: Utils.getDisplayName(publicKey, contactIndex)
 
-                id: requestLine
+                    image.isIdenticon: !profileImage && model.identicon
-                height: 52
+                    image.source: profileImage || model.identicon
-                width: parent.width
 
-                StatusImageIdenticon {
+                    title: displayName
-                    id: accountImage
-                    width: 36
-                    height: 36
-                    anchors.left: parent.left
-                    anchors.verticalCenter: parent.verticalCenter
-                    source: requestLine.profileImage
-                    anchors.leftMargin: Style.current.padding
-                }
-
-                StyledText {
-                    text: requestLine.displayName
-                    elide: Text.ElideRight
-                    anchors.left: accountImage.right
-                    anchors.leftMargin: Style.current.padding
-                    anchors.right: thumbsUp.left
-                    anchors.rightMargin: Style.current.padding
-                    anchors.verticalCenter: parent.verticalCenter
-                    font.pixelSize: 15
-                    color: Style.current.secondaryText
-                }
-
-                SVGImage {
-                    id: thumbsUp
-                    source: "../../../img/thumbsUp.svg"
-                    fillMode: Image.PreserveAspectFit
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.right: thumbsDown.left
-                    anchors.rightMargin: Style.current.padding
-                    width: 28
 
+                    components: [
+                        StatusRoundIcon {
+                            icon.name: "thumbs-up"
+                            icon.color: Theme.palette.white
+                            icon.background.width: 28
+                            icon.background.height: 28
+                            icon.background.color: Theme.palette.successColor1
                             MouseArea {
+                                id: thumbsUpSensor
+                                hoverEnabled: true
                                 anchors.fill: parent
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: {
@@ -127,18 +87,16 @@ ModalPopup {
                                     }
                                 }
                             }
-                }
+                        },
-
+                        StatusRoundIcon {
-                SVGImage {
+                            icon.name: "thumbs-down"
-                    id: thumbsDown
+                            icon.color: Theme.palette.white
-                    source: "../../../img/thumbsDown.svg"
+                            icon.background.width: 28
-                    fillMode: Image.PreserveAspectFit
+                            icon.background.height: 28
-                    anchors.verticalCenter: parent.verticalCenter
+                            icon.background.color: Theme.palette.dangerColor1
-                    anchors.right: parent.right
-                    anchors.rightMargin: Style.current.padding
-                    width: 28
-
                             MouseArea {
+                                id: thumbsDownSensor
+                                hoverEnabled: true
                                 anchors.fill: parent
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: {
@@ -150,18 +108,19 @@ ModalPopup {
                                 }
                             }
                         }
+                    ]
+                }
             }
-
         }
     }
 
-    footer: StatusRoundButton {
+    leftButtons: [
-        id: btnBack
+        StatusRoundButton {
-        anchors.left: parent.left
             icon.name: "arrow-right"
             icon.width: 20
             icon.height: 16
             rotation: 180
             onClicked: popup.close()
         }
+    ]
 }