2020-06-17 19:31:01 +00:00
|
|
|
import QtQuick 2.13
|
|
|
|
import QtQuick.Controls 2.13
|
|
|
|
import QtGraphicalEffects 1.13
|
2020-05-27 21:09:12 +00:00
|
|
|
import "../imports"
|
2020-06-25 13:23:17 +00:00
|
|
|
import "../shared"
|
2020-05-27 20:42:24 +00:00
|
|
|
|
|
|
|
Menu {
|
2020-08-04 21:09:24 +00:00
|
|
|
// 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: []
|
2020-05-27 20:42:24 +00:00
|
|
|
property alias arrowX: bgPopupMenuTopArrow.x
|
2020-07-09 18:26:50 +00:00
|
|
|
property int paddingSize: 8
|
2020-07-24 11:27:26 +00:00
|
|
|
property bool hasArrow: true
|
2020-07-09 17:47:36 +00:00
|
|
|
closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnReleaseOutside | Popup.CloseOnEscape
|
2020-05-27 20:42:24 +00:00
|
|
|
id: popupMenu
|
2020-07-09 18:26:50 +00:00
|
|
|
topPadding: bgPopupMenuTopArrow.height + paddingSize
|
|
|
|
bottomPadding: paddingSize
|
|
|
|
|
2020-05-27 20:42:24 +00:00
|
|
|
delegate: MenuItem {
|
2020-08-04 21:09:24 +00:00
|
|
|
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
|
2020-05-27 20:42:24 +00:00
|
|
|
id: popupMenuItem
|
|
|
|
implicitWidth: 200
|
2020-07-09 18:26:50 +00:00
|
|
|
implicitHeight: 34
|
|
|
|
font.pixelSize: 13
|
2020-07-02 15:14:31 +00:00
|
|
|
icon.color: popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.blue
|
2020-08-04 21:09:24 +00:00
|
|
|
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
|
2020-07-24 11:27:26 +00:00
|
|
|
visible: popupMenuItem.action.enabled
|
|
|
|
height: popupMenuItem.action.enabled ? popupMenuItem.implicitHeight : 0
|
2020-07-09 18:26:50 +00:00
|
|
|
|
2020-08-04 21:09:24 +00:00
|
|
|
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
|
2020-07-09 18:26:50 +00:00
|
|
|
}
|
2020-08-04 21:09:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// 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
|
2020-05-27 20:42:24 +00:00
|
|
|
|
2020-07-09 18:26:50 +00:00
|
|
|
ColorOverlay {
|
|
|
|
cached: true
|
2020-08-04 21:09:24 +00:00
|
|
|
anchors.fill: parent
|
|
|
|
source: parent
|
2020-07-09 18:26:50 +00:00
|
|
|
color: popupMenuItem.highlighted ?
|
|
|
|
Style.current.white :
|
2020-08-04 21:09:24 +00:00
|
|
|
(popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.blue)
|
2020-05-27 20:42:24 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-04 21:09:24 +00:00
|
|
|
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
|
|
|
|
}
|
|
|
|
|
2020-05-27 20:42:24 +00:00
|
|
|
background: Rectangle {
|
|
|
|
implicitWidth: 220
|
2020-07-09 18:26:50 +00:00
|
|
|
implicitHeight: 24
|
2020-06-12 14:01:46 +00:00
|
|
|
color: popupMenuItem.highlighted ? popupMenuItem.icon.color : "transparent"
|
2020-05-27 20:42:24 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-04 21:09:24 +00:00
|
|
|
background: Item {
|
2020-05-27 20:42:24 +00:00
|
|
|
id: bgPopupMenu
|
|
|
|
implicitWidth: 220
|
|
|
|
Rectangle {
|
|
|
|
id: bgPopupMenuTopArrow
|
2020-07-24 11:27:26 +00:00
|
|
|
visible: popupMenu.hasArrow
|
2020-07-13 18:45:54 +00:00
|
|
|
color: Style.current.modalBackground
|
2020-05-27 20:42:24 +00:00
|
|
|
height: 14
|
|
|
|
width: 14
|
|
|
|
rotation: 135
|
|
|
|
x: bgPopupMenu.width / 2 - width / 2
|
|
|
|
layer.enabled: true
|
|
|
|
layer.effect: DropShadow{
|
|
|
|
width: bgPopupMenuTopArrow.width
|
|
|
|
height: bgPopupMenuTopArrow.height
|
|
|
|
x: bgPopupMenuTopArrow.x
|
|
|
|
y: bgPopupMenuTopArrow.y + 10
|
|
|
|
visible: bgPopupMenuTopArrow.visible
|
|
|
|
source: bgPopupMenuTopArrow
|
|
|
|
horizontalOffset: 0
|
|
|
|
verticalOffset: 5
|
|
|
|
radius: 10
|
|
|
|
samples: 15
|
|
|
|
color: "#22000000"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Rectangle {
|
|
|
|
id: bgPopupMenuContent
|
|
|
|
y: 7
|
|
|
|
implicitWidth: bgPopupMenu.width
|
|
|
|
implicitHeight: bgPopupMenu.height
|
2020-07-13 18:45:54 +00:00
|
|
|
color: Style.current.modalBackground
|
2020-05-27 20:42:24 +00:00
|
|
|
radius: 16
|
|
|
|
layer.enabled: true
|
|
|
|
layer.effect: DropShadow{
|
|
|
|
width: bgPopupMenuContent.width
|
|
|
|
height: bgPopupMenuContent.height
|
|
|
|
x: bgPopupMenuContent.x
|
|
|
|
y: bgPopupMenuContent.y + 10
|
|
|
|
visible: bgPopupMenuContent.visible
|
|
|
|
source: bgPopupMenuContent
|
|
|
|
horizontalOffset: 0
|
|
|
|
verticalOffset: 7
|
|
|
|
radius: 10
|
|
|
|
samples: 15
|
|
|
|
color: "#22000000"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-06-04 14:53:10 +00:00
|
|
|
|
|
|
|
/*##^##
|
|
|
|
Designer {
|
|
|
|
D{i:0;autoSize:true;height:480;width:640}
|
|
|
|
}
|
|
|
|
##^##*/
|