diff --git a/storybook/pages/StatusDialogPage.qml b/storybook/pages/StatusDialogPage.qml new file mode 100644 index 0000000000..fafe9dc929 --- /dev/null +++ b/storybook/pages/StatusDialogPage.qml @@ -0,0 +1,240 @@ +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 diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBackButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBackButton.qml index aee9188348..cd62c848a5 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBackButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusBackButton.qml @@ -1,6 +1,8 @@ -import QtQuick 2.14 +import QtQuick 2.15 import StatusQ.Controls 0.1 -StatusRoundButton { +StatusButton { + isRoundIcon: true + radius: height/2 icon.name: "arrow-left" } diff --git a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogFooter.qml b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogFooter.qml index 6e87e3af3f..be105ae1c2 100644 --- a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogFooter.qml +++ b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogFooter.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQml.Models 2.15 +import QtGraphicalEffects 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -11,6 +12,7 @@ Rectangle { property ObjectModel leftButtons property ObjectModel rightButtons property int spacing: 5 + property bool dropShadowEnabled color: Theme.palette.statusModal.backgroundColor radius: 8 @@ -18,6 +20,20 @@ Rectangle { implicitHeight: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin implicitWidth: layout.implicitWidth + layout.anchors.leftMargin + layout.anchors.rightMargin + // cover for the top rounded corners + Rectangle { + width: parent.width + height: parent.radius + anchors.top: parent.top + color: parent.color + } + + StatusDialogDivider { + anchors.top: parent.top + width: parent.width + visible: !root.dropShadowEnabled + } + RowLayout { id: layout @@ -50,7 +66,11 @@ Rectangle { } } - StatusDialogDivider { - width: parent.width + layer.enabled: root.dropShadowEnabled + layer.effect: DropShadow { + horizontalOffset: 0 + verticalOffset: -2 + samples: 37 + color: Theme.palette.dropShadow } } diff --git a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogHeader.qml b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogHeader.qml index 911565246a..1d2c216f7d 100644 --- a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogHeader.qml +++ b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogHeader.qml @@ -18,6 +18,14 @@ Rectangle { implicitHeight: layout.implicitHeight + layout.anchors.topMargin + layout.anchors.bottomMargin implicitWidth: layout.implicitWidth + layout.anchors.leftMargin + layout.anchors.rightMargin + // cover for the bottom rounded corners + Rectangle { + width: parent.width + height: parent.radius + anchors.bottom: parent.bottom + color: parent.color + } + RowLayout { id: layout diff --git a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusTitleSubtitle.qml b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusTitleSubtitle.qml index 92fa044aea..2b49213eea 100644 --- a/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusTitleSubtitle.qml +++ b/ui/StatusQ/src/StatusQ/Popups/Dialog/StatusTitleSubtitle.qml @@ -24,9 +24,7 @@ Item { Layout.fillWidth: true - color: Theme.palette.directColor1 font { - family: Theme.palette.baseFont.name pixelSize: 17 bold: true } @@ -40,10 +38,6 @@ Item { visible: text !== "" color: Theme.palette.baseColor1 - font { - family: Theme.palette.baseFont.name - pixelSize: 15 - } elide: Text.ElideMiddle } }