status-desktop/ui/shared/ModalPopup.qml

131 lines
3.7 KiB
QML

import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import "../imports"
import "./"
Popup {
property string title
default property alias content: popupContent.children
property alias header: headerContent.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: 510 // TODO find a way to make this dynamic
background: Rectangle {
color: Theme.white
radius: 8
}
padding: 0
contentItem: Item {
Item {
id: headerContent
width: parent.width
height: {
var idx = !!title ? 0 : 1
return children[idx] && children[idx].height + Theme.padding
}
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottomMargin: Theme.padding
anchors.rightMargin: Theme.padding
anchors.leftMargin: Theme.padding
Text {
text: title
anchors.top: parent.top
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.leftMargin: 16
anchors.topMargin: Theme.padding
anchors.bottomMargin: Theme.padding
visible: !!title
}
}
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: headerContent.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
height: children[0] && children[0].height
width: parent.width
anchors.top: separator2.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.topMargin: Theme.padding
anchors.bottomMargin: Theme.padding
anchors.rightMargin: Theme.padding
anchors.leftMargin: Theme.padding
}
}
}