fix(@desktop/community): add online status to invite modal

Replace Contact component with StatusMemberListItem.
Add missing Nim functions to fill models with onlineStatus.
Adjust components paddings to match design.

Fixes #6985

src/app/modules/main/chat_section/controller.nim

@@ -319,6 +319,9 @@ proc getContactById*(self: Controller, id: string): ContactsDto =
 proc getContactDetails*(self: Controller, id: string): ContactDetails =
   return self.contactService.getContactDetails(id)
 
+proc getStatusForContactWithId*(self: Controller, publicKey: string): StatusUpdateDto =
+  return self.contactService.getStatusForContactWithId(publicKey)
+
 proc acceptContactRequest*(self: Controller, publicKey: string) =
   self.contactService.acceptContactRequest(publicKey)
 

src/app/modules/main/chat_section/module.nim

@@ -213,6 +213,7 @@ proc createItemFromPublicKey(self: Module, publicKey: string): UserItem =
     pubKey = contactDetails.details.id,
     displayName = contactDetails.displayName,
     icon = contactDetails.icon,
+    onlineStatus = toOnlineStatus(self.controller.getStatusForContactWithId(publicKey).statusType),
     isContact = contactDetails.details.isContact(),
     isVerified = contactDetails.details.isContactVerified(),
     isUntrustworthy = contactDetails.details.isContactUntrustworthy(),

src/app/modules/main/profile_section/contacts/controller.nim

@@ -151,5 +151,8 @@ proc declineVerificationRequest*(self: Controller, publicKey: string) =
 proc getReceivedVerificationRequests*(self: Controller): seq[VerificationRequest] =
   self.contactsService.getReceivedVerificationRequests()
 
+proc getStatusForContactWithId*(self: Controller, publicKey: string): StatusUpdateDto =
+  return self.contactsService.getStatusForContactWithId(publicKey)
+
 proc hasReceivedVerificationRequestFrom*(self: Controller, fromId: string): bool =
   self.contactsService.hasReceivedVerificationRequestFrom(fromId)

src/app/modules/main/profile_section/contacts/module.nim

@@ -47,6 +47,7 @@ proc createItemFromPublicKey(self: Module, publicKey: string): UserItem =
     pubKey = contact.id,
     displayName = name,
     icon = image,
+    onlineStatus = toOnlineStatus(self.controller.getStatusForContactWithId(publicKey).statusType),
     isContact = contact.isContact(),
     isBlocked = contact.isBlocked(),
     isVerified = contact.isContactVerified(),

src/app/modules/shared_models/user_item.nim

@@ -85,7 +85,7 @@ proc initUserItem*(
     icon: string,
     colorId: int = 0,
     colorHash: string = "",
-    onlineStatus: OnlineStatus = OnlineStatus.Inactive,
+    onlineStatus: OnlineStatus,
     isContact: bool,
     isVerified: bool,
     isUntrustworthy: bool,

ui/app/AppLayouts/Chat/panels/communities/CommunityProfilePopupInviteFriendsPanel.qml

@@ -23,13 +23,15 @@ ColumnLayout {
 
     property var pubKeys: ([])
 
-    spacing: Style.current.padding
+    spacing: Style.current.bigPadding
 
     StyledText {
         id: headline
         text: qsTr("Contacts")
         font.pixelSize: Style.current.primaryTextFontSize
         color: Style.current.secondaryText
+        Layout.leftMargin: Style.current.padding
+        Layout.rightMargin: Style.current.padding
     }
 
     StatusInput {
@@ -38,6 +40,11 @@ ColumnLayout {
         input.icon.name: "search"
         input.clearable: true
         Layout.fillWidth: true
+        Layout.leftMargin: Style.current.padding
+        Layout.rightMargin: Style.current.padding
+        maximumHeight: 36
+        topPadding: 0
+        bottomPadding: 0
     }
 
     ExistingContacts {
@@ -62,13 +69,13 @@ ColumnLayout {
             }
             root.pubKeys = pubKeysCopy
         }
-        Layout.rightMargin: -Style.current.padding
         Layout.fillWidth: true
         Layout.fillHeight: true
+        Layout.leftMargin: Style.current.halfPadding
+        Layout.rightMargin: Style.current.halfPadding
     }
 
     StatusModalDivider {
-        bottomPadding: Style.current.padding
         Layout.fillWidth: true
     }
 

ui/app/AppLayouts/Chat/panels/communities/CommunityProfilePopupInviteMessagePanel.qml

@@ -8,6 +8,7 @@ import StatusQ.Popups 0.1
 
 import utils 1.0
 import shared 1.0
+import shared.panels 1.0
 import shared.views 1.0
 import shared.status 1.0
 
@@ -40,6 +41,19 @@ ColumnLayout {
         input.verticalAlignment: TextEdit.AlignTop
         Layout.minimumHeight: 150 // TODO: implicitHeight is not calculated well from input.implicitHeight
         Layout.fillWidth: true
+        Layout.leftMargin: Style.current.padding
+        Layout.rightMargin: Style.current.padding
+    }
+
+    StatusModalDivider {
+        Layout.fillWidth: true
+    }
+
+    StyledText {
+        text: qsTr("Invites will be sent to:")
+        font.pixelSize: Style.current.primaryTextFontSize
+        Layout.leftMargin: Style.current.padding
+        Layout.rightMargin: Style.current.padding
     }
 
     PickedContacts {
@@ -49,5 +63,7 @@ ColumnLayout {
         pubKeys: root.pubKeys
         Layout.fillWidth: true
         Layout.fillHeight: true
+        Layout.leftMargin: Style.current.halfPadding
+        Layout.rightMargin: Style.current.halfPadding
     }
 }

ui/app/AppLayouts/Chat/popups/community/InviteFriendsToCommunityPopup.qml

@@ -45,6 +45,8 @@ StatusStackModal {
     stackTitle: qsTr("Invite Contacts to %1").arg(community.name)
     width: 640
     height: 700
+    leftPadding: 0
+    rightPadding: 0
 
     nextButton: StatusButton {
         text: qsTr("Next")
@@ -68,8 +70,8 @@ StatusStackModal {
         visible: root.validationError !== "" || root.successMessage !== ""
         font.pixelSize: 13
         color: !!root.validationError ? Style.current.danger : Style.current.success
-        Layout.alignment: Qt.AlignHCenter
+        horizontalAlignment: Text.AlignHCenter
-        Layout.preferredHeight: visible ? contentHeight : 0
+        height: visible ? contentHeight : 0
     }
 
     stackItems: [

ui/imports/shared/views/ExistingContacts.qml

@@ -3,6 +3,9 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 import utils 1.0
 import shared.status 1.0
@@ -38,20 +41,32 @@ Item {
         id: contactListView
         anchors.fill: parent
         rightMargin: 0
-        spacing: 0
+        leftMargin: 0
+        spacing: Style.current.padding
 
         model: root.contactsStore.myContactsModel
-        delegate: Contact {
+        delegate: StatusMemberListItem {
             width: contactListView.availableWidth
-            showCheckbox: root.showCheckbox
+            pubKey: Utils.getCompressedPk(model.pubKey)
-            isChecked: root.pubKeys.indexOf(model.pubKey) > -1
-            pubKey: model.pubKey
             isContact: model.isContact
-            isUser: false
+            status: model.onlineStatus
-            name: model.displayName
+            height: visible ? implicitHeight : 0
-            image: model.icon
+            color: sensor.containsMouse ? Style.current.backgroundHover : Style.current.transparent
-            isVisible: {
+            userName: model.displayName
-                if (isChecked)
+            image.source: model.icon
+            image.isIdenticon: false
+            image.width: 40
+            image.height: 40
+            icon.color: Utils.colorForPubkey(model.pubKey)
+            icon.height: 40
+            icon.width: 40
+            ringSettings.ringSpecModel: Utils.getColorHashAsJson(model.pubKey)
+            statusListItemIcon.badge.border.color: Theme.palette.baseColor4
+            statusListItemIcon.badge.implicitHeight: 14 // 10 px + 2 px * 2 borders
+            statusListItemIcon.badge.implicitWidth: 14 // 10 px + 2 px * 2 borders
+
+            visible: {
+                if (contactCheckbox.checked)
                     return true;
 
                 return model.isContact && !model.isBlocked && (root.filterText === "" ||
@@ -63,9 +78,20 @@ Item {
                     (!root.hideCommunityMembers ||
                     !root.community.hasMember(model.pubKey));
             }
-            onContactClicked: function () {
+
+            onClicked: {
+                root.contactClicked(model);
+            }
+
+            StatusCheckBox  {
+                id: contactCheckbox
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                checked: root.pubKeys.indexOf(model.pubKey) > -1
+                onClicked: {
                     root.contactClicked(model);
                 }
             }
         }
+    }
 }

ui/imports/shared/views/PickedContacts.qml

@@ -3,6 +3,8 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 import utils 1.0
 import shared.status 1.0
@@ -36,6 +38,7 @@ Item {
         anchors.fill: parent
         rightMargin: 0
         cellWidth: parent.width / 2
+        cellHeight: 2 * Style.current.xlPadding + Style.current.halfPadding
 
         model: SortFilterProxyModel {
             sourceModel: root.contactsStore.myContactsModel
@@ -43,14 +46,24 @@ Item {
                 ExpressionFilter { expression: root.pubKeys.indexOf(model.pubKey) > -1 }
             ]
         }
-        delegate: Contact {
+
+        delegate: StatusMemberListItem {
             width: contactGridView.cellWidth
-            showCheckbox: false
+            pubKey: Utils.getCompressedPk(model.pubKey)
-            pubKey: model.pubKey
             isContact: model.isContact
-            isUser: false
+            status: model.onlineStatus
-            name: model.displayName
+            userName: model.displayName
-            image: model.icon
+            image.source: model.icon
+            image.width: 40
+            image.height: 40
+            color: "transparent"
+            icon.color: Utils.colorForPubkey(model.pubKey)
+            icon.height: 40
+            icon.width: 40
+            ringSettings.ringSpecModel: Utils.getColorHashAsJson(model.pubKey)
+            statusListItemIcon.badge.border.color: Theme.palette.baseColor4
+            statusListItemIcon.badge.implicitHeight: 14 // 10 px + 2 px * 2 borders
+            statusListItemIcon.badge.implicitWidth: 14 // 10 px + 2 px * 2 borders
         }
     }
 }