feat(ActivityCenter): Fix messages and AC notifications height

Close #7497

ui/app/mainui/activitycenter/controls/Badge.qml

@@ -10,7 +10,7 @@ Rectangle {
     id: root
 
     height: visible ? 24 : 0
-    width: childrenRect.width + Style.current.smallPadding * 2
+    width: childrenRect.width + Style.current.smallPadding
     radius: height / 2
     border.width: 1
     border.color: Style.current.borderSecondary

ui/app/mainui/activitycenter/popups/ActivityCenterPopup.qml

@@ -157,6 +157,7 @@ Popup {
                 roleValue: Constants.activityCenterNotificationTypeMention
 
                 ActivityNotificationMention {
+                    width: listView.availableWidth
                     store: root.store
                     notification: model
                     messageContextMenu: root.messageContextMenu
@@ -168,6 +169,7 @@ Popup {
                 roleValue: Constants.activityCenterNotificationTypeReply
 
                 ActivityNotificationReply {
+                    width: listView.availableWidth
                     store: root.store
                     notification: model
                     messageContextMenu: root.messageContextMenu
@@ -179,6 +181,7 @@ Popup {
                 roleValue: Constants.activityCenterNotificationTypeContactRequest
 
                 ActivityNotificationContactRequest {
+                    width: listView.availableWidth
                     store: root.store
                     notification: model
                     messageContextMenu: root.messageContextMenu

ui/app/mainui/activitycenter/views/ActivityNotificationBase.qml

@@ -14,29 +14,51 @@ Item {
     property var notification
     property var store
 
-    property alias markReadBtnVisible: markReadBtn.visible
+    property alias bodyComponent: bodyLoader.sourceComponent
+    property alias badgeComponent: badgeLoader.sourceComponent
+    property alias actionComponent: actionLoader.sourceComponent
+    property alias action: actionLoader
 
-    width: listView.availableWidth
-    height: 50
+    height: Math.max(50, bodyLoader.height + (badgeLoader.item ? badgeLoader.height : 0))
 
-    StatusFlatRoundButton {
-        id: markReadBtn
+    Loader {
+        id: bodyLoader
+        anchors.top: parent.top
+        anchors.right: actionLoader.left
+        anchors.left: parent.left
+    }
+
+    Loader {
+        id: badgeLoader
+        anchors.top: bodyLoader.bottom
+        anchors.left: parent.left
+        anchors.leftMargin: 61 // TODO find a way to align with the text of the message
+    }
+
+    Loader {
+        id: actionLoader
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: Style.current.padding
-        icon.source: Style.svg("check-activity")
-        icon.color: notification.read ? icon.disabledColor : "transparent"
-        color: "transparent"
-        tooltip.text: !notification.read ? qsTr("Mark as Read") : qsTr("Mark as Unread")
-        tooltip.orientation: StatusToolTip.Orientation.Left
-        tooltip.x: -tooltip.width - Style.current.padding
-        tooltip.y: 4
-        onClicked: {
-            notification.read ?
-                root.store.activityCenterModuleInst.markActivityCenterNotificationUnread(
-                    notification.id, notification.message.communityId, notification.message.chatId, notification.notificationType) :
-                root.store.activityCenterModuleInst.markActivityCenterNotificationRead(
-                    notification.id, notification.message.communityId, notification.chatId, notification.notificationType)
+
+        sourceComponent: StatusFlatRoundButton {
+            id: markReadBtn
+            icon.source: Style.svg("check-activity")
+            icon.color: notification.read ? icon.disabledColor : "transparent"
+            color: "transparent"
+            tooltip.text: !notification.read ? qsTr("Mark as Read") : qsTr("Mark as Unread")
+            tooltip.orientation: StatusToolTip.Orientation.Left
+            tooltip.x: -tooltip.width - Style.current.padding
+            tooltip.y: 4
+            onClicked: {
+                notification.read ?
+                    root.store.activityCenterModuleInst.markActivityCenterNotificationUnread(
+                        notification.id, notification.message.communityId,
+                        notification.message.chatId, notification.notificationType) :
+                    root.store.activityCenterModuleInst.markActivityCenterNotificationRead(
+                        notification.id, notification.message.communityId,
+                        notification.chatId, notification.notificationType)
+            }
         }
     }
 }

ui/app/mainui/activitycenter/views/ActivityNotificationContactRequest.qml

@@ -12,5 +12,5 @@ ActivityNotificationMessage {
     id: root
 
     // TODO: mark as read ignores notification type
-    // markReadBtnVisible: false
+    actionComponent: null
 }

ui/app/mainui/activitycenter/views/ActivityNotificationMention.qml

@@ -14,7 +14,7 @@ import "../controls"
 ActivityNotificationMessage {
     id: root
 
-    badge: notification.message.communityId ? communityBadgeComponent : notification.chatId ? groupChatBadgeComponent : null
+    badgeComponent: notification.message.communityId ? communityBadgeComponent : notification.chatId ? groupChatBadgeComponent : null
 
     Component {
         id: communityBadgeComponent

ui/app/mainui/activitycenter/views/ActivityNotificationMessage.qml

@@ -19,19 +19,9 @@ ActivityNotificationBase {
                                                                 "" : root.store.activityCenterList.getNotificationData(
                                                                         previousNotificationIndex, "timestamp")
 
-    property alias badge: badgeLoader.sourceComponent
-
     signal activityCenterClose()
 
-    height: Math.max(60, notificationMessage.height + (badgeLoader.item ? badgeLoader.height : 0))
-
-    MessageView {
-        id: notificationMessage
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        z: -1
-
+    bodyComponent: MessageView {
         rootStore: root.store
         messageStore: root.store.messageStore
         messageContextMenu: root.messageContextMenu
@@ -74,11 +64,4 @@ ActivityNotificationBase {
         prevMessageIndex: root.previousNotificationIndex
         prevMsgTimestamp: root.previousNotificationTimestamp
     }
-
-    Loader { 
-        id: badgeLoader
-        anchors.top: notificationMessage.bottom
-        anchors.left: parent.left
-        anchors.leftMargin: 61 // TODO find a way to align with the text of the message
-    }
 }

ui/imports/shared/views/chat/MessageView.qml

@@ -212,6 +212,7 @@ Loader {
     //        }
     //    }
 
+    height: implicitHeight
     z: (typeof chatLogView === "undefined") ? 1 : (chatLogView.count - index)
 
     sourceComponent: {