WIP feat: close the bottom sheet on a swipe down

storybook/pages/StatusDialogPage.qml

@@ -33,6 +33,19 @@ SplitView {
             }
         }
 
+        StatusDialogHeader {
+            id: customHeader
+            color: !!ctrlHeaderBgColor.text ? ctrlHeaderBgColor.text : Theme.palette.statusModal.backgroundColor
+            dropShadowEnabled: ctrlHeaderDropShadow.checked
+
+            visible: dialog.title || dialog.subtitle
+            headline.title: dialog.title
+            headline.subtitle: dialog.subtitle
+            actions.closeButton.onClicked: dialog.closeHandler()
+
+            leftComponent: ctrlHeaderIconComponent.checked ? headerIconComponent : null
+        }
+
         StatusDialog {
             id: dialog
 
@@ -66,17 +79,7 @@ SplitView {
             }
 
             // custom header; not needed unless you want to override the icon or the (close) button(s)
-            header: StatusDialogHeader {
-                color: !!ctrlHeaderBgColor.text ? ctrlHeaderBgColor.text : Theme.palette.statusModal.backgroundColor
-                dropShadowEnabled: ctrlHeaderDropShadow.checked
-
-                visible: dialog.title || dialog.subtitle
-                headline.title: dialog.title
-                headline.subtitle: dialog.subtitle
-                actions.closeButton.onClicked: dialog.closeHandler()
-
-                leftComponent: ctrlHeaderIconComponent.checked ? headerIconComponent : null
-            }
+            header: ctrlHeaderEnabled.checked ? customHeader : null
 
             Component {
                 id: headerIconComponent
@@ -133,6 +136,7 @@ SplitView {
 
                 errorTags: ctrlAddErrorTags.checked ? errorTagsModel: null
             }
+            onClosed: logs.logEvent("Popup closed!")
         }
     }
 
@@ -150,12 +154,15 @@ SplitView {
         }
     }
 
+    Logs { id: logs }
+
     LogsAndControlsPanel {
+        logsView.logText: logs.logText
         SplitView.preferredWidth: 320
         SplitView.fillHeight: true
 
         ColumnLayout {
-            Layout.fillWidth: true
+            anchors.fill: parent
 
             RowLayout {
                 Layout.fillWidth: true
@@ -166,6 +173,13 @@ SplitView {
                     Layout.fillWidth: true
                     id: ctrlTitle
                     text: "Remove me to hide the header"
+                    enabled: ctrlHeaderEnabled.checked
+                }
+                CheckBox {
+                    id: ctrlHeaderEnabled
+                    checked: ctrlTitle.text
+                    ToolTip.text: "Header enabled"
+                    ToolTip.visible: hovered
                 }
             }
 

ui/StatusQ/src/StatusQ/Components/private/StatusBottomSheetDragHandle.qml

@@ -0,0 +1,74 @@
+import QtQuick
+
+import StatusQ.Core.Theme
+
+Rectangle {
+    id: root
+
+    // To be used together with components deriving from QQC2.Popup
+
+    // required to provide the drag/swipe functionality (must have a contentItem to parent to)
+    // if not provided, acts just like a visual indicator
+    property var dragObjectRoot
+
+    // threshold in pixels after which the closeRequested() signal is emitted
+    property int dragToCloseThreshold: 100
+
+    // returns whether the drag operation is currently active
+    readonly property bool active: dragHandler.active
+
+    // emitted when dragToCloseThreshold has been reached
+    signal closeRequested()
+
+    // required to setup the "original" Y position, e.g. when switching to the `bottomSheet` mode
+    // to be able to return to bounds if dropped when the dragToCloseThreshold hasn't been reached
+    function setOriginalYPos(oldY) {
+        d.accuY = 0
+        d.oldY = oldY
+    }
+
+    implicitWidth: 64
+    implicitHeight: 4
+    radius: 2
+    color: Theme.palette.baseColor1
+
+    QtObject {
+        id: d
+        property int oldY
+
+        property real accuY
+        onAccuYChanged: if (accuY > dragToCloseThreshold) root.closeRequested()
+    }
+
+    Connections {
+        target: root.dragObjectRoot ?? null
+        function onOpened() { // reset the accumulated drag, and sets
+            setOriginalYPos(root.dragObjectRoot.y)
+        }
+    }
+
+    DragHandler {
+        id: dragHandler
+        target: null
+
+        margin: 20
+        onActiveChanged: {
+            if (active) {
+                root.dragObjectRoot.anchors.centerIn = undefined // tear out, start moving
+            } else {
+                root.dragObjectRoot.y = d.oldY // return to bounds
+                d.accuY = 0
+            }
+        }
+
+        xAxis.enabled: false
+        yAxis.enabled: true
+        yAxis.minimum: d.oldY
+        yAxis.onActiveValueChanged: function(value) {
+            if (value > 0) { // can't drag up
+                root.dragObjectRoot.y += value
+                d.accuY += value
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/private/qmldir

@@ -1,5 +1,6 @@
 module StatusQ.Components.private
 
+StatusBottomSheetDragHandle 0.1 StatusBottomSheetDragHandle.qml
 StatusImageMessage 0.1 statusMessage/StatusImageMessage.qml
 StatusMessageImageAlbum 0.1 statusMessage/StatusMessageImageAlbum.qml
 StatusComboboxBackground 0.1 StatusComboboxBackground.qml

ui/StatusQ/src/StatusQ/Controls/StatusDropdown.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls as QC
 import QtQml
 
 import StatusQ.Core.Theme
+import StatusQ.Components.private
 
 /*!
    \qmltype StatusDropdown
@@ -71,6 +72,7 @@ QC.Popup {
     readonly property bool bottomSheet: !bottomSheetAllowed ? false:
                                             d.windowHeight > d.windowWidth
                                             && d.windowWidth <= Theme.portraitBreakpoint.width
+    onBottomSheetChanged: if (bottomSheet) Qt.callLater(() => d.dragHandle.setOriginalYPos(root.y))
 
     /*!
        \qmlproperty bool fillHeightOnBottomSheet
@@ -90,6 +92,18 @@ QC.Popup {
        // Keeping a small gap at the top lets users tap to return to the underlying dialog
        // instead of closing the entire flow.
        readonly property real bottomSheetHeightRatio: 0.85
+
+       // must not be a "visual" item, gets overwritten with contentItem or ScrollView's own contentItem
+       readonly property StatusBottomSheetDragHandle dragHandle: StatusBottomSheetDragHandle {
+           dragObjectRoot: root
+           onCloseRequested: root.close()
+
+           anchors.top: parent.top
+           anchors.horizontalCenter: parent.horizontalCenter
+           anchors.topMargin: Theme.smallPadding
+           visible: root.bottomSheet
+           parent: root.contentItem.parent
+       }
     }
 
     Binding {
@@ -122,8 +136,9 @@ QC.Popup {
             y: d.windowHeight - height
             width: d.windowWidth
             height: root.fillHeightOnBottomSheet ? d.windowHeight * d.bottomSheetHeightRatio : Math.min(implicitHeight, d.windowHeight * d.bottomSheetHeightRatio)
+            topPadding: !!d.window ? Theme.bigPadding : 0
             bottomPadding: !!d.window ? d.window.SafeArea.margins.bottom: 0
-            margins: 0
+            margins: d.dragHandle.active ? -1 : 0
         }
     }
 

ui/StatusQ/src/StatusQ/Core/StatusScrollView.qml

@@ -9,14 +9,14 @@ import StatusQ.Core.Theme
 
 /*!
    \qmltype StatusScrollView
-   \inherits Flickable
+   \inherits ScrollView
    \inqmlmodule StatusQ.Core
    \since StatusQ.Core 0.1
-   \brief ScrollView component based on a Flickable with padding and scrollbars.
+   \brief ScrollView component with padding and scrollbars.
 
-   The \c StatusScrollView can be used just like a plain ScrollView but without ability to decarate existing Flickable.
+   The \c StatusScrollView can be used just like a plain ScrollView
 
-   A presenation on using StatusScrollView can be found here:
+   A presentation on using StatusScrollView can be found here:
    https://docs.google.com/presentation/d/1ZZeg9j2fZMV-iHreu_Wsl1u6D9POH7SlUO78ZXNj-AI
 
    Simple example of how to use it:
@@ -177,7 +177,7 @@ T.ScrollView {
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              contentHeight + topPadding + bottomPadding)
 
-    padding: 16 // Default value to fit StatusScrollBar with a gentle margin of 1px on each side
+    padding: Theme.padding // Default value to fit StatusScrollBar with a gentle margin of 1px on each side
     clip: true
 
     Component.onCompleted: {

ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialog.qml

@@ -1,12 +1,11 @@
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Window
 import QtQuick.Layouts
 import QtQml.Models
-import QtQml
 
 import StatusQ.Core
 import StatusQ.Controls
+import StatusQ.Components.private
 import StatusQ.Core.Theme
 
 Dialog {
@@ -41,6 +40,7 @@ Dialog {
 
     readonly property bool bottomSheet: d.windowHeight > d.windowWidth
                                         && d.windowWidth <= Theme.portraitBreakpoint.width // The max width of a phone in portrait mode
+    onBottomSheetChanged: if (bottomSheet) Qt.callLater(() => d.dragHandle.setOriginalYPos(root.desiredY))
 
     readonly property real desiredY: root.bottomSheet ? d.windowHeight - root.height
                                                       : (root.Overlay.overlay.height - root.height) / 2
@@ -61,6 +61,18 @@ Dialog {
         property int windowHeight
 
         readonly property real bottomSheetHeightRatio: 0.90
+
+        // must not be a "visual" item, gets overwritten with contentItem or ScrollView's own contentItem
+        readonly property StatusBottomSheetDragHandle dragHandle: StatusBottomSheetDragHandle {
+            dragObjectRoot: root
+            onCloseRequested: root.closeHandler()
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: Theme.halfPadding
+            visible: root.bottomSheet
+            parent: root.contentItem.parent
+        }
     }
 
     onAboutToShow: {
@@ -145,6 +157,14 @@ Dialog {
         value: -1
     }
 
+    Binding {
+        target: header ?? null
+        when: !!header
+        property: "showDragHandle"
+        value: root.bottomSheet
+        delayed: true
+    }
+
     parent: Overlay.overlay
 
     modal: true

ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogHeader.qml

@@ -4,13 +4,15 @@ import Qt5Compat.GraphicalEffects
 
 import StatusQ.Core
 import StatusQ.Core.Theme
+import StatusQ.Components.private
 
 Rectangle {
     id: root
 
     readonly property alias headline: headline
     readonly property alias actions: actions
     property bool dropShadowEnabled
+    property bool showDragHandle
 
     property alias leftComponent: leftComponentLoader.sourceComponent
 
@@ -105,4 +107,12 @@ Rectangle {
         active: root.internalPopupActive
         sourceComponent: root.internalPopupComponent
     }
+
+    // just a visual handle; the drag operation is done in StatusDialog
+    StatusBottomSheetDragHandle {
+        anchors.top: parent.top
+        anchors.topMargin: Theme.halfPadding
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: root.showDragHandle
+    }
 }

ui/StatusQ/src/statusq.qrc

@@ -67,6 +67,7 @@
         <file>StatusQ/Components/StatusUserImage.qml</file>
         <file>StatusQ/Components/StatusVideo.qml</file>
         <file>StatusQ/Components/WebEngineLoader.qml</file>
+        <file>StatusQ/Components/private/StatusBottomSheetDragHandle.qml</file>
         <file>StatusQ/Components/private/LoadingDotItem.qml</file>
         <file>StatusQ/Components/private/StatusComboboxBackground.qml</file>
         <file>StatusQ/Components/private/StatusComboboxIndicator.qml</file>

ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml

@@ -224,8 +224,6 @@ StatusComboBox {
 
             return ""
         }
-        property var window: root.control.Window
-        property int windowWidth: window ? window.width: Screen.width
-        property int windowHeight: window ? window.height: Screen.height
+        readonly property var window: root.control.Window
     }
 }

ui/app/AppLayouts/Wallet/popups/simpleSend/SendSignModal.qml

@@ -12,7 +12,6 @@ import AppLayouts.Wallet
 import AppLayouts.Wallet.panels
 import AppLayouts.Wallet.views
 import AppLayouts.Wallet.popups
-import AppLayouts.Wallet
 
 import utils