status-desktop/ui/shared/ModalPopup.qml

112 lines
2.8 KiB
QML
Raw Normal View History

2020-05-29 16:27:50 +00:00
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import "../imports"
import "./"
2020-05-29 18:38:11 +00:00
Popup {
property string title: "Default Title"
2020-05-29 16:27:50 +00:00
default property alias content : popupContent.children
2020-05-29 18:38:11 +00:00
id: popup
modal: true
2020-05-29 16:27:50 +00:00
property alias footer : footerContent.children
2020-05-29 18:38:11 +00:00
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
}
2020-05-29 16:27:50 +00:00
2020-05-29 18:38:11 +00:00
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
2020-05-29 16:27:50 +00:00
2020-05-29 18:38:11 +00:00
Image {
id: closeModalImg
2020-06-03 20:33:36 +00:00
source: "./img/close.svg"
2020-05-29 18:38:11 +00:00
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
2020-05-29 16:27:50 +00:00
2020-05-29 18:38:11 +00:00
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
}
2020-05-29 16:27:50 +00:00
2020-05-29 18:38:11 +00:00
Item {
id: popupContent
anchors.top: separator.bottom
2020-06-04 14:53:10 +00:00
anchors.topMargin: Theme.padding
2020-05-29 18:38:11 +00:00
anchors.bottom: separator2.top
2020-06-04 14:53:10 +00:00
anchors.bottomMargin: Theme.padding
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.right: parent.right
anchors.rightMargin: Theme.padding
2020-05-29 18:38:11 +00:00
}
2020-05-29 16:27:50 +00:00
2020-05-29 18:38:11 +00:00
Separator {
id: separator2
2020-05-29 16:27:50 +00:00
anchors.bottom: parent.bottom
2020-05-29 18:38:11 +00:00
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
}
2020-05-29 16:27:50 +00:00
}
}
2020-05-29 18:38:11 +00:00