status-desktop/ui/StatusQ/sandbox/pages/StatusDialogPage.qml

283 lines
7.4 KiB
QML
Raw Normal View History

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQml.Models 2.14
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups.Dialog 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
ColumnLayout {
id: root
StatusButton {
text: "Content"
onClicked: contentDialog.open()
StatusDialog {
id: contentDialog
standardButtons: Dialog.ApplyRole
StatusBaseText {
anchors.fill: parent
text: "Content"
}
}
}
StatusButton {
text: "Title and content"
onClicked: titleContentDialog.open()
StatusDialog {
id: titleContentDialog
title: "Title"
StatusBaseText {
anchors.fill: parent
text: "Content"
}
}
}
StatusButton {
text: "No buttons"
onClicked: noButtonsDialog.open()
StatusDialog {
id: noButtonsDialog
title: "No buttons"
standardButtons: Dialog.NoButton
StatusBaseText {
anchors.fill: parent
text: "Content"
}
}
}
StatusButton {
text: "Long title"
onClicked: longTitleDialog.open()
StatusDialog {
id: longTitleDialog
title: "Long title long title Long title long title Long title long title"
StatusBaseText {
anchors.fill: parent
text: "Content"
}
}
}
StatusButton {
text: "Long title elided"
onClicked: longTitleElidedDialog.open()
StatusDialog {
id: longTitleElidedDialog
title: "Long title long title Long title long title Long title long title"
width: 400
StatusBaseText {
anchors.fill: parent
text: "Content"
}
}
}
StatusButton {
text: "Title subtitle"
onClicked: titleSubtitleDialog.open()
StatusDialog {
id: titleSubtitleDialog
title: "This title will be ignored"
header: StatusDialogHeader {
headline.title: "Title"
headline.subtitle: "Subtitle"
actions.closeButton.onClicked: titleSubtitleDialog.close()
}
StatusBaseText {
anchors.fill: parent
text: "Content"
}
}
}
StatusButton {
text: "Auto adjustable"
onClicked: autoAdjustableDialog.open()
StatusDialog {
id: autoAdjustableDialog
header: StatusDialogHeader {
headline.title: "Dialog size will auto adapt"
headline.subtitle: "To conent size"
actions.closeButton.onClicked: autoAdjustableDialog.close()
}
footer: StatusDialogFooter {
leftButtons: ObjectModel {
StatusRoundButton {
icon.name: "arrow-left"
onClicked: autoAdjustableDialogContent.implicitWidth -= 100
}
StatusRoundButton {
icon.name: "arrow-right"
onClicked: autoAdjustableDialogContent.implicitWidth += 100
}
}
rightButtons: ObjectModel {
StatusRoundButton {
icon.name: "arrow-down"
onClicked: autoAdjustableDialogContent.implicitHeight -= 100
}
StatusRoundButton {
icon.name: "arrow-up"
onClicked: autoAdjustableDialogContent.implicitHeight += 100
}
}
}
Rectangle {
id: autoAdjustableDialogContent
anchors.fill: parent
implicitWidth: 200
implicitHeight: 200
color: Theme.palette.primaryColor3
StatusBaseText {
anchors.centerIn: parent
text: "W: %1 H: %2\nIW: %3 IH: %4".arg(parent.width).arg(parent.height).arg(parent.implicitWidth).arg(parent.implicitHeight)
}
}
}
}
StatusButton {
text: "Complex dialog"
onClicked: complexDialog.open()
StatusDialog {
id: complexDialog
header: StatusDialogHeader {
id: dialogHeader
headline.title: "Complex dialog"
headline.subtitle: "identicon, title subtitle, custom actions"
leftComponent: StatusLetterIdenticon {
name: dialogHeader.headline.title
}
actions {
infoButton.visible: true
customButtons: ObjectModel {
StatusFlatRoundButton {
icon.name: "warning"
icon.width: 20
icon.height: 20
}
}
closeButton.onClicked: complexDialog.close()
}
}
footer: StatusDialogFooter {
leftButtons: ObjectModel {
StatusRoundButton {
icon.name: "arrow-left"
}
}
rightButtons: ObjectModel {
StatusButton {
text: "Custom cancel action"
type: StatusButton.Danger
}
StatusButton {
text: "Custom approve action"
}
}
}
ColumnLayout {
anchors.fill: parent
StatusBaseText {
text: "Content A"
}
StatusBaseText {
text: "Content B"
}
StatusBaseText {
text: "Content C"
}
}
}
}
StatusButton {
text: "Custom header/footer"
onClicked: customHeaderAndFooter.open()
StatusDialog {
id: customHeaderAndFooter
title: "No buttons"
header: Rectangle {
implicitHeight: customHeaderText.height * 2
implicitWidth: customHeaderText.width * 2
border.width: 2
color: Theme.palette.statusPopupMenu.hoverBackgroundColor
StatusBaseText {
id: customHeaderText
anchors.centerIn: parent
text: "Custom header"
}
}
footer: Rectangle {
implicitHeight: customHeaderText.height * 2
implicitWidth: customHeaderText.width * 2
border.width: 2
color: Theme.palette.statusPopupMenu.hoverBackgroundColor
StatusBaseText {
id: customFooter
anchors.centerIn: parent
text: "Custom footer"
}
}
StatusBaseText {
anchors.fill: parent
text: "Content"
}
}
}
}