From bee54e628f80ac3509fd5e2c2e63f26232cb3728 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Fri, 28 May 2021 13:35:21 -0400 Subject: [PATCH] feat(Activity center): add placeholder activity center Fixes #2608 --- .../Chat/ChatColumn/ActivityCenter.qml | 131 ++++++++++++++ .../ChatComponents/ActivityCenterTopBar.qml | 112 ++++++++++++ .../ChatComponents/ActivityChannelBadge.qml | 78 ++++++++ ui/app/AppLayouts/Chat/ChatColumn/Message.qml | 4 + ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml | 167 ++++++++++++------ .../components}/ContactRequest.qml | 10 +- .../Profile/LeftTab/components/MenuButton.qml | 2 +- .../Wallet/components/AddAccount.qml | 2 +- ui/app/img/double-check.svg | 5 + ui/app/img/eye-barred.svg | 5 + ui/app/img/{add_watch_only.svg => eye.svg} | 0 ui/nim-status-client.pro | 5 +- ui/shared/status/StatusButton.qml | 2 +- ui/shared/status/StatusContextMenuButton.qml | 46 +---- ui/shared/status/StatusIdenticon.qml | 2 + ui/shared/status/StatusToolTip.qml | 12 +- 16 files changed, 472 insertions(+), 111 deletions(-) create mode 100644 ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml create mode 100644 ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml create mode 100644 ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml rename ui/app/AppLayouts/{Profile/Sections/Contacts => Chat/components}/ContactRequest.qml (94%) create mode 100644 ui/app/img/double-check.svg create mode 100644 ui/app/img/eye-barred.svg rename ui/app/img/{add_watch_only.svg => eye.svg} (100%) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml b/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml new file mode 100644 index 0000000000..f5e0220d8a --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml @@ -0,0 +1,131 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import "../../../../shared" +import "../../../../shared/status" +import "../../../../imports" +import "./ChatComponents" +import "../components" + +Popup { + enum Filter { + All, + Mentions, + Replies, + ContactRequests + } + property int currentFilter: ActivityCenter.Filter.All + + id: activityCenter + modal: true + + Overlay.modal: Rectangle { + color: Qt.rgba(0, 0, 0, 0.4) + } + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside + parent: Overlay.overlay + width: 560 + height: chatColumnLayout.height - (chatTopBarContent.height * 2) // TODO get screen size + background: Rectangle { + color: Style.current.background + radius: Style.current.radius + } + y: chatTopBarContent.height + x: applicationWindow.width - activityCenter.width - Style.current.halfPadding + onOpened: { + popupOpened = true + } + onClosed: { + popupOpened = false + } + padding: 0 + + ActivityCenterTopBar { + id: activityCenterTopBar + } + + Column { + id: notificationsContainer + anchors.top: activityCenterTopBar.bottom + anchors.topMargin: 13 + width: parent.width + + StyledText { + text: "Today" + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + font.pixelSize: 15 + color: Style.current.secondaryText + height: implicitHeight + 4 + } + + ContactRequest { + name: "@alice.eth" + address: "0x04db719bf99bee817c97cab909c682d43e1ffa58c4f24edaa0cb7e97e6779dbfd44f430d9a4777e0faa45d74bdbe70240cbea9db8e2cf9a8111374ef4f5d50ac24" + identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC" + // TODO set to transparent bg if the notif is read + color: Utils.setColorAlpha(Style.current.blue, 0.1) + radius: 0 + } + + ContactRequest { + name: "@bob.eth" + address: "0x04db719bf99bee817c97cab909c682d43e1ffa58c4f24edaa0cb7e97e6779dbfd44f430d9a4777e0faa45d74bdbe70240cbea9db8e2cf9a8111374ef4f5d50ac24" + identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAjUlEQVR4nOzWwQmEUAwG4V2xF+sTLEOwPqvRBhSUEBh/5jt6eDIEQoZfCENoDKExhMYQmpiQsevhbV+Pq+/ztPw7/hczEUNoDKEpb5C77fRWdZvFTMQQGkNoHt9a3bdT9f2YiRhCY4iaxEzEEBpDaMq3Vjdvra8yhCYmJEbMRAyhMYTGEBpDaM4AAAD//8vbFGZ2G0s4AAAAAElFTkSuQmCC" + // TODO set to transparent bg if the notif is read + color: Utils.setColorAlpha(Style.current.blue, 0.1) + radius: 0 + } + + Rectangle { + width: parent.width + height: childrenRect.height + Style.current.smallPadding + color: Utils.setColorAlpha(Style.current.blue, 0.1) + + Message { + id: placeholderMessage + anchors.right: undefined + messageId: "placeholderMessage" + userName: "@vitalik" + identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC" + message: "@roger great question my dude" + contentType: Constants.messageType + placeholderMessage: true + } + + StatusIconButton { + id: markReadBtn + icon.name: "double-check" + iconColor: Style.current.primary + icon.width: 24 + icon.height: 24 + width: 32 + height: 32 + onClicked: console.log('TODO mark read') + anchors.right: parent.right + anchors.rightMargin: 12 + anchors.verticalCenter: placeholderMessage.verticalCenter + z: 52 + + StatusToolTip { + visible: markReadBtn.hovered + text: qsTr("Mark as Read") + orientation: "left" + x: - width - Style.current.padding + y: markReadBtn.height / 2 - height / 2 + 4 + } + } + + ActivityChannelBadge { + name: "status-desktop-ui" + chatType: Constants.chatTypePublic + chatId: "status-desktop-ui" + anchors.top: markReadBtn.bottom + anchors.topMargin: Style.current.halfPadding + anchors.left: parent.left + anchors.leftMargin: 61 // TODO find a way to align with the text of the message + } + } + + // TODO add reply placeholder and chaeck if we can do the bubble under + } +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml new file mode 100644 index 0000000000..08d8d3f6a4 --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml @@ -0,0 +1,112 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import "../../../../../imports" +import "../../../../../shared" +import "../../../../../shared/status" +import ".." +import "../../../Profile/LeftTab/constants.js" as ProfileConstants + +Item { + width: parent.width + height: 64 + + Row { + id: filterButtons + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + height: allBtn.height + spacing: Style.current.padding + + StatusButton { + id: allBtn + text: qsTr("All") + type: "secondary" + size: "small" + highlighted: activityCenter.currentFilter === ActivityCenter.Filter.All + onClicked: activityCenter.currentFilter = ActivityCenter.Filter.All + } + + StatusButton { + id: mentionsBtn + text: qsTr("Mentions") + type: "secondary" + size: "small" + highlighted: activityCenter.currentFilter === ActivityCenter.Filter.Mentions + onClicked: activityCenter.currentFilter = ActivityCenter.Filter.Mentions + } + + StatusButton { + id: repliesbtn + text: qsTr("Replies") + type: "secondary" + size: "small" + highlighted: activityCenter.currentFilter === ActivityCenter.Filter.Replies + onClicked: activityCenter.currentFilter = ActivityCenter.Filter.Replies + } + + StatusButton { + id: contactRequestsBtn + text: qsTr("Contact requests") + type: "secondary" + size: "small" + highlighted: activityCenter.currentFilter === ActivityCenter.Filter.ContactRequests + onClicked: activityCenter.currentFilter = ActivityCenter.Filter.ContactRequests + } + } + + Row { + id: otherButtons + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + height: markAllReadBtn.height + spacing: Style.current.padding + + StatusIconButton { + id: markAllReadBtn + icon.name: "double-check" + iconColor: Style.current.primary + icon.width: 24 + icon.height: 24 + width: 32 + height: 32 + onClicked: console.log('TODO mark all as read') + + StatusToolTip { + visible: markAllReadBtn.hovered + text: qsTr("Mark all as Read") + } + } + + StatusContextMenuButton { + id: moreActionsBtn + onClicked: moreActionsMenu.open() + + PopupMenu { + id: moreActionsMenu + x: moreActionsBtn.width - moreActionsMenu.width + y: moreActionsBtn.height + 4 + + Action { + icon.source: "../../../../img/eye-barred.svg" + icon.width: 16 + icon.height: 16 + text: qsTr("Hide read notifications") + onTriggered: console.log('TODO Change settings') + } + Action { + icon.source: "../../../../img/bell.svg" + icon.width: 16 + icon.height: 16 + text: qsTr("Notification settings") + onTriggered: { + activityCenter.close() + appMain.changeAppSection(Constants.profile) + profileLayoutContainer.changeProfileSection(ProfileConstants.NOTIFICATIONS) + } + } + } + } + } +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml new file mode 100644 index 0000000000..935ed4b271 --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml @@ -0,0 +1,78 @@ +import QtQuick 2.13 +import "../../../../../imports" +import "../../../../../shared" +import "../../../../../shared/status" +import ".." + +Rectangle { + property string chatId: "" + property string name: "channelName" + property string identicon + property int chatType: Constants.chatTypePublic + property int realChatType: { + if (chatType === Constants.chatTypeCommunity) { + // TODO add a check for private community chats once it is created + return Constants.chatTypePublic + } + return chatType + } + + property string profileImage: realChatType === Constants.chatTypeOneToOne ? appMain.getProfileImage(chatId) || "" : "" + + id: wrapper + height: 24 + width: childrenRect.width + Style.current.smallPadding + color: Style.current.transparent + border.color: Style.current.borderSecondary + border.width: 1 + radius: 11 + + Connections { + enabled: realChatType === Constants.chatTypeOneToOne + target: profileModel.contacts.list + onContactChanged: { + if (pubkey === wrapper.chatId) { + wrapper.profileImage = appMain.getProfileImage(wrapper.chatId) + } + } + } + + SVGImage { + id: channelIcon + width: 16 + height: 16 + fillMode: Image.PreserveAspectFit + source: "../../../../img/channel-icon-" + (wrapper.realChatType === Constants.chatTypePublic ? "public-chat.svg" : "group.svg") + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter:parent.verticalCenter + } + + StatusIdenticon { + id: contactImage + height: 16 + width: 16 + chatId: wrapper.chatId + chatName: wrapper.name + chatType: wrapper.realChatType + identicon: wrapper.profileImage || wrapper.identicon + anchors.left: channelIcon.right + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + letterSize: 11 + } + + StyledText { + id: contactInfo + text: wrapper.realChatType !== Constants.chatTypePublic ? + Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(wrapper.name))) : + "#" + Utils.filterXSS(wrapper.name) + anchors.left: contactImage.right + anchors.leftMargin: 4 + color: Style.current.secondaryText + font.weight: Font.Medium + font.pixelSize: 13 + anchors.verticalCenter: parent.verticalCenter + } + +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index d375d50a2b..b340135b2b 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -176,6 +176,10 @@ Item { } function clickMessage(isProfileClick, isSticker = false, isImage = false, image = null, emojiOnly = false, hideEmojiPicker = false) { + if (placeholderMessage) { + return + } + if (isImage) { imageClick(image); return; diff --git a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml index a2c5034832..07694d835a 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml @@ -64,73 +64,126 @@ Item { } } - StatusContextMenuButton { - id: moreActionsBtn - anchors.verticalCenter: parent.verticalCenter + Row { + height: parent.height anchors.right: parent.right anchors.rightMargin: Style.current.smallPadding + spacing: 12 - onClicked: { - var menu = chatContextMenu; - var isPrivateGroupChat = chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat - if(isPrivateGroupChat){ - menu = groupContextMenu + StatusContextMenuButton { + id: moreActionsBtn + anchors.verticalCenter: parent.verticalCenter + + onClicked: { + var menu = chatContextMenu; + var isPrivateGroupChat = chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat + if(isPrivateGroupChat){ + menu = groupContextMenu + } + + if (menu.opened) { + return menu.close() + } + + if (isPrivateGroupChat) { + menu.popup(moreActionsBtn.x, moreActionsBtn.height) + } else { + menu.openMenu(chatsModel.activeChannel, chatsModel.getActiveChannelIdx(), + moreActionsBtn.x - chatContextMenu.width + moreActionsBtn.width + 4, + moreActionsBtn.height - 4) + } } - if (menu.opened) { - return menu.close() + ChannelContextMenu { + id: chatContextMenu + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent } - if (isPrivateGroupChat) { - menu.popup(moreActionsBtn.x, moreActionsBtn.height) - } else { - menu.openMenu(chatsModel.activeChannel, chatsModel.getActiveChannelIdx(), - moreActionsBtn.x - chatContextMenu.width + moreActionsBtn.width + 4, - moreActionsBtn.height - 4) - } - } - - ChannelContextMenu { - id: chatContextMenu - closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent - } - - PopupMenu { - id: groupContextMenu - closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent - Action { - icon.source: "../../../img/group_chat.svg" - icon.width: chatTopBarContent.iconSize - icon.height: chatTopBarContent.iconSize - //% "Group Information" - text: qsTrId("group-information") - onTriggered: openPopup(groupInfoPopupComponent, {channel: chatsModel.activeChannel}) - } - Action { - icon.source: "../../../img/close.svg" - icon.width: chatTopBarContent.iconSize - icon.height: chatTopBarContent.iconSize - //% "Clear History" - text: qsTrId("clear-history") - onTriggered: chatsModel.clearChatHistory(chatsModel.activeChannel.id) - } - Action { - icon.source: "../../../img/leave_chat.svg" - icon.width: chatTopBarContent.iconSize - icon.height: chatTopBarContent.iconSize - //% "Leave group" - text: qsTrId("leave-group") - onTriggered: { - //% "Leave group" - deleteChatConfirmationDialog.title = qsTrId("leave-group") - //% "Leave group" - deleteChatConfirmationDialog.confirmButtonLabel = qsTrId("leave-group") - //% "Are you sure you want to leave this chat?" - deleteChatConfirmationDialog.confirmationText = qsTrId("are-you-sure-you-want-to-leave-this-chat-") - deleteChatConfirmationDialog.open() + PopupMenu { + id: groupContextMenu + closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent + Action { + icon.source: "../../../img/group_chat.svg" + icon.width: chatTopBarContent.iconSize + icon.height: chatTopBarContent.iconSize + //% "Group Information" + text: qsTrId("group-information") + onTriggered: openPopup(groupInfoPopupComponent, {channel: chatsModel.activeChannel}) + } + Action { + icon.source: "../../../img/close.svg" + icon.width: chatTopBarContent.iconSize + icon.height: chatTopBarContent.iconSize + //% "Clear History" + text: qsTrId("clear-history") + onTriggered: chatsModel.clearChatHistory(chatsModel.activeChannel.id) + } + Action { + icon.source: "../../../img/leave_chat.svg" + icon.width: chatTopBarContent.iconSize + icon.height: chatTopBarContent.iconSize + //% "Leave group" + text: qsTrId("leave-group") + onTriggered: { + //% "Leave group" + deleteChatConfirmationDialog.title = qsTrId("leave-group") + //% "Leave group" + deleteChatConfirmationDialog.confirmButtonLabel = qsTrId("leave-group") + //% "Are you sure you want to leave this chat?" + deleteChatConfirmationDialog.confirmationText = qsTrId("are-you-sure-you-want-to-leave-this-chat-") + deleteChatConfirmationDialog.open() + } } } } + + Rectangle { + id: separator + width: 1 + height: 24 + color: Style.current.separator + anchors.verticalCenter: parent.verticalCenter + } + + StatusIconButton { + id: activityCenterBtn + icon.name: "bell" + iconColor: Style.current.contextMenuButtonForegroundColor + hoveredIconColor: Style.current.contextMenuButtonForegroundColor + highlightedBackgroundColor: Style.current.contextMenuButtonBackgroundHoverColor + anchors.verticalCenter: parent.verticalCenter + + onClicked: activityCenter.open() + + Rectangle { + // TODO unhardcode this + property int nbUnseenNotifs: 3 + + id: badge + visible: nbUnseenNotifs > 0 + anchors.top: parent.top + anchors.topMargin: -2 + anchors.left: parent.right + anchors.leftMargin: -17 + radius: height / 2 + color: Style.current.blue + border.color: activityCenterBtn.hovered ? Style.current.secondaryBackground : Style.current.background + border.width: 2 + width: badge.nbUnseenNotifs < 10 ? 18 : badge.width + 14 + height: 18 + + Text { + font.pixelSize: 12 + color: Style.current.white + anchors.centerIn: parent + text: badge.nbUnseenNotifs + } + } + } + } + + ActivityCenter { + id: activityCenter } ConfirmationDialog { diff --git a/ui/app/AppLayouts/Profile/Sections/Contacts/ContactRequest.qml b/ui/app/AppLayouts/Chat/components/ContactRequest.qml similarity index 94% rename from ui/app/AppLayouts/Profile/Sections/Contacts/ContactRequest.qml rename to ui/app/AppLayouts/Chat/components/ContactRequest.qml index 5e72da7164..7b4603d1be 100644 --- a/ui/app/AppLayouts/Profile/Sections/Contacts/ContactRequest.qml +++ b/ui/app/AppLayouts/Chat/components/ContactRequest.qml @@ -1,9 +1,9 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 -import "../../../../../imports" -import "../../../../../shared" -import "../../../../../shared/status" +import "../../../../imports" +import "../../../../shared" +import "../../../../shared/status" Rectangle { property string name @@ -110,7 +110,7 @@ Rectangle { id: contactContextMenu hasArrow: false Action { - icon.source: "../../../../img/profileActive.svg" + icon.source: "../../../img/profileActive.svg" icon.width: menuButton.iconSize icon.height: menuButton.iconSize //% "View Profile" @@ -120,7 +120,7 @@ Rectangle { } Separator {} Action { - icon.source: "../../../../img/block-icon.svg" + icon.source: "../../../img/block-icon.svg" icon.width: menuButton.iconSize icon.height: menuButton.iconSize icon.color: Style.current.danger diff --git a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml index aef9daf251..3516e526fa 100644 --- a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml +++ b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml @@ -9,7 +9,7 @@ Rectangle { property int menuItemId: -1 property bool hovered: false property bool active: false - property url source: "../../../../img/add_watch_only.svg" + property url source: "../../../../img/eye.svg" property string text: "My Profile" property var onClicked: function () {} diff --git a/ui/app/AppLayouts/Wallet/components/AddAccount.qml b/ui/app/AppLayouts/Wallet/components/AddAccount.qml index 04256d09ca..e929b2f284 100644 --- a/ui/app/AppLayouts/Wallet/components/AddAccount.qml +++ b/ui/app/AppLayouts/Wallet/components/AddAccount.qml @@ -52,7 +52,7 @@ StatusRoundButton { Action { //% "Add a watch-only address" text: qsTrId("add-a-watch-account") - icon.source: "../../../img/add_watch_only.svg" + icon.source: "../../../img/eye.svg" icon.width: 19 icon.height: 19 onTriggered: { diff --git a/ui/app/img/double-check.svg b/ui/app/img/double-check.svg new file mode 100644 index 0000000000..d6b89f191c --- /dev/null +++ b/ui/app/img/double-check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/app/img/eye-barred.svg b/ui/app/img/eye-barred.svg new file mode 100644 index 0000000000..8983cda64f --- /dev/null +++ b/ui/app/img/eye-barred.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/app/img/add_watch_only.svg b/ui/app/img/eye.svg similarity index 100% rename from ui/app/img/add_watch_only.svg rename to ui/app/img/eye.svg diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 7d2b5e7438..577353490f 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -96,6 +96,9 @@ DISTFILES += \ app/AppLayouts/Browser/FavoritesBar.qml \ app/AppLayouts/Browser/FavoritesList.qml \ app/AppLayouts/Browser/components/BookmarkButton.qml \ + app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml \ + app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml \ + app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml \ app/AppLayouts/Chat/ChatColumn/ChatComponents/AddToContactBanner.qml \ app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \ app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \ @@ -160,6 +163,7 @@ DISTFILES += \ app/AppLayouts/Chat/components/CommunityDetailPopup.qml \ app/AppLayouts/Chat/components/ContactList.qml \ app/AppLayouts/Chat/components/ContactRequestsPopup.qml \ + app/AppLayouts/Chat/components/ContactRequest.qml \ app/AppLayouts/Chat/components/CreateCommunityPopup.qml \ app/AppLayouts/Chat/components/EmojiCategoryButton.qml \ app/AppLayouts/Chat/components/EmojiPopup.qml \ @@ -179,7 +183,6 @@ DISTFILES += \ app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \ app/AppLayouts/Chat/data/EmojiReactions.qml \ app/AppLayouts/Profile/Sections/AppearanceContainer.qml \ - app/AppLayouts/Profile/Sections/Contacts/ContactRequest.qml \ app/AppLayouts/Profile/Sections/NetworksModal.qml \ app/AppLayouts/Profile/Sections/BackupSeedModal.qml \ app/AppLayouts/Profile/Sections/BrowserContainer.qml \ diff --git a/ui/shared/status/StatusButton.qml b/ui/shared/status/StatusButton.qml index 3dc3c8ff7c..ac217b1730 100644 --- a/ui/shared/status/StatusButton.qml +++ b/ui/shared/status/StatusButton.qml @@ -131,7 +131,7 @@ Button { return hovered && forceBgColorOnHover ? control.bgHoverColor : "transparent" } if (type === "secondary") { - return hovered ? control.bgColor : "transparent" + return hovered || control.highlighted ? control.bgColor : "transparent" } return !enabled ? (control.bgColor === Style.current.transparent ? control.bgColor : Style.current.buttonDisabledBackgroundColor) : (hovered ? control.bgHoverColor : control.bgColor) diff --git a/ui/shared/status/StatusContextMenuButton.qml b/ui/shared/status/StatusContextMenuButton.qml index 790f93211c..846158826e 100644 --- a/ui/shared/status/StatusContextMenuButton.qml +++ b/ui/shared/status/StatusContextMenuButton.qml @@ -1,44 +1,12 @@ import QtQuick 2.13 -import QtQuick.Controls 2.13 -import QtQml 2.14 -import QtGraphicalEffects 1.13 import "../../imports" import "../../shared" -RoundButton { - id: control - implicitWidth: 32 - implicitHeight: 32 - contentItem: Item { - anchors.fill: parent - - SVGImage { - id: iconImg - source: "/../../app/img/dots-icon.svg" - width: 18 - height: 4 - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - fillMode: Image.PreserveAspectFit - } - - ColorOverlay { - id: iconColorOverlay - anchors.fill: iconImg - source: iconImg - color: Style.current.contextMenuButtonForegroundColor - antialiasing: true - } - } - background: Rectangle { - radius: Style.current.radius - color: hovered ? Style.current.contextMenuButtonBackgroundHoverColor : Style.current.transparent - } - - MouseArea { - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - anchors.fill: parent - onPressed: mouse.accepted = false - } +StatusIconButton { + id: moreActionsBtn + anchors.verticalCenter: parent.verticalCenter + icon.name: "dots-icon" + iconColor: Style.current.contextMenuButtonForegroundColor + hoveredIconColor: Style.current.contextMenuButtonForegroundColor + highlightedBackgroundColor: Style.current.contextMenuButtonBackgroundHoverColor } diff --git a/ui/shared/status/StatusIdenticon.qml b/ui/shared/status/StatusIdenticon.qml index 4b2b310e4f..cfb7c3bb67 100644 --- a/ui/shared/status/StatusIdenticon.qml +++ b/ui/shared/status/StatusIdenticon.qml @@ -10,6 +10,7 @@ Item { property string chatName property int chatType property string identicon + property int letterSize: 15 width: 40 height: 40 @@ -27,6 +28,7 @@ Item { chatName: root.chatName width: parent.width height: parent.height + letterSize: root.letterSize } } diff --git a/ui/shared/status/StatusToolTip.qml b/ui/shared/status/StatusToolTip.qml index 2ab8a510f8..5651bf1522 100644 --- a/ui/shared/status/StatusToolTip.qml +++ b/ui/shared/status/StatusToolTip.qml @@ -25,8 +25,8 @@ ToolTip { } Rectangle { color: tooltipContentBg.color - height: orientation === "top" || orientation === "bottom" ? 24 : 24 - width: orientation === "top" || orientation === "bottom" ? 24 : 24 + height: 26 + width: 26 rotation: 45 radius: 1 x: { @@ -34,18 +34,18 @@ ToolTip { return tooltipBg.width / 2 - width / 2 } if (orientation === "left") { - return tooltipContentBg.width - (width / 2) - 4 + return tooltipContentBg.width - (width / 2) - 7 } if (orientation === "right") { - return -width/2 + 4 + return -width/2 + 7 } } y: { if (orientation === "bottom") { - return -height / 2 + return -height / 2 + 5 } if (orientation === "top") { - return tooltipBg.height - height + return tooltipBg.height - height - 5 } if (orientation === "left" || orientation === "right") { return tooltipContentBg.height / 2 - (height / 2)