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

refactor: introduce ChannelContextMenu component 

This commit introduces a new `ChannelContextMenu` component that can be reused
in different places, such as the channel list, as well as the chat bar.

At the moment we use two different pop up menus that also show two different
set of menu options. By using `ChanelContextMenu` in both of these places,
we get the same menu and same experience.

Closes #1711
This commit is contained in:
Pascal Precht 2021-01-21 15:39:27 +01:00 committed by Iuri Matias
parent 64f895e17a
commit f5bcaa5ac5
4 changed files with 160 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
View File

@ -95,7 +95,8 @@ Rectangle {
onClicked: {
var menu = chatContextMenu;
if(chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat){
var isPrivateGroupChat = chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat
if(isPrivateGroupChat){
menu = groupContextMenu
}
@ -103,48 +104,19 @@ Rectangle {
return menu.close()
}
menu.popup(moreActionsBtn.x, moreActionsBtn.height)
if (isPrivateGroupChat) {
menu.popup(moreActionsBtn.x, moreActionsBtn.height)
} else {
menu.openMenu(chatsModel.activeChannel)
}
}
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
PopupMenu {
ChannelContextMenu {
id: chatContextMenu
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
subMenuIcons: [
{
source: Qt.resolvedUrl("../../../img/fetch.svg"),
width: 16,
height: 16
}
]
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)
}
FetchMoreMessages {}
Action {
icon.source: "../../../img/delete.svg"
icon.width: chatTopBarContent.iconSize
icon.height: chatTopBarContent.iconSize
icon.color: Style.current.red
//% "Delete Chat"
text: qsTrId("delete-chat")
onTriggered: {
//% "Delete Chat"
deleteChatConfirmationDialog.title = qsTrId("delete-chat")
//% "Delete Chat"
deleteChatConfirmationDialog.confirmButtonLabel = qsTrId("delete-chat")
//% "Are you sure you want to delete this chat?"
deleteChatConfirmationDialog.confirmationText = qsTrId("delete-chat-confirmation")
deleteChatConfirmationDialog.open()
}
}
groupInfoPopup: groupInfoPopup
}
PopupMenu {

8
ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
View File

@ -165,12 +165,12 @@ Rectangle {
wrapper.hovered = false
}
onClicked: {
if (mouse.button & Qt.RightButton) {
channelContextMenu.openMenu(index, muted, chatType, name, chatId, identicon)
return;
}
chatsModel.setActiveChannelByIndex(index)
chatGroupsListView.currentIndex = index
if (mouse.button & Qt.RightButton) {
channelContextMenu.openMenu(chatsModel.activeChannel, index)
return;
}
}
}

130
ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml
View File

@ -83,134 +83,10 @@ Rectangle {
}
}
PopupMenu {
property int channelIndex
property bool channelMuted
property int chatType
property string chatName
property string chatId
property string chatIdenticon
ChannelContextMenu {
id: channelContextMenu
width: 175
subMenuIcons: [
/* { */
/* source: Qt.resolvedUrl("../../../img/bell.svg"), */
/* width: 16, */
/* height: 16 */
/* }, */
{
source: Qt.resolvedUrl("../../../img/fetch.svg"),
width: 16,
height: 16
}
]
function openMenu(channelIndex, muted, chatType, chatName, chatId, chatIdenticon) {
channelContextMenu.channelIndex = channelIndex
channelContextMenu.channelMuted = muted
channelContextMenu.chatType = chatType
channelContextMenu.chatName = chatName
channelContextMenu.chatId = chatId
channelContextMenu.chatIdenticon = chatIdenticon
channelContextMenu.popup()
}
Action {
enabled: channelContextMenu.chatType !== Constants.chatTypePublic
text: {
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
//% "View Profile"
return qsTrId("view-profile")
}
if (channelContextMenu.chatType === Constants.chatTypePrivateGroupChat) {
//% "View Group"
return qsTrId("view-group")
}
//% "Share Chat"
return qsTrId("share-chat")
}
icon.source: "../../../img/group.svg"
icon.width: 16
icon.height: 16
onTriggered: {
chatsModel.setActiveChannelByIndex(channelContextMenu.channelIndex)
chatGroupsListView.currentIndex = channelContextMenu.channelIndex
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
const userProfileImage = appMain.getProfileImage(channelContextMenu.chatId)
return openProfilePopup(channelContextMenu.chatName, channelContextMenu.chatId, userProfileImage || channelContextMenu.chatIdenticon)
}
if (channelContextMenu.chatType === Constants.chatTypePrivateGroupChat) {
return groupInfoPopup.open()
}
}
}
Separator {}
Action {
text: channelContextMenu.channelMuted ?
//% "Unmute chat"
qsTrId("unmute-chat") :
//% "Mute chat"
qsTrId("mute-chat")
icon.source: "../../../img/bell.svg"
icon.width: 16
icon.height: 16
onTriggered: {
if (chatsModel.channelIsMuted(channelContextMenu.channelIndex)) {
chatsModel.unmuteChannel(channelContextMenu.channelIndex)
return
}
chatsModel.muteChannel(channelContextMenu.channelIndex)
}
}
Action {
//% "Mark as Read"
text: qsTrId("mark-as-read")
icon.source: "../../../img/check-circle.svg"
icon.width: 16
icon.height: 16
onTriggered: {
chatsModel.markAllChannelMessagesReadByIndex(channelContextMenu.channelIndex)
}
}
FetchMoreMessages {}
Action {
//% "Clear History"
text: qsTrId("clear-history")
icon.source: "../../../img/close.svg"
icon.width: 16
icon.height: 16
onTriggered: chatsModel.clearChatHistoryByIndex(channelContextMenu.channelIndex)
}
Separator {}
Action {
text: {
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
//% "Delete chat"
return qsTrId("delete-chat")
}
if (channelContextMenu.chatType === Constants.chatTypePrivateGroupChat) {
//% "Leave group"
return qsTrId("leave-group")
}
//% "Leave chat"
return qsTrId("leave-chat")
}
icon.source: {
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
return "../../../img/delete.svg"
}
return "../../../img/leave_chat.svg"
}
icon.width: 16
icon.height: 16
onTriggered: chatsModel.leaveChatByIndex(channelContextMenu.channelIndex)
}
groupInfoPopup: groupInfoPopup
groupsListView: chatGroupsListView
}
Connections {

143
ui/app/AppLayouts/Chat/components/ChannelContextMenu.qml Normal file
View File

@ -0,0 +1,143 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "./"
import "../../../../shared"
import "../../../../imports"
PopupMenu {
property int channelIndex
property bool channelMuted
property int chatType
property string chatName
property string chatId
property string chatIdenticon
property var groupInfoPopup
property var groupsListView
id: channelContextMenu
width: 175
subMenuIcons: [
/* { */
/* source: Qt.resolvedUrl("../../../img/bell.svg"), */
/* width: 16, */
/* height: 16 */
/* }, */
{
source: Qt.resolvedUrl("../../../img/fetch.svg"),
width: 16,
height: 16
}
]
function openMenu(channel, index) {
channelContextMenu.channelMuted = channel.muted
channelContextMenu.chatType = channel.chatType
channelContextMenu.chatName = channel.name
channelContextMenu.chatId = channel.id
channelContextMenu.chatIdenticon = channel.identicon
if (index !== undefined) {
channelContextMenu.channelIndex = index
}
channelContextMenu.popup()
}
Action {
enabled: channelContextMenu.chatType !== Constants.chatTypePublic
text: {
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
//% "View Profile"
return qsTrId("view-profile")
}
if (channelContextMenu.chatType === Constants.chatTypePrivateGroupChat) {
//% "View Group"
return qsTrId("view-group")
}
//% "Share Chat"
return qsTrId("share-chat")
}
icon.source: "../../../img/group.svg"
icon.width: 16
icon.height: 16
onTriggered: {
//chatsModel.setActiveChannelByIndex(channelContextMenu.channelIndex)
if (!!groupsListView) {
groupsListView.currentIndex = channelContextMenu.channelIndex
}
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
const userProfileImage = appMain.getProfileImage(channelContextMenu.chatId)
return openProfilePopup(channelContextMenu.chatName, channelContextMenu.chatId, userProfileImage || channelContextMenu.chatIdenticon)
}
if (channelContextMenu.chatType === Constants.chatTypePrivateGroupChat) {
return groupInfoPopup.open()
}
}
}
Separator {}
Action {
text: channelContextMenu.channelMuted ?
//% "Unmute chat"
qsTrId("unmute-chat") :
//% "Mute chat"
qsTrId("mute-chat")
icon.source: "../../../img/bell.svg"
icon.width: 16
icon.height: 16
onTriggered: {
if (chatsModel.channelIsMuted(channelContextMenu.channelIndex)) {
chatsModel.unmuteChannel(channelContextMenu.channelIndex)
return
}
chatsModel.muteChannel(channelContextMenu.channelIndex)
}
}
Action {
//% "Mark as Read"
text: qsTrId("mark-as-read")
icon.source: "../../../img/check-circle.svg"
icon.width: 16
icon.height: 16
onTriggered: {
chatsModel.markAllChannelMessagesReadByIndex(channelContextMenu.channelIndex)
}
}
FetchMoreMessages {}
Action {
//% "Clear History"
text: qsTrId("clear-history")
icon.source: "../../../img/close.svg"
icon.width: 16
icon.height: 16
onTriggered: chatsModel.clearChatHistoryByIndex(channelContextMenu.channelIndex)
}
Separator {}
Action {
text: {
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
//% "Delete chat"
return qsTrId("delete-chat")
}
if (channelContextMenu.chatType === Constants.chatTypePrivateGroupChat) {
//% "Leave group"
return qsTrId("leave-group")
}
//% "Leave chat"
return qsTrId("leave-chat")
}
icon.source: {
if (channelContextMenu.chatType === Constants.chatTypeOneToOne) {
return "../../../img/delete.svg"
}
return "../../../img/leave_chat.svg"
}
icon.width: 16
icon.height: 16
onTriggered: chatsModel.leaveChatByIndex(channelContextMenu.channelIndex)
}
}