From 3ef403a022385f4803651c7ebd98e9dfe03f12aa Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Mon, 21 Jun 2021 11:03:40 -0400 Subject: [PATCH] feat(act-center): add community badge links to community and channel --- src/app/chat/view.nim | 4 + .../chat/views/activity_notification_list.nim | 2 + src/app/chat/views/community_list.nim | 38 +++++ src/status/chat.nim | 8 +- .../Chat/ChatColumn/ActivityCenter.qml | 28 ++-- .../ChatComponents/ActivityChannelBadge.qml | 131 +++++++++++++++++- 6 files changed, 198 insertions(+), 13 deletions(-) diff --git a/src/app/chat/view.nim b/src/app/chat/view.nim index 45804fb864..79fe7187af 100644 --- a/src/app/chat/view.nim +++ b/src/app/chat/view.nim @@ -776,6 +776,10 @@ QtObject: error "Error editing channel", msg=e.msg, channelId, name, description result = StatusGoError(error: e.msg).toJson + proc getChannelNameById*(self: ChatsView, channelId: string): string {.slot.} = + if self.status.chat.channels.hasKey(channelId): + result = self.status.chat.channels[channelId].name + proc setActiveChannelByIndex*(self: ChatsView, index: int) {.slot.} = self.channelView.setActiveChannelByIndex(index) diff --git a/src/app/chat/views/activity_notification_list.nim b/src/app/chat/views/activity_notification_list.nim index f45239d58d..395933f781 100644 --- a/src/app/chat/views/activity_notification_list.nim +++ b/src/app/chat/views/activity_notification_list.nim @@ -151,6 +151,8 @@ QtObject: self.markActivityCenterNotificationsRead(fmt"[""{id}""]") proc toActivityCenterNotificationViewItem*(self: ActivityNotificationList, activityCenterNotification: ActivityCenterNotification): ActivityCenterNotificationViewItem = + let communityId = self.status.chat.getCommunityIdForChat(activityCenterNotification.chatId) + activityCenterNotification.message.communityId = communityId ActivityCenterNotificationViewItem( id: activityCenterNotification.id, chatId: activityCenterNotification.chatId, diff --git a/src/app/chat/views/community_list.nim b/src/app/chat/views/community_list.nim index f9f58f494d..2f52533d67 100644 --- a/src/app/chat/views/community_list.nim +++ b/src/app/chat/views/community_list.nim @@ -45,6 +45,44 @@ QtObject: method rowCount*(self: CommunityList, index: QModelIndex = nil): int = self.communities.len + proc getCommunityIndex(self: CommunityList, communityId: string): int {.slot.} = + var i = 0 + for community in self.communities: + if (community.id == communityId): + return i + i = i + 1 + return -1 + + proc rowData(self: CommunityList, index: int, column: string): string {.slot.} = + if (index > self.communities.len - 1): + return + let community = self.communities[index] + case column: + of "name": result = community.name + of "description": result = community.description + of "id": result = community.id + of "access": result = $community.access + of "admin": result = $community.admin + of "verified": result = $community.verified + of "joined": result = $community.joined + of "ensOnly": result = $community.ensOnly + of "canRequestAccess": result = $community.canRequestAccess + of "canJoin": result = $community.canJoin + of "isMember": result = $community.isMember + of "nbMembers": result = $community.members.len + of "unviewedMessagesCount": result = $community.unviewedMessagesCount + of "thumbnailImage": + if (not community.communityImage.isNil): + result = community.communityImage.thumbnail + else: + result = "" + of "largeImage": + if (not community.communityImage.isNil): + result = community.communityImage.large + else: + result = "" + of "communityColor": result = community.communityColor + method data(self: CommunityList, index: QModelIndex, role: int): QVariant = if not index.isValid: return diff --git a/src/status/chat.nim b/src/status/chat.nim index 4f9f2f7a31..c7e902a430 100644 --- a/src/status/chat.nim +++ b/src/status/chat.nim @@ -573,13 +573,19 @@ proc markActivityCenterNotificationsRead*(self: ChatModel, ids: seq[string]): st proc unreadActivityCenterNotificationsCount*(self: ChatModel): int = status_chat.unreadActivityCenterNotificationsCount() - + proc getLinkPreviewData*(link: string, success: var bool): JsonNode = result = status_chat.getLinkPreviewData(link, success) proc rpcChatMessages*(chatId: string, cursorVal: JsonNode, limit: int, success: var bool): string = result = status_chat.rpcChatMessages(chatId, cursorVal, limit, success) +proc getCommunityIdForChat*(self: ChatModel, chatId: string): string = + if (not self.hasChannel(chatId)): + return "" + return self.channels[chatId].communityId + + proc rpcReactions*(chatId: string, cursorVal: JsonNode, limit: int, success: var bool): string = result = status_chat.rpcReactions(chatId, cursorVal, limit, success) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml b/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml index d724b4595d..87866fc708 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml @@ -228,6 +228,11 @@ Popup { } activityCenter.close() + + if (model.message.communityId) { + chatsModel.communities.setActiveCommunity(model.message.communityId) + } + chatsModel.channelView.setActiveChannel(model.message.chatId) positionAtMessage(model.message.messageId) } @@ -247,17 +252,6 @@ Popup { prevMsgTimestamp: notificationDelegate.idx === 0 ? "" : chatsModel.activityNotificationList.getNotificationData(prevMessageIndex, "timestamp") } - ActivityChannelBadge { - id: badge - name: model.name - chatId: model.chatId - notificationType: model.notificationType - responseTo: model.message.responseTo - anchors.top: notificationMessage.bottom - anchors.left: parent.left - anchors.leftMargin: 61 // TODO find a way to align with the text of the message - } - Rectangle { anchors.top: notificationMessage.bottom anchors.bottom: badge.bottom @@ -266,6 +260,18 @@ Popup { color: model.read ? Style.current.transparent : Utils.setColorAlpha(Style.current.blue, 0.1) } + + ActivityChannelBadge { + id: badge + name: model.name + chatId: model.chatId + notificationType: model.notificationType + responseTo: model.message.responseTo + communityId: model.message.communityId + anchors.top: notificationMessage.bottom + anchors.left: parent.left + anchors.leftMargin: 61 // TODO find a way to align with the text of the message + } } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml index 24ae49016b..ed2f37b45a 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml @@ -1,4 +1,5 @@ import QtQuick 2.13 +import QtGraphicalEffects 1.13 import "../../../../../imports" import "../../../../../shared" import "../../../../../shared/status" @@ -9,6 +10,7 @@ Rectangle { property string name: "channelName" property string identicon property string responseTo + property string communityId property int notificationType property int chatType: chatsModel.channelView.chats.getChannelType(chatId) property int realChatType: { @@ -34,7 +36,7 @@ Rectangle { height: parent.height sourceComponent: { switch (model.notificationType) { - case Constants.activityCenterNotificationTypeMention: return channelComponent + case Constants.activityCenterNotificationTypeMention: return wrapper.communityId ? communityComponent : channelComponent case Constants.activityCenterNotificationTypeReply: return replyComponent default: return channelComponent } @@ -78,6 +80,133 @@ Rectangle { font.pixelSize: 13 anchors.verticalCenter: parent.verticalCenter selectByMouse: true + readOnly: true + } + } + } + + Component { + id: communityComponent + + Item { + property int communityIndex: chatsModel.communities.joinedCommunities.getCommunityIndex(wrapper.communityId) + + property string image: communityIndex > -1 ? chatsModel.communities.joinedCommunities.rowData(communityIndex, "thumbnailImage") : "" + property string iconColor: !image && communityIndex > -1 ? chatsModel.communities.joinedCommunities.rowData(communityIndex, "communityColor"): "" + property bool useLetterIdenticon: !image + property string communityName: communityIndex > -1 ? chatsModel.communities.joinedCommunities.rowData(communityIndex, "name") : "" + property string channelName: chatsModel.getChannelNameById(wrapper.chatId) + + id: communityBadge + width: childrenRect.width + height: parent.height + SVGImage { + id: communityIcon + width: 16 + height: 16 + source: "../../../../img/communities.svg" + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter:parent.verticalCenter + + ColorOverlay { + anchors.fill: parent + source: parent + color: Style.current.secondaryText + } + } + + Loader { + id: communityImageLoader + active: true + anchors.left: communityIcon.right + 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 + chatName: communityBadge.communityName + color: communityBadge.iconColor + } + } + + function getLinkStyle(link, hoveredLink) { + return `` + + `${link}` + } + + StyledTextEdit { + id: communityName + text: communityBadge.getLinkStyle(communityBadge.communityName, hoveredLink) + height: 18 + readOnly: true + textFormat: Text.RichText + width: implicitWidth > 300 ? 300 : implicitWidth + clip: true + anchors.left: communityImageLoader.right + anchors.leftMargin: 4 + color: Style.current.secondaryText + font.pixelSize: 13 + anchors.verticalCenter: parent.verticalCenter + onLinkActivated: function () { + chatsModel.communities.setActiveCommunity(wrapper.communityId) + } + } + + SVGImage { + id: caretImage + source: "../../../../img/show-category.svg" + width: 16 + height: 16 + anchors.left: communityName.right + anchors.verticalCenter: parent.verticalCenter + + ColorOverlay { + anchors.fill: parent + source: parent + color: Style.current.secondaryText + } + } + + StyledTextEdit { + id: channelName + text: communityBadge.getLinkStyle(communityBadge.channelName || wrapper.name, hoveredLink) + height: 18 + readOnly: true + textFormat: Text.RichText + width: implicitWidth > 300 ? 300 : implicitWidth + clip: true + anchors.left: caretImage.right + color: Style.current.secondaryText + font.pixelSize: 13 + anchors.verticalCenter: parent.verticalCenter + onLinkActivated: function () { + chatsModel.communities.setActiveCommunity(wrapper.communityId) + chatsModel.setActiveChannel(model.message.chatId) + } } } }