status-desktop/ui/shared/PopupMenu.qml

110 lines
3.4 KiB
QML
Raw Normal View History

import QtQuick 2.12
2020-05-27 20:59:39 +00:00
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12
import "../imports"
Menu {
property alias arrowX: bgPopupMenuTopArrow.x
2020-05-28 01:42:22 +00:00
closePolicy: Popup.CloseOnPressOutsideParent
id: popupMenu
topPadding: 16
bottomPadding: 16
delegate: MenuItem {
id: popupMenuItem
implicitWidth: 200
implicitHeight: 40
font.pixelSize: 15
icon.color: popupMenuItem.highlighted ? Theme.white : Theme.blue
contentItem: Item {
Item {
id: menuIcon
anchors.left: parent.left
2020-05-28 02:26:01 +00:00
anchors.top: parent.top
anchors.leftMargin: 12
2020-05-28 02:26:01 +00:00
anchors.topMargin: 4
Image {
2020-05-27 20:59:39 +00:00
fillMode: Image.Pad
id: popupMenuItemIcon
source: popupMenuItem.icon.source
visible: false
}
ColorOverlay {
anchors.fill: popupMenuItemIcon
anchors.verticalCenter: parent.verticalCenter
source: popupMenuItemIcon
color: popupMenuItem.highlighted ? Theme.white : Theme.blue
}
}
Text {
anchors.left: menuIcon.right
anchors.leftMargin: 32
2020-05-28 02:26:01 +00:00
topPadding: 4
text: popupMenuItem.text
font: popupMenuItem.font
color: popupMenuItem.highlighted ? Theme.white : Theme.black
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
background: Rectangle {
implicitWidth: 220
implicitHeight: 40
color: popupMenuItem.highlighted ? Theme.blue : "transparent"
}
}
background: Rectangle {
id: bgPopupMenu
implicitWidth: 220
color: "transparent"
Rectangle {
id: bgPopupMenuTopArrow
color: Theme.white2
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
color: Theme.white2
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"
}
}
}
}