chore(StatusDialog): Support custom elements in the footer

- fix rounded corners in header/footer background
- add support for footer drop shadow
- add a page/demo with the various features to StoryBook

Fixes #14499

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

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"
 }

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 {
+    layer.enabled: root.dropShadowEnabled
-        width: parent.width
+    layer.effect: DropShadow {
+        horizontalOffset: 0
+        verticalOffset: -2
+        samples: 37
+        color: Theme.palette.dropShadow
     }
 }

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
 

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
         }
     }