feat: add submenu to popup menu
This commit is contained in:
Jonathan Rainville
Pascal Precht
parent
32b0e185db
commit
d5e9f086f2
|
|
@ -54,6 +54,18 @@ ScrollView {
|
|||
|
||||
id: channelContextMenu
|
||||
width: 175
|
||||
subMenuIcons: [
|
||||
{
|
||||
source: Qt.resolvedUrl("../../../img/bell.svg"),
|
||||
width: 13,
|
||||
height: 13
|
||||
},
|
||||
{
|
||||
source: Qt.resolvedUrl("../../../img/fetch.svg"),
|
||||
width: 13,
|
||||
height: 13
|
||||
}
|
||||
]
|
||||
|
||||
function openMenu(channelIndex) {
|
||||
channelContextMenu.channelIndex = channelIndex
|
||||
|
|
@ -67,12 +79,19 @@ ScrollView {
|
|||
icon.height: 13
|
||||
onTriggered: console.log('TODO View group')
|
||||
}
|
||||
Action {
|
||||
text: qsTr("Mute Chat")
|
||||
icon.source: "../../../img/bell.svg"
|
||||
icon.width: 13
|
||||
icon.height: 13
|
||||
onTriggered: console.log('TODO Mute')
|
||||
|
||||
Separator {}
|
||||
|
||||
PopupMenu {
|
||||
hasArrow: false
|
||||
title: qsTr("Mute Chat")
|
||||
|
||||
// TODO implement mute chat in Model and call it here
|
||||
Action { text: qsTr("15 minutes"); icon.width: 0; }
|
||||
Action { text: qsTr("1 hour"); icon.width: 0; }
|
||||
Action { text: qsTr("8 hours"); icon.width: 0; }
|
||||
Action { text: qsTr("24 hours"); icon.width: 0; }
|
||||
Action { text: qsTr("Until I turn it back on"); icon.width: 0; }
|
||||
}
|
||||
Action {
|
||||
text: qsTr("Mark as Read")
|
||||
|
|
@ -83,14 +102,15 @@ ScrollView {
|
|||
chatsModel.markAllChannelMessagesReadByIndex(channelContextMenu.channelIndex)
|
||||
}
|
||||
}
|
||||
Action {
|
||||
text: qsTr("Fetch Messages")
|
||||
icon.source: "../../../img/fetch.svg"
|
||||
icon.width: 13
|
||||
icon.height: 13
|
||||
onTriggered: {
|
||||
chatsModel.loadMoreMessagesWithIndex(channelContextMenu.channelIndex)
|
||||
}
|
||||
PopupMenu {
|
||||
hasArrow: false
|
||||
title: qsTr("Fetch Messages")
|
||||
|
||||
// TODO call fetch for the wanted duration
|
||||
Action { text: qsTr("Last 24 hours"); icon.width: 0; }
|
||||
Action { text: qsTr("Last 2 days"); icon.width: 0; }
|
||||
Action { text: qsTr("Last 3 days"); icon.width: 0; }
|
||||
Action { text: qsTr("Last 7 days"); icon.width: 0; }
|
||||
}
|
||||
Action {
|
||||
text: qsTr("Clear History")
|
||||
|
|
@ -99,6 +119,9 @@ ScrollView {
|
|||
icon.height: 13
|
||||
onTriggered: chatsModel.clearChatHistoryByIndex(channelContextMenu.channelIndex)
|
||||
}
|
||||
|
||||
Separator {}
|
||||
|
||||
Action {
|
||||
text: qsTr("Leave Group")
|
||||
icon.source: "../../../img/leave_chat.svg"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import "../imports"
|
|||
import "../shared"
|
||||
|
||||
Menu {
|
||||
// This is to add icons to submenu items. QML doesn't have a way to add icons to those sadly so this is a workaround
|
||||
property var subMenuIcons: []
|
||||
property alias arrowX: bgPopupMenuTopArrow.x
|
||||
property int paddingSize: 8
|
||||
property bool hasArrow: true
|
||||
|
|
@ -14,48 +16,89 @@ Menu {
|
|||
bottomPadding: paddingSize
|
||||
|
||||
delegate: MenuItem {
|
||||
property color textColor: (this.action.icon.color != "#00000000" ? this.action.icon.color : Style.current.textColor)
|
||||
property int subMenuIndex: {
|
||||
if (!this.subMenu) {
|
||||
return -1
|
||||
}
|
||||
|
||||
let child;
|
||||
let index = 0;
|
||||
for (let i = 0; i < popupMenu.count; i++) {
|
||||
child = popupMenu.itemAt(i)
|
||||
if (child.subMenu) {
|
||||
if (child === this) {
|
||||
return index
|
||||
} else {
|
||||
index++;
|
||||
}
|
||||
}
|
||||
}
|
||||
return index
|
||||
}
|
||||
|
||||
action: Action{} // Meant to be overwritten
|
||||
id: popupMenuItem
|
||||
implicitWidth: 200
|
||||
implicitHeight: 34
|
||||
font.pixelSize: 13
|
||||
icon.color: popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.blue
|
||||
icon.source: this.subMenu ? subMenuIcons[subMenuIndex].source : popupMenuItem.action.icon.source
|
||||
icon.width: this.subMenu ? subMenuIcons[subMenuIndex].width : popupMenuItem.action.icon.width
|
||||
icon.height: this.subMenu ? subMenuIcons[subMenuIndex].height : popupMenuItem.action.icon.height
|
||||
visible: popupMenuItem.action.enabled
|
||||
height: popupMenuItem.action.enabled ? popupMenuItem.implicitHeight : 0
|
||||
contentItem: Item {
|
||||
id: menuItemContent
|
||||
|
||||
SVGImage {
|
||||
id: menuIcon
|
||||
source: popupMenuItem.icon.source
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: false
|
||||
width: popupMenuItem.action.icon.width ? popupMenuItem.action.icon.width : 25
|
||||
height: popupMenuItem.action.icon.height ? popupMenuItem.action.icon.height : 25
|
||||
arrow: SVGImage {
|
||||
source: "../app/img/caret.svg"
|
||||
rotation: -90
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
width: 9
|
||||
fillMode: Image.PreserveAspectFit
|
||||
visible: popupMenuItem.subMenu
|
||||
|
||||
ColorOverlay {
|
||||
anchors.fill: parent
|
||||
source: parent
|
||||
color: popupMenuItem.highlighted ? Style.current.white : popupMenuItem.textColor
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME the icons looks very pixelated on Linux for some reason. Using smooth, mipmap, etc doesn't fix it
|
||||
indicator: SVGImage {
|
||||
id: menuIcon
|
||||
source: popupMenuItem.icon.source
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: !!popupMenuItem.icon.source.toString()
|
||||
width: !isNaN(popupMenuItem.icon.width) ? popupMenuItem.icon.width : 25
|
||||
height: !isNaN(popupMenuItem.icon.height) ? popupMenuItem.icon.height : 25
|
||||
|
||||
ColorOverlay {
|
||||
cached: true
|
||||
anchors.fill: menuIcon
|
||||
source: menuIcon
|
||||
color: popupMenuItem.highlighted ? Style.current.white : popupMenuItem.action.icon.color
|
||||
}
|
||||
|
||||
StyledText {
|
||||
anchors.left: menuIcon.right
|
||||
anchors.leftMargin: popupMenu.paddingSize
|
||||
text: popupMenuItem.text
|
||||
anchors.verticalCenter: menuIcon.verticalCenter
|
||||
font: popupMenuItem.font
|
||||
anchors.fill: parent
|
||||
source: parent
|
||||
color: popupMenuItem.highlighted ?
|
||||
Style.current.white :
|
||||
(popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.textColor)
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
(popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.blue)
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: StyledText {
|
||||
anchors.left: popupMenuItem.indicator.right
|
||||
anchors.leftMargin: popupMenu.paddingSize
|
||||
text: popupMenuItem.text
|
||||
font: popupMenuItem.font
|
||||
color: popupMenuItem.highlighted ? Style.current.white : popupMenuItem.textColor
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
opacity: enabled ? 1.0 : 0.3
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
implicitWidth: 220
|
||||
implicitHeight: 24
|
||||
|
|
@ -63,10 +106,9 @@ Menu {
|
|||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
background: Item {
|
||||
id: bgPopupMenu
|
||||
implicitWidth: 220
|
||||
color: "transparent"
|
||||
Rectangle {
|
||||
id: bgPopupMenuTopArrow
|
||||
visible: popupMenu.hasArrow
|
||||
|
|
|
|||
Loading…
Reference in New Issue