241 lines
7.2 KiB
QML
241 lines
7.2 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Layouts 1.15
|
|
import QtQml.Models 2.15
|
|
import QtGraphicalEffects 1.15
|
|
|
|
import Storybook 1.0
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Popups.Dialog 0.1
|
|
|
|
SplitView {
|
|
id: root
|
|
|
|
orientation: Qt.Horizontal
|
|
|
|
Item {
|
|
SplitView.fillWidth: true
|
|
SplitView.fillHeight: true
|
|
|
|
Rectangle {
|
|
color: "lightgray"
|
|
anchors.fill: parent
|
|
|
|
Button {
|
|
anchors.centerIn: parent
|
|
text: "Reopen"
|
|
onClicked: dialog.open()
|
|
}
|
|
}
|
|
|
|
StatusDialog {
|
|
id: dialog
|
|
|
|
anchors.centerIn: parent
|
|
width: 556
|
|
visible: true
|
|
modal: false
|
|
closePolicy: Popup.NoAutoClose
|
|
|
|
title: ctrlTitle.text
|
|
subtitle: ctrlSubTitle.text
|
|
//backgroundColor: Theme.palette.baseColor3
|
|
backgroundColor: !!ctrlBgColor.text ? ctrlBgColor.text : Theme.palette.statusModal.backgroundColor
|
|
|
|
padding: ctrlPadding.text
|
|
|
|
contentItem: ColumnLayout {
|
|
spacing: 16
|
|
StatusBaseText {
|
|
Layout.fillWidth: true
|
|
font.pixelSize: 22
|
|
font.bold: true
|
|
text: "Custom header inside contentItem"
|
|
}
|
|
StatusBaseText {
|
|
Layout.fillWidth: true
|
|
font.pixelSize: 17
|
|
text: "Here comes the content\n\nThe quick brown fox jumps over the lazy dog"
|
|
}
|
|
}
|
|
|
|
// custom bg, not needed unless you want a gradient
|
|
background: StatusDialogBackground {
|
|
gradient: Gradient {
|
|
GradientStop { position: 0.0; color: ctrlBgGradient.checked ? "ghostwhite" : dialog.backgroundColor }
|
|
GradientStop { position: 1.0; color: dialog.backgroundColor }
|
|
}
|
|
}
|
|
|
|
// custom header; not needed unless you want to override the icon or the (close) button(s)
|
|
header: StatusDialogHeader {
|
|
//color: Theme.palette.baseColor3
|
|
color: !!ctrlHeaderBgColor.text ? ctrlHeaderBgColor.text : Theme.palette.statusModal.backgroundColor
|
|
|
|
visible: dialog.title || dialog.subtitle
|
|
headline.title: dialog.title
|
|
headline.subtitle: dialog.subtitle
|
|
actions.closeButton.onClicked: dialog.closeHandler()
|
|
|
|
leftComponent: ctrlHeaderIconComponent.checked ? headerIconComponent : null
|
|
}
|
|
|
|
Component {
|
|
id: headerIconComponent
|
|
StatusRoundIcon {
|
|
asset.name: "settings"
|
|
asset.width: 24
|
|
asset.height: 24
|
|
}
|
|
}
|
|
|
|
footer: StatusDialogFooter {
|
|
//color: Theme.palette.baseColor3
|
|
color: !!ctrlFooterBgColor.text ? ctrlFooterBgColor.text : Theme.palette.statusModal.backgroundColor
|
|
dropShadowEnabled: ctrlDropShadow.checked
|
|
|
|
leftButtons: ObjectModel {
|
|
ColumnLayout {
|
|
Layout.leftMargin: dialog.leftPadding/2
|
|
StatusBaseText {
|
|
text: "Max. slippage:"
|
|
color: Theme.palette.baseColor1
|
|
font.pixelSize: 13
|
|
}
|
|
StatusBaseText {
|
|
text: "0.5%"
|
|
font.pixelSize: 13
|
|
}
|
|
}
|
|
}
|
|
rightButtons: ObjectModel {
|
|
RowLayout {
|
|
Layout.rightMargin: dialog.rightPadding/2
|
|
spacing: 16
|
|
StatusFlatButton {
|
|
icon.name: "settings-advanced"
|
|
textColor: Theme.palette.directColor1
|
|
}
|
|
ColumnLayout {
|
|
StatusBaseText {
|
|
text: "Max. fees:"
|
|
color: Theme.palette.baseColor1
|
|
font.pixelSize: 13
|
|
}
|
|
StatusBaseText {
|
|
text: "1.54 EUR"
|
|
font.pixelSize: 13
|
|
}
|
|
}
|
|
StatusButton {
|
|
icon.name: "password"
|
|
text: "Swap"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
LogsAndControlsPanel {
|
|
SplitView.preferredWidth: 320
|
|
SplitView.fillHeight: true
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Label {
|
|
text: "Title:"
|
|
}
|
|
TextField {
|
|
Layout.fillWidth: true
|
|
id: ctrlTitle
|
|
text: "Remove me to hide the header"
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Label {
|
|
text: "Subtitle:"
|
|
}
|
|
TextField {
|
|
Layout.fillWidth: true
|
|
id: ctrlSubTitle
|
|
text: ""
|
|
}
|
|
}
|
|
|
|
CheckBox {
|
|
id: ctrlHeaderIconComponent
|
|
text: "Header icon"
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Label {
|
|
text: "Padding:"
|
|
}
|
|
TextField {
|
|
Layout.fillWidth: true
|
|
id: ctrlPadding
|
|
text: "32"
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Label {
|
|
text: "Custom bg color:"
|
|
}
|
|
TextField {
|
|
Layout.fillWidth: true
|
|
id: ctrlBgColor
|
|
text: ""
|
|
}
|
|
}
|
|
|
|
CheckBox {
|
|
Layout.leftMargin: 24
|
|
id: ctrlBgGradient
|
|
text: "Bg gradient"
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Label {
|
|
text: "Header bg color:"
|
|
}
|
|
TextField {
|
|
Layout.fillWidth: true
|
|
id: ctrlHeaderBgColor
|
|
text: ""
|
|
}
|
|
}
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Label {
|
|
text: "Footer bg color:"
|
|
}
|
|
TextField {
|
|
Layout.fillWidth: true
|
|
id: ctrlFooterBgColor
|
|
text: ""
|
|
}
|
|
}
|
|
CheckBox {
|
|
id: ctrlDropShadow
|
|
text: "Footer drop shadow"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// category: Popups
|