mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-17 09:08:49 +00:00
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
Iuri Matias
parent
64f895e17a
commit
f5bcaa5ac5
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
143
ui/app/AppLayouts/Chat/components/ChannelContextMenu.qml
Normal 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)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user