feat(Activity Center): Making mentions AC notifications match design and specs

Close #7275

ui/app/mainui/activitycenter/panels/ActivityChannelBadgePanel.qml

@@ -11,7 +11,7 @@ import shared.status 1.0
 import "../controls"
 
 Rectangle {
-    id: wrapper
+    id: root
 
     property bool isCommunity: false
     property string name: "channelName"
@@ -20,7 +20,7 @@ Rectangle {
     property string communityName: ""
     property string communityColor: ""
     property string communityThumbnailImage: ""
-    property int repliedMessageId
+    property string repliedMessageId: ""
     property string repliedMessageContent: ""
     property int notificationType
     property string profileImage: ""
@@ -45,10 +45,13 @@ Rectangle {
         anchors.left: parent.left
         anchors.leftMargin: 4
         sourceComponent: {
-            switch (wrapper.notificationType) {
+            switch (root.notificationType) {
-            case Constants.activityCenterNotificationTypeMention: return wrapper.isCommunity? communityBadgeComponent : channelBadgeComponent
+            case Constants.activityCenterNotificationTypeMention: 
-            case Constants.activityCenterNotificationTypeReply: return replyComponent
+                return root.isCommunity ? communityBadgeComponent : channelBadgeComponent
-            default: return wrapper.isCommunity? communityBadgeComponent : channelBadgeComponent
+            case Constants.activityCenterNotificationTypeReply: 
+                return replyComponent
+            default: 
+                return root.isCommunity ? communityBadgeComponent : channelBadgeComponent
             }
         }
     }
@@ -59,7 +62,7 @@ Rectangle {
         ReplyComponent {
             width: childrenRect.width
             height: parent.height
-            repliedMessageContent: wrapper.repliedMessageContent
+            repliedMessageContent: root.repliedMessageContent
         }
     }
 
@@ -70,15 +73,15 @@ Rectangle {
             width: childrenRect.width
             height: parent.height
 
-            textColor: wrapper.textColor
+            textColor: root.textColor
-            image: wrapper.communityThumbnailImage
+            image: root.communityThumbnailImage
-            iconColor: wrapper.communityColor
+            iconColor: root.communityColor
-            communityName: wrapper.communityName
+            communityName: root.communityName
-            channelName: wrapper.channelName
+            channelName: root.channelName
-            name: wrapper.name
+            name: root.name
 
-            onCommunityNameClicked: wrapper.communityNameClicked()
+            onCommunityNameClicked: root.communityNameClicked()
-            onChannelNameClicked: wrapper.channelNameClicked()
+            onChannelNameClicked: root.channelNameClicked()
         }
     }
 
@@ -89,10 +92,10 @@ Rectangle {
             width: childrenRect.width
             height: parent.height
 
-            realChatType: wrapper.realChatType
+            realChatType: root.realChatType
-            textColor: wrapper.textColor
+            textColor: root.textColor
-            name: wrapper.name
+            name: root.name
-            profileImage: wrapper.profileImage
+            profileImage: root.profileImage
         }
     }
 }

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

@@ -66,10 +66,13 @@ Popup {
         switch (notificationType) {
         case Constants.activityCenterNotificationTypeMention:
             root.mentionsCount += cnt
+            break;
         case Constants.activityCenterNotificationTypeReply:
             root.repliesCount += cnt
+            break;
         case Constants.activityCenterNotificationTypeContactRequest:
             root.contactRequestsCount += cnt
+            break;
         default:
             break;
         }
@@ -157,6 +160,8 @@ Popup {
                     store: root.store
                     notification: model
                     messageContextMenu: root.messageContextMenu
+                    previousNotificationIndex: Math.max(0, index - 1)
+                    onActivityCenterClose: root.close()
                 }
             }
             DelegateChoice {
@@ -166,6 +171,8 @@ Popup {
                     store: root.store
                     notification: model
                     messageContextMenu: root.messageContextMenu
+                    previousNotificationIndex: Math.max(0, index - 1)
+                    onActivityCenterClose: root.close()
                 }
             }
             DelegateChoice {
@@ -175,6 +182,8 @@ Popup {
                     store: root.store
                     notification: model
                     messageContextMenu: root.messageContextMenu
+                    previousNotificationIndex: Math.max(0, index - 1)
+                    onActivityCenterClose: root.close()
                 }
             }
         }

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

@@ -1,205 +0,0 @@
-import QtQuick 2.13
-
-import StatusQ.Controls 0.1
-
-import utils 1.0
-import shared 1.0
-import shared.views 1.0
-import shared.popups 1.0
-import shared.panels 1.0
-import shared.views.chat 1.0
-
-import "../controls"
-import "../panels"
-import "../popups"
-
-Item {
-    id: root
-    width: parent.width
-    // Setting a height of 0 breaks the layout for when it comes back visible
-    // The Item never goes back to actually have a height or width
-    height: visible ? messageNotificationContent.height : 0.01
-    visible: {
-        if (hideReadNotifications && model.read) {
-            return false
-        }
-        return acCurrentActivityCategory === ActivityCenterPopup.ActivityCategory.All ||
-                (model.notificationType === Constants.activityCenterNotificationTypeMention && acCurrentActivityCategory === ActivityCenterPopup.ActivityCategory.Mentions) ||
-                (model.notificationType === Constants.activityCenterNotificationTypeOneToOne && acCurrentActivityCategory === ActivityCenterPopup.ActivityCategory.ContactRequests) ||
-                (model.notificationType === Constants.activityCenterNotificationTypeReply && acCurrentActivityCategory === ActivityCenterPopup.ActivityCategory.Replies)
-    }
-
-    property var store
-    property int acCurrentActivityCategory
-    property var chatSectionModule
-    property int previousNotificationIndex
-    property bool hideReadNotifications
-    property string previousNotificationTimestamp
-    // Not Refactored Yet
-    property int communityIndex: -1 //root.store.chatsModelInst.communities.joinedCommunities.getCommunityIndex(model.message.communityId)
-    property var messageContextMenu
-    function openProfile() {
-        Global.openProfilePopup(model.author)
-    }
-    signal activityCenterClose()
-
-    function reevaluateItemBadge() {
-        let details = root.store.getBadgeDetails(model.sectionId, model.chatId)
-        badge.isCommunity = (details.sType === "community")
-        badge.name = details.cName
-        badge.channelName = details.cName
-        badge.communityName = details.sName
-        badge.communityColor = details.sColor
-        badge.communityThumbnailImage = details.sImage
-    }
-
-    Component {
-        id: markReadBtnComponent
-        StatusFlatRoundButton {
-            id: markReadBtn
-            width: 32
-            height: 32
-            icon.width: 24
-            icon.height: 24
-            icon.source: Style.svg("check-activity")
-            icon.color: model.read ? icon.disabledColor : "transparent"
-            color: "transparent"
-            tooltip.text: !model.read ?
-                qsTr("Mark as Read") :
-                qsTr("Mark as Unread")
-            tooltip.orientation: StatusToolTip.Orientation.Left
-            tooltip.x: -tooltip.width - Style.current.padding
-            tooltip.y: markReadBtn.height / 2 - height / 2 + 4
-            onClicked: {
-                if (!model.read) {
-                    return root.store.activityCenterModuleInst.markActivityCenterNotificationRead(model.id, model.message.communityId, model.chatId, model.notificationType)
-                }
-                return root.store.activityCenterModuleInst.markActivityCenterNotificationUnread(model.id, model.message.communityId, model.message.chatId, model.notificationType)
-            }
-        }
-    }
-
-
-    Component {
-        id: acceptRejectComponent
-        AcceptRejectOptionsButtonsPanel {
-            id: buttons
-            onAcceptClicked: {
-                // Not Refactored Yet
-//                const setActiveChannel = root.store.chatsModelInst.channelView.setActiveChannel
-//                const chatId = model.message.chatId
-//                const messageId = model.message.messageId
-                root.store.activityCenterModuleInst.acceptActivityCenterNotification(model.id)
-//                root.store.chatsModelInst.activityNotificationList.acceptActivityCenterNotification(model.id)
-//                setActiveChannel(chatId)
-//                positionAtMessage(messageId)
-            }
-            onDeclineClicked: root.store.activityCenterModuleInst.dismissActivityCenterNotification(model.id)
-            onProfileClicked: root.openProfile()
-            onBlockClicked: {
-                // Not Refactored Yet
-//                const pk = model.author
-//                blockContactConfirmationDialog.contactName = chatsModel.userNameOrAlias(pk)
-//                blockContactConfirmationDialog.contactAddress = pk
-//                blockContactConfirmationDialog.open()
-            }
-
-            BlockContactConfirmationDialog {
-                id: blockContactConfirmationDialog
-                onBlockButtonClicked: {
-                    // Not Refactored Yet
-//                    root.store.profileModuleInst.blockContact(blockContactConfirmationDialog.contactAddress)
-                    root.store.activityCenterModuleInst.dismissActivityCenterNotification(model.id)
-                    blockContactConfirmationDialog.close()
-                }
-            }
-        }
-    }
-
-    Item {
-        id: messageNotificationContent
-        width: parent.width
-        height: childrenRect.height
-        MessageView {
-            id: notificationMessage
-            anchors.right: undefined
-            rootStore: root.store
-            messageStore: root.store.messageStore
-            messageId: model.id
-            senderDisplayName: model.message.senderDisplayName
-            messageText: model.message.messageText
-            responseToMessageWithId: model.message.responseToMessageWithId
-            senderId: model.message.senderId
-            senderOptionalName: model.message.senderOptionalName
-            senderIsEnsVerified: model.message.senderEnsVerified
-            senderIcon: model.message.senderIcon
-            amISender: model.message.amISender
-            messageImage: model.message.messageImage
-            messageTimestamp: model.timestamp
-            messageOutgoingStatus: model.message.outgoingStatus
-            messageContentType: model.message.contentType
-            senderTrustStatus: model.message.senderTrustStatus
-            activityCenterMessage: true
-            activityCenterMessageRead: model.read
-            onImageClicked: Global.openImagePopup(image, root.messageContextMenu)
-            scrollToBottom: null
-            messageClickHandler: {
-                if (isProfileClick) {
-                    return Global.openProfilePopup(model.message.senderId);
-                }
-
-                activityCenterClose()
-                root.store.activityCenterModuleInst.switchTo(model.sectionId, model.chatId, model.id)
-            }
-            prevMessageIndex: root.previousNotificationIndex
-            prevMsgTimestamp: root.previousNotificationTimestamp
-        }
-
-        Rectangle {
-            id: bottomBackdrop
-            visible: badge.visible
-            anchors.top: notificationMessage.bottom
-            anchors.bottom: badge.bottom
-            anchors.bottomMargin: visible ? -Style.current.smallPadding : 0
-            width: parent.width
-            color: model.read ? Style.current.transparent : Utils.setColorAlpha(Style.current.blue, 0.1)
-        }
-
-        Loader {
-            active: true
-            anchors.right: parent.right
-            anchors.rightMargin: 12
-            anchors.bottom: notificationMessage.bottom
-            anchors.bottomMargin: 14
-            z: 52
-
-            sourceComponent: {
-                if (model.notificationType === Constants.activityCenterNotificationTypeOneToOne) {
-                    return acceptRejectComponent
-                }
-                return markReadBtnComponent
-            }
-        }
-
-        ActivityChannelBadgePanel {
-            id: badge
-            anchors.top: notificationMessage.bottom
-            anchors.left: parent.left
-            anchors.leftMargin: 61 // TODO find a way to align with the text of the message
-            visible: model.notificationType !== Constants.activityCenterNotificationTypeOneToOne
-            notificationType: model.notificationType
-            profileImage: realChatType === Constants.chatType.oneToOne ? Global.getProfileImage(chatId) || ""  : ""
-            repliedMessageContent: model.repliedMessage.messageText
-            repliedMessageId: model.message.responseToMessageWithId
-
-            onCommunityNameClicked: {
-                root.store.activityCenterModuleInst.switchTo(model.sectionId, "", "")
-                activityCenterClose();
-            }
-            onChannelNameClicked: {
-                root.store.activityCenterModuleInst.switchTo(model.sectionId, model.chatId, "")
-                activityCenterClose();
-            }
-        }
-    }
-}

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

@@ -11,6 +11,7 @@ import utils 1.0
 ActivityNotificationMessage {
     id: root
 
+    badgeVisible: false
     // TODO: mark as read ignores notification type
     // markReadBtnVisible: false
 }

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

@@ -9,14 +9,23 @@ import shared 1.0
 import utils 1.0
 import shared.views.chat 1.0
 
+import "../panels"
+
 ActivityNotificationBase {
     id: root
 
     property var messageContextMenu
+    property int previousNotificationIndex
+
+    readonly property string previousNotificationTimestamp: previousNotificationIndex == 0 ?
+                                                                "" : root.store.activityCenterList.getNotificationData(
+                                                                        previousNotificationIndex, "timestamp")
+
+    property alias badgeVisible: badge.visible
 
     signal activityCenterClose()
 
-    height: Math.max(60, notificationMessage.height)
+    height: Math.max(60, notificationMessage.height + (badge.visible ? badge.height : 0))
 
     MessageView {
         id: notificationMessage
@@ -61,8 +70,31 @@ ActivityNotificationBase {
                 return Global.openProfilePopup(notification.message.senderId)
             }
 
-            activityCenterClose()
+            root.activityCenterClose()
             root.store.activityCenterModuleInst.switchTo(notification.sectionId, notification.chatId, notification.id)
         }
+        prevMessageIndex: root.previousNotificationIndex
+        prevMsgTimestamp: root.previousNotificationTimestamp
+    }
+
+    ActivityChannelBadgePanel {
+        id: badge
+        anchors.top: notificationMessage.bottom
+        anchors.left: parent.left
+        anchors.leftMargin: 61 // TODO find a way to align with the text of the message
+        isCommunity: notification.communityId !== ""
+        notificationType: notification.notificationType
+        profileImage: visible ? Global.getProfileImage(isCommunity ? notification.communityId : notification.chatId) : ""
+        repliedMessageContent: notification.repliedMessage.messageText
+        repliedMessageId: notification.message.responseToMessageWithId
+
+        onCommunityNameClicked: {
+            root.store.activityCenterModuleInst.switchTo(notification.sectionId, "", "")
+            root.activityCenterClose()
+        }
+        onChannelNameClicked: {
+            root.store.activityCenterModuleInst.switchTo(notification.sectionId, notification.chatId, "")
+            root.activityCenterClose()
+        }
     }
 }

ui/app/mainui/activitycenter/views/qmldir

@@ -1,2 +1 @@
 ActivityCenterGroupRequest 1.0 ActivityCenterGroupRequest.qml
-ActivityCenterMessageComponentView 1.0 ActivityCenterMessageComponentView.qml