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(ActivityCenter): Notification badge with community info

This commit is contained in:
MishkaRogachev 2022-09-22 19:35:18 +03:00 committed by Mikhail Rogachev
parent b923c97773
commit d4d22f4094
8 changed files with 79 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/modules/main/communities/view.nim
View File

@ -234,6 +234,19 @@ QtObject:
proc requestCommunityInfo*(self: View, communityId: string) {.slot.} =
self.delegate.requestCommunityInfo(communityId)
proc getCommunityDetails*(self: View, communityId: string): string {.slot.} =
let communityItem = self.model.getItemById(communityId)
if (communityItem.id == ""):
return ""
# TODO: unify with observed community approach
let jsonObj = %* {
"name": communityItem.name,
"image": communityItem.image,
"color": communityItem.color,
}
return $jsonObj
proc isUserMemberOfCommunity*(self: View, communityId: string): bool {.slot.} =
self.delegate.isUserMemberOfCommunity(communityId)

12
ui/app/AppLayouts/Chat/stores/RootStore.qml
View File

@ -374,6 +374,18 @@ QtObject {
communitiesModuleInst.requestCommunityInfo(id)
}
function getCommunityDetailsAsJson(id) {
let jsonObj = communitiesModuleInst.getCommunityDetails(id)
try {
let obj = JSON.parse(jsonObj)
return obj
}
catch (e) {
console.debug("error parsing community by id: ", id, " error: ", e.message)
return {}
}
}
function getLinkTitleAndCb(link) {
const result = {
title: "Status",

2
ui/app/mainui/activitycenter/controls/Badge.qml
View File

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

4
ui/app/mainui/activitycenter/controls/ChannelBadge.qml
View File

@ -12,7 +12,7 @@ import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
Badge {
id: channelBadge
id: root
signal channelNameClicked()
@ -41,7 +41,7 @@ Badge {
asset.width: 16
asset.height: 16
asset.letterSize: 11
name: channelBadge.name
name: root.name
}
StyledText {

102
ui/app/mainui/activitycenter/controls/CommunityBadge.qml
View File

@ -10,80 +10,45 @@ import shared.panels 1.0
import shared.status 1.0
Badge {
id: communityBadge
id: root
property string image: ""
property string iconColor: ""
property bool useLetterIdenticon: !image
property string communityName: ""
property string channelName: ""
property string communityId: ""
property string name: "channelName"
property color textColor
property string communityImage
property string communityName
property string communityColor
property string channelName
signal communityNameClicked()
signal channelNameClicked()
SVGImage {
id: communityIcon
width: 16
height: 16
source: Style.svg("communities")
StatusSmartIdenticon {
id: identicon
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
ColorOverlay {
anchors.fill: parent
source: parent
color: textColor
}
}
Loader {
id: communityImageLoader
active: true
anchors.left: communityIcon.visible ? communityIcon.right : parent.left
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
sourceComponent: communityBadge.useLetterIdenticon ? letterIdenticon : imageIcon
}
Component {
id: imageIcon
RoundedImage {
source: communityBadge.image
noMouseArea: true
noHover: true
width: 16
height: 16
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
width: 16
height: 16
letterSize: 12
name: communityBadge.communityName
color: communityBadge.iconColor
}
name: root.communityName
asset.width: 16
asset.height: 16
asset.color: root.communityColor
asset.letterSize: width / 2.4
asset.name: root.communityImage
asset.isImage: true
}
StyledTextEdit {
id: communityName
text: Utils.getLinkStyle(communityBadge.communityName, hoveredLink, textColor)
id: communityNameText
width: implicitWidth > 300 ? 300 : implicitWidth
height: 18
anchors.left: identicon.right
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
text: Utils.getLinkStyle(root.communityName, hoveredLink, root.communityColor)
readOnly: true
textFormat: Text.RichText
width: implicitWidth > 300 ? 300 : implicitWidth
clip: true
anchors.left: communityImageLoader.right
anchors.leftMargin: 4
color: textColor
color: root.communityColor
font.pixelSize: 13
anchors.verticalCenter: parent.verticalCenter
onLinkActivated: communityNameClicked()
onLinkActivated: root.communityNameClicked()
}
SVGImage {
@ -91,28 +56,29 @@ Badge {
source: Style.svg("show-category")
width: 16
height: 16
anchors.left: communityName.right
visible: root.channelName.length
anchors.left: communityNameText.right
anchors.verticalCenter: parent.verticalCenter
ColorOverlay {
anchors.fill: parent
source: parent
color: textColor
color: root.communityColor
}
}
StyledTextEdit {
id: channelName
text: Utils.getLinkStyle(communityBadge.channelName || name, hoveredLink, textColor)
id: channelNameText
width: implicitWidth > 300 ? 300 : implicitWidth
height: 18
anchors.left: caretImage.right
anchors.verticalCenter: parent.verticalCenter
text: Utils.getLinkStyle(root.channelName || name, hoveredLink, root.channelColor)
readOnly: true
textFormat: Text.RichText
width: implicitWidth > 300 ? 300 : implicitWidth
clip: true
anchors.left: caretImage.right
color: textColor
color: root.communityColor
font.pixelSize: 13
anchors.verticalCenter: parent.verticalCenter
onLinkActivated: channelNameClicked()
onLinkActivated: root.channelNameClicked()
}
}

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

@ -1,101 +0,0 @@
import QtQuick 2.13
import StatusQ.Core.Theme 0.1
import utils 1.0
import shared.controls 1.0
import shared 1.0
import shared.panels 1.0
import shared.status 1.0
import "../controls"
Rectangle {
id: root
property bool isCommunity: false
property string name: "channelName"
property int realChatType: -1
property string channelName: ""
property string communityName: ""
property string communityColor: ""
property string communityThumbnailImage: ""
property string repliedMessageId: ""
property string repliedMessageContent: ""
property int notificationType
property string profileImage: ""
property color textColor: Theme.palette.baseColor1
signal communityNameClicked()
signal channelNameClicked()
height: visible ? 24 : 0
width: childrenRect.width + 12
color: Style.current.transparent
border.color: Style.current.borderSecondary
border.width: 1
radius: 11
visible: (repliedMessageId > -1)
Loader {
active: true
height: parent.height
anchors.left: parent.left
anchors.leftMargin: 4
sourceComponent: {
switch (root.notificationType) {
case Constants.activityCenterNotificationTypeMention:
return root.isCommunity ? communityBadgeComponent : channelBadgeComponent
case Constants.activityCenterNotificationTypeReply:
return replyComponent
default:
return root.isCommunity ? communityBadgeComponent : channelBadgeComponent
}
}
}
Component {
id: replyComponent
ReplyComponent {
width: childrenRect.width
height: parent.height
repliedMessageContent: root.repliedMessageContent
}
}
Component {
id: communityBadgeComponent
CommunityBadge {
width: childrenRect.width
height: parent.height
textColor: root.textColor
image: root.communityThumbnailImage
iconColor: root.communityColor
communityName: root.communityName
channelName: root.channelName
name: root.name
onCommunityNameClicked: root.communityNameClicked()
onChannelNameClicked: root.channelNameClicked()
}
}
Component {
id: channelBadgeComponent
ChannelBadge {
width: childrenRect.width
height: parent.height
realChatType: root.realChatType
textColor: root.textColor
name: root.name
profileImage: root.profileImage
}
}
}

2
ui/app/mainui/activitycenter/panels/qmldir
View File

@ -1,2 +1,2 @@
ActivityCenterPopupTopBarPanel 1.0 ActivityCenterPopupTopBarPanel.qml
ActivityChannelBadgePanel 1.0 ActivityChannelBadgePanel.qml

26
ui/app/mainui/activitycenter/views/ActivityNotificationMention.qml
View File

@ -14,9 +14,6 @@ import "../controls"
ActivityNotificationMessage {
id: root
signal communityNameClicked()
signal channelNameClicked()
badge: notification.message.communityId ? communityBadgeComponent : notification.chatId ? groupChatBadgeComponent : null
Component {
@ -25,16 +22,23 @@ ActivityNotificationMessage {
CommunityBadge {
id: communityBadge
property string communityId: notification.message.communityId
property var community: root.store.getCommunityDetailsAsJson(notification.message.communityId)
// TODO: here i need chanel
// property var channel: root.store.chatSectionModule.getItemAsJson(notification.chatId)
textColor: Utils.colorForPubkey(communityId)
// TODO: wrong result image: Global.getProfileImage(communityId)
// TODO: wrong result iconColor: Utils.colorForPubkey(communityId)
communityName: root.store.getSectionNameById(communityId)
// TODO: no info about channelName
communityName: community.name
communityImage: community.image
communityColor: community.color
onCommunityNameClicked: root.communityNameClicked()
onChannelNameClicked: root.channelNameClicked()
// channelName: channel.name
onCommunityNameClicked: {
root.store.setActiveCommunity(notification.message.communityId)
}
onChannelNameClicked: {
root.activityCenterClose()
root.store.activityCenterModuleInst.switchTo(notification.sectionId, notification.chatId, notification.id)
}
}
}