status-desktop/ui/shared/ModalPopup.qml

112 lines
2.8 KiB
QML

import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import "../imports"
import "./"
Popup {
property string title: "Default Title"
default property alias content : popupContent.children
id: popup
modal: true
property alias footer : footerContent.children
Overlay.modal: Rectangle {
color: "#60000000"
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
parent: Overlay.overlay
x: Math.round((parent.width - width) / 2)
y: Math.round((parent.height - height) / 2)
width: 480
height: 509
background: Rectangle {
color: Theme.white
radius: 8
}
padding: 0
contentItem: Item {
Text {
id: modalDialogTitle
text: title
anchors.top: parent.top
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.leftMargin: 16
anchors.topMargin: 16
}
Rectangle {
id: closeButton
height: 32
width: 32
anchors.top: parent.top
anchors.topMargin: Theme.padding
anchors.rightMargin: Theme.padding
anchors.right: parent.right
radius: 8
Image {
id: closeModalImg
source: "./img/close.svg"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
id: closeModalMouseArea
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onExited: {
closeButton.color = Theme.white
}
onEntered:{
closeButton.color = Theme.grey
}
onClicked : {
popup.close()
}
}
}
Separator {
id: separator
anchors.top: modalDialogTitle.bottom
}
Item {
id: popupContent
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
anchors.bottom: parent.bottom
anchors.bottomMargin: 75
}
Item {
id: footerContent
width: parent.width
anchors.top: separator2.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.padding
anchors.rightMargin: Theme.padding
anchors.leftMargin: Theme.padding
}
}
}