feat(@desktop/wallet): fixing some issues in UI alignments

status-im · Dec 9, 2024 · 0272273 · 0272273
1 parent 16e67a2
commit 0272273
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 72 deletions.
diff --git a/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml b/ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml
@@ -11,7 +11,7 @@ Rectangle {
     border.width: 1
     border.color: Theme.palette.directColor7
     radius: 8
-    color: root.active ? Theme.palette.baseColor2 : "transparent"
+    color: root.active ? Theme.palette.directColor8 : "transparent"
     HoverHandler {
         cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
     }

diff --git a/ui/app/AppLayouts/Wallet/panels/SendModalHeader.qml b/ui/app/AppLayouts/Wallet/panels/SendModalHeader.qml
@@ -135,7 +135,7 @@ RowLayout {
 
         Layout.alignment: Qt.AlignTop
 
-        control.bottomPadding: 0
+        control.popup.y: networkFilter.height
 
         flatNetworks: root.networksModel
 

diff --git a/ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml b/ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml
@@ -20,7 +20,7 @@ Control {
     QtObject {
         id: d
 
-        readonly property string loadingText: "----------"
+        readonly property string loadingText: "XXXXXXXXXX"
     }
 
     implicitHeight: 64

diff --git a/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml b/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml
@@ -1,10 +1,11 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 
 import StatusQ.Core.Theme 0.1
 import StatusQ.Popups.Dialog 0.1
 
-Rectangle {
+Control {
     id: root
 
     /**
@@ -51,7 +52,7 @@ Rectangle {
     property bool isScrolling
 
     /** input property for programatic selection of network **/
-    property int selectedChainId: -1
+    property int selectedChainId
 
     /** signal to propagate that an asset was selected **/
     signal assetSelected(string key)
@@ -68,46 +69,41 @@ Rectangle {
         sendModalHeader.setToken(name, icon, key)
     }
 
-    enabled: root.isScrolling
-    color: Theme.palette.baseColor3
-    radius: 8
-
-    implicitHeight: root.isScrolling ?
-                        sendModalHeader.implicitHeight +
-                        sendModalHeader.anchors.topMargin +
-                        sendModalHeader.anchors.bottomMargin:
-                        0
-    implicitWidth: sendModalHeader.implicitWidth +
-                   sendModalHeader.anchors.leftMargin +
-                   sendModalHeader.anchors.rightMargin
-
+    rightPadding: Theme.xlPadding
+    leftPadding: Theme.xlPadding
+    topPadding: 16
+    bottomPadding: 12
+
+    background: Rectangle {
+        color: Theme.palette.baseColor3
+        radius: 8
+
+        layer.enabled: true
+        layer.effect: DropShadow {
+            horizontalOffset: 0
+            verticalOffset: 2
+            samples: 37
+            color: Theme.palette.dropShadow
+        }
 
-    // Drawer animation for stickey heade
-    Behavior on implicitHeight {
-        NumberAnimation { duration: 350 }
-    }
+        // cover for the bottom rounded corners
+        Rectangle {
+            width: parent.width
+            height: parent.radius
+            anchors.bottom: parent.bottom
+            color: parent.color
+        }
 
-    // cover for the bottom rounded corners
-    Rectangle {
-        width: parent.width
-        height: parent.radius
-        anchors.bottom: parent.bottom
-        color: parent.color
+        StatusDialogDivider {
+            anchors.bottom: parent.bottom
+            width: parent.width
+        }
     }
 
-    SendModalHeader {
+    contentItem: SendModalHeader {
         id: sendModalHeader
 
-        width: parent.width
-
-        anchors {
-            fill: parent
-            leftMargin: Theme.xlPadding
-            rightMargin: Theme.xlPadding
-            topMargin: 16
-            bottomMargin: 12
-        }
-
+        enabled: root.isScrolling
         isStickyHeader: true
         isScrolling: root.isScrolling
 
@@ -122,18 +118,4 @@ Rectangle {
         onAssetSelected: root.assetSelected(key)
         onNetworkSelected: root.networkSelected(chainId)
     }
-
-    StatusDialogDivider {
-        anchors.bottom: parent.bottom
-        width: parent.width
-    }
-
-    layer.enabled: true
-    layer.effect: DropShadow {
-        horizontalOffset: 0
-        verticalOffset: 2
-        samples: 37
-        color: Theme.palette.dropShadow
-    }
 }
-
diff --git a/ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml b/ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml
@@ -120,8 +120,8 @@ StatusDialog {
     QtObject {
         id: d
 
-        readonly property bool isScrolling:
-            scrollView.flickable.contentY > sendModalHeader.height
+        readonly property bool isScrolling: scrollView.flickable.contentY >
+                                            sendModalHeader.height + scrollViewLayout.spacing
 
         // Used to get asset entry if selected token is an asset
         readonly property var selectedAssetEntry: ModelEntry {
@@ -287,28 +287,42 @@ StatusDialog {
         }
 
         // Sticky header only visible when scrolling
-        StickySendModalHeader {
-            id: stickySendModalHeader
-
+        Item {
             width: root.width
+            height: childrenRect.height + Theme.smallPadding
             anchors.top: accountSelector.bottom
-            anchors.topMargin:Theme.padding
+            anchors.topMargin: Theme.padding
             anchors.left: parent.left
             anchors.leftMargin: -Theme.xlPadding
+
+            clip: true
             z: 1
 
-            isScrolling: d.isScrolling
+            StickySendModalHeader {
+                id: stickySendModalHeader
 
-            networksModel: root.networksModel
-            assetsModel: root.assetsModel
-            collectiblesModel: root.collectiblesModel
+                width: parent.width
+
+                // Drawer animation
+                y: d.isScrolling ? parent.x + height/2:
+                                   -height - Theme.smallPadding
+                Behavior on y {
+                    NumberAnimation { duration: 1000 }
+                }
 
-            selectedChainId: root.selectedChainId
+                isScrolling: d.isScrolling
 
-            onCollectibleSelected: root.selectedTokenKey = key
-            onCollectionSelected: root.selectedTokenKey = key
-            onAssetSelected: root.selectedTokenKey = key
-            onNetworkSelected: root.selectedChainId = chainId
+                networksModel: root.networksModel
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+
+                selectedChainId: root.selectedChainId
+
+                onCollectibleSelected: root.selectedTokenKey = key
+                onCollectionSelected: root.selectedTokenKey = key
+                onAssetSelected: root.selectedTokenKey = key
+                onNetworkSelected: root.selectedChainId = chainId
+            }
         }
 
         // Main scrollable Layout
@@ -400,8 +414,7 @@ StatusDialog {
                             return root.fnFormatCurrencyAmount(
                                         maxSafeValue,
                                         amountToSend.selectedSymbol,
-                                        { noSymbol: !amountToSend.fiatMode,
-                                            roundingMode: LocaleUtils.RoundingMode.Down
+                                        { roundingMode: LocaleUtils.RoundingMode.Down
                                         })
                         }
                         markAsInvalid: amountToSend.markAsInvalid

diff --git a/ui/app/AppLayouts/Wallet/views/SendModalFooter.qml b/ui/app/AppLayouts/Wallet/views/SendModalFooter.qml
@@ -29,7 +29,7 @@ StatusDialogFooter {
         id: d
 
         readonly property string emptyText: "--"
-        readonly property string loadingText: "----------"
+        readonly property string loadingText: "XXXXXXXXXX"
     }
 
     leftButtons: ObjectModel {

diff --git a/ui/imports/shared/popups/send/views/AmountToSend.qml b/ui/imports/shared/popups/send/views/AmountToSend.qml
@@ -206,6 +206,7 @@ Control {
     }
 
     contentItem: ColumnLayout {
+        spacing: 8
         StatusBaseText {
             id: captionText
 
@@ -231,6 +232,7 @@ Control {
 
                 Layout.preferredHeight: 44
                 padding: 0
+                leftPadding: 0
                 background: null
 
                 readOnly: !root.interactive
@@ -286,7 +288,7 @@ Control {
         Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 1
-            Layout.bottomMargin: 12
+            Layout.bottomMargin: 4
             color: Theme.palette.directColor8
             visible: root.dividerVisible
         }