status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Close #7275
This commit is contained in:
MishkaRogachev 2022-09-20 19:11:29 +03:00 committed by Mikhail Rogachev
parent 7ea19d14d0
commit 239563e93b
6 changed files with 66 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/app/mainui/activitycenter/panels/ActivityChannelBadgePanel.qml
View File

@ -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) {
case Constants.activityCenterNotificationTypeMention: return wrapper.isCommunity? communityBadgeComponent : channelBadgeComponent
case Constants.activityCenterNotificationTypeReply: return replyComponent
default: return wrapper.isCommunity? communityBadgeComponent : channelBadgeComponent
switch (root.notificationType) {
case Constants.activityCenterNotificationTypeMention:
return root.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
image: wrapper.communityThumbnailImage
iconColor: wrapper.communityColor
communityName: wrapper.communityName
channelName: wrapper.channelName
name: wrapper.name
textColor: root.textColor
image: root.communityThumbnailImage
iconColor: root.communityColor
communityName: root.communityName
channelName: root.channelName
name: root.name
onCommunityNameClicked: wrapper.communityNameClicked()
onChannelNameClicked: wrapper.channelNameClicked()
onCommunityNameClicked: root.communityNameClicked()
onChannelNameClicked: root.channelNameClicked()
}
}
@ -89,10 +92,10 @@ Rectangle {
width: childrenRect.width
height: parent.height
realChatType: wrapper.realChatType
textColor: wrapper.textColor
name: wrapper.name
profileImage: wrapper.profileImage
realChatType: root.realChatType
textColor: root.textColor
name: root.name
profileImage: root.profileImage
}
}
}

9
ui/app/mainui/activitycenter/popups/ActivityCenterPopup.qml
View File

@ -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()
}
}
}

205
ui/app/mainui/activitycenter/views/ActivityCenterMessageComponentView.qml
View File

@ -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();
}
}
}
}

1
ui/app/mainui/activitycenter/views/ActivityNotificationContactRequest.qml
View File

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

36
ui/app/mainui/activitycenter/views/ActivityNotificationMessage.qml
View File

@ -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()
}
}
}

1
ui/app/mainui/activitycenter/views/qmldir
View File

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