171 lines
5.3 KiB
QML
171 lines
5.3 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Layouts 1.15
|
|
import QtGraphicalEffects 1.15
|
|
|
|
import StatusQ.Core.Theme 0.1
|
|
|
|
import utils 1.0
|
|
import "../"
|
|
import "../panels"
|
|
|
|
Popup {
|
|
property string title
|
|
property bool noTopMargin: false
|
|
property bool displayCloseButton: true
|
|
default property alias content: popupContent.children
|
|
property alias contentWrapper: popupContent
|
|
property alias header: headerContent.children
|
|
property bool destroyOnClose: false
|
|
|
|
id: popup
|
|
modal: true
|
|
property alias footer: footerContent.children
|
|
|
|
Overlay.modal: Rectangle {
|
|
color: Qt.rgba(0, 0, 0, 0.4)
|
|
}
|
|
closePolicy: displayCloseButton? Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
|
: Popup.NoAutoClose
|
|
parent: Overlay.overlay
|
|
x: Math.round(((parent ? parent.width : 0) - width) / 2)
|
|
y: Math.round(((parent ? parent.height : 0) - height) / 2)
|
|
width: 480
|
|
height: 510 // TODO find a way to make this dynamic
|
|
background: Rectangle {
|
|
color: Theme.palette.background
|
|
radius: 8
|
|
}
|
|
onClosed: {
|
|
if (popup.destroyOnClose)
|
|
popup.destroy();
|
|
}
|
|
padding: 0
|
|
contentItem: Item {
|
|
|
|
Item {
|
|
id: headerContent
|
|
objectName: "headerContent"
|
|
height: {
|
|
const count = children.length
|
|
let h = 0
|
|
for (let i = 0; i < count; i++) {
|
|
h += children[i] ? children[i].height : 0
|
|
}
|
|
return h
|
|
}
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
|
|
anchors.topMargin: popup.noTopMargin ? 0 : Theme.padding
|
|
anchors.bottomMargin: Theme.padding
|
|
anchors.rightMargin: Theme.padding
|
|
anchors.leftMargin: Theme.padding
|
|
|
|
StyledText {
|
|
text: title
|
|
objectName: "titleText"
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 44
|
|
font.bold: true
|
|
font.pixelSize: 17
|
|
height: visible ? 24 : 0
|
|
elide: Text.ElideRight
|
|
visible: !!title
|
|
verticalAlignment: Text.AlignVCenter
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: closeButton
|
|
objectName: "modalCloseButtonRectangle"
|
|
property bool hovered: false
|
|
visible: displayCloseButton
|
|
height: 32
|
|
width: 32
|
|
anchors.top: parent.top
|
|
anchors.topMargin: 12
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 12
|
|
radius: 8
|
|
color: hovered ? Theme.palette.backgroundHover : Theme.palette.transparent
|
|
|
|
SVGImage {
|
|
id: closeModalImg
|
|
objectName: "closeImage"
|
|
source: "../img/close.svg"
|
|
width: 11
|
|
height: 11
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
ColorOverlay {
|
|
anchors.fill: closeModalImg
|
|
source: closeModalImg
|
|
color: Theme.palette.textColor
|
|
}
|
|
|
|
MouseArea {
|
|
id: closeModalMouseArea
|
|
objectName: "closeSensor"
|
|
cursorShape: Qt.PointingHandCursor
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onExited: {
|
|
closeButton.hovered = false
|
|
}
|
|
onEntered: {
|
|
closeButton.hovered = true
|
|
}
|
|
onClicked: {
|
|
popup.close()
|
|
}
|
|
}
|
|
}
|
|
|
|
Separator {
|
|
id: separator
|
|
anchors.top: headerContent.bottom
|
|
anchors.topMargin: visible ? Theme.padding : 0
|
|
visible: title.length > 0
|
|
}
|
|
|
|
Item {
|
|
id: popupContent
|
|
objectName: "contentParent"
|
|
anchors.top: separator.bottom
|
|
anchors.topMargin: Theme.padding
|
|
anchors.bottom: separator2.top
|
|
anchors.bottomMargin: Theme.padding
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Theme.padding
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: Theme.padding
|
|
}
|
|
|
|
Separator {
|
|
id: separator2
|
|
visible: footerContent.visible && footerContent.height > 0
|
|
anchors.bottom: footerContent.top
|
|
anchors.bottomMargin: visible ? Theme.padding : 0
|
|
}
|
|
|
|
Item {
|
|
id: footerContent
|
|
objectName: "footerParent"
|
|
visible: children.length > 0
|
|
height: visible ? children[0] && children[0].height : 0
|
|
width: parent.width
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: visible ? Theme.padding : 0
|
|
anchors.rightMargin: visible ? Theme.padding : 0
|
|
anchors.leftMargin: visible ? Theme.padding : 0
|
|
}
|
|
}
|
|
}
|