status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Khushboo Mehta 2024-12-09 13:57:00 +01:00
parent 16e67a2137
commit b6919a3bf5
12 changed files with 165 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
storybook/pages/SendModalFooterPage.qml
View File

@ -22,8 +22,9 @@ SplitView {
width: 595
loading: loadingCheckbox.checked
error: errorCheckbox.checked
onReviewSendClicked: console.log("review send clicked")
onReviewSendClicked: logs.logEvent("review send clicked")
}
}
@ -41,11 +42,16 @@ SplitView {
text: "loading"
}
CheckBox {
id: errorCheckbox
text: "error"
}
Button {
text: "set fees values"
onClicked: {
loadingCheckbox.checked = false
footer.estimateTime = "~60s"
footer.estimatedTime = "~60s"
footer.estimatedFees = "1.45 EUR"
}
}

10
storybook/pages/SimpleSendModalPage.qml
View File

@ -121,10 +121,16 @@ SplitView {
}
})
onFetchFees: {
onFormChanged: {
estimatedCryptoFees = ""
estimatedFiatFees = ""
estimatedTime = ""
if(formCorrectlyFilled) {
console.log("Fetch fees...")
d.setFees()
}
}
onReviewSendClicked: console.log("Review send clicked")
Binding on selectedAccountAddress {
@ -488,7 +494,7 @@ SplitView {
}
}
LogsAndControlsPanel {
Pane {
SplitView.minimumHeight: 100
SplitView.minimumWidth: 300
SplitView.maximumWidth: 380

14
storybook/pages/SimpleTransactionsFeesPage.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core.Theme 0.1
@ -9,7 +10,6 @@ import AppLayouts.Wallet.panels 1.0
SplitView {
orientation: Qt.Vertical
Logs { id: logs }
Rectangle {
SplitView.fillHeight: true
@ -23,21 +23,27 @@ SplitView {
cryptoFees: qsTr("0.0007 ETH")
fiatFees: qsTr("1.45 EUR")
loading: loadingCheckbox.checked
error: errorCheckbox.checked
}
}
LogsAndControlsPanel {
Pane {
id: logsAndControlsPanel
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
logsView.logText: logs.logText
ColumnLayout {
CheckBox {
id: loadingCheckbox
text: "loading"
}
CheckBox {
id: errorCheckbox
text: "error"
}
}
}
}

2
ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml
View File

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

7
ui/app/AppLayouts/Wallet/controls/TokenSelector.qml
View File

@ -17,9 +17,6 @@ Control {
/** Expected model structure: see SearchableCollectiblesPanel::model **/
property alias collectiblesModel: tokenSelectorPanel.collectiblesModel
/** Exposes insatnce of popup **/
property var popup: dropdown
/** Sets size of the TokenSelectorButton **/
property alias size: tokenSelectorButton.size
@ -45,6 +42,10 @@ Control {
}
}
function close() {
dropdown.close()
}
QObject {
id: d

6
ui/app/AppLayouts/Wallet/panels/SendModalHeader.qml
View File

@ -65,7 +65,7 @@ RowLayout {
/** signal to propagate that a collectible was selected **/
signal collectibleSelected(string key)
/** signal to propagate that a network was selected **/
signal networkSelected(string chainId)
signal networkSelected(int chainId)
/** input function for programatic selection of token
(asset/collectible/collection) **/
@ -79,7 +79,7 @@ RowLayout {
// if not closed during scrolling they move with the header and it feels undesirable
onIsScrollingChanged: {
tokenSelector.popup.close()
tokenSelector.close()
networkFilter.control.popup.close()
}
@ -135,7 +135,7 @@ RowLayout {
Layout.alignment: Qt.AlignTop
control.bottomPadding: 0
control.popup.y: networkFilter.height
flatNetworks: root.networksModel

17
ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml
View File

@ -1,6 +1,6 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.14
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
@ -16,22 +16,23 @@ Control {
property string fiatFees
/** property to set loading state in the fees component **/
property bool loading
/** property to set error state in the fees component **/
property bool error
QtObject {
id: d
readonly property string loadingText: "----------"
readonly property string loadingText: "XXXXXXXXXX"
}
implicitHeight: 64
padding: Theme.padding
topPadding: 12
bottomPadding: 12
verticalPadding: 12
background: Rectangle {
color: Theme.palette.indirectColor1
radius: 8
radius: Theme.radius
}
contentItem: RowLayout {
@ -64,7 +65,8 @@ Control {
Layout.fillWidth: true
loading: root.loading
customColor: Theme.palette.baseColor1
customColor: root.error ? Theme.palette.dangerColor1:
Theme.palette.baseColor1
lineHeightMode: Text.FixedHeight
lineHeight: 22
@ -78,7 +80,8 @@ Control {
Layout.alignment: Qt.AlignRight
loading: root.loading
customColor: Theme.palette.baseColor1
customColor: root.error ? Theme.palette.dangerColor1:
Theme.palette.baseColor1
lineHeightMode: Text.FixedHeight
lineHeight: 22

79
ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml
View File

@ -1,10 +1,11 @@
import QtQuick 2.14
import QtQuick 2.15
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
/**
@ -48,10 +49,10 @@ Rectangle {
Not using visible property directly here as the animation on
implicitHeight doesnt work
**/
property bool isScrolling
property bool stickyHeaderVisible
/** 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)
@ -60,7 +61,7 @@ Rectangle {
/** signal to propagate that a collectible was selected **/
signal collectibleSelected(string key)
/** signal to propagate that a network was selected **/
signal networkSelected(string chainId)
signal networkSelected(int chainId)
/** input function for programatic selection of token
(asset/collectible/collection) **/
@ -68,24 +69,36 @@ Rectangle {
sendModalHeader.setToken(name, icon, key)
}
enabled: root.isScrolling
color: Theme.palette.baseColor3
radius: 8
QtObject {
id: d
readonly property int bottomMargin: 12
}
implicitHeight: root.isScrolling ?
sendModalHeader.implicitHeight +
sendModalHeader.anchors.topMargin +
sendModalHeader.anchors.bottomMargin:
0
implicitWidth: sendModalHeader.implicitWidth +
sendModalHeader.anchors.leftMargin +
sendModalHeader.anchors.rightMargin
implicitHeight: root.stickyHeaderVisible ?
implicitContentHeight + Theme.padding + d.bottomMargin : 0
horizontalPadding: Theme.xlPadding
bottomPadding: d.bottomMargin
topPadding: root.stickyHeaderVisible ? Theme.padding : -implicitContentHeight - Theme.padding
// Drawer animation for stickey heade
Behavior on implicitHeight {
NumberAnimation { duration: 350 }
}
Behavior on topPadding {
NumberAnimation { duration: 350 }
}
background: Rectangle {
color: root.implicitHeight > d.bottomMargin ? Theme.palette.baseColor3: Theme.palette.transparent
radius: 8
layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: 0
verticalOffset: 2
samples: 37
color: Theme.palette.dropShadow
}
// cover for the bottom rounded corners
Rectangle {
@ -95,21 +108,17 @@ Rectangle {
color: parent.color
}
SendModalHeader {
id: sendModalHeader
StatusDialogDivider {
anchors.bottom: parent.bottom
width: parent.width
anchors {
fill: parent
leftMargin: Theme.xlPadding
rightMargin: Theme.xlPadding
topMargin: 16
bottomMargin: 12
}
}
contentItem: SendModalHeader {
id: sendModalHeader
isStickyHeader: true
isScrolling: root.isScrolling
isScrolling: root.stickyHeaderVisible
networksModel: root.networksModel
assetsModel: root.assetsModel
@ -122,18 +131,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
}
}

64
ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml
View File

@ -1,5 +1,5 @@
import QtQuick 2.15
import QtQuick.Layouts 1.14
import QtQuick.Layouts 1.15
import StatusQ 0.1
import StatusQ.Core 0.1
@ -102,6 +102,9 @@ StatusDialog {
e.g. 1000000000000000000 for 1 ETH **/
readonly property string selectedAmountInBaseUnit: amountToSend.amount
/** property to scheck if form has been filled correctly **/
readonly property bool formCorrectlyFilled: d.allValuesFilledCorrectly()
/** TODO: replace with new and improved recipient selector StatusDateRangePicker
TBD under https://github.com/status-im/status-desktop/issues/16916 **/
property alias selectedRecipientAddress: recipientsPanel.selectedRecipientAddress
@ -114,14 +117,22 @@ StatusDialog {
/** Output signal to request signing of the transaction **/
signal reviewSendClicked()
/** Output signal to request fetching fees **/
signal fetchFees()
/** Output signal to inform that the forms been updated **/
signal formChanged()
QtObject {
id: d
readonly property bool isScrolling:
scrollView.flickable.contentY > sendModalHeader.height
readonly property real scrollViewContentY: scrollView.flickable.contentY
onScrollViewContentYChanged: {
const buffer = sendModalHeader.height + scrollViewLayout.spacing
if (scrollViewContentY > buffer) {
d.stickyHeaderVisible = true
} else if (scrollViewContentY === 0) {
d.stickyHeaderVisible = false
}
}
property bool stickyHeaderVisible: false
// Used to get asset entry if selected token is an asset
readonly property var selectedAssetEntry: ModelEntry {
@ -215,20 +226,7 @@ StatusDialog {
root.selectedAmount,
amountToSend.markAsInvalid,
amountToSend.valid]
onCombinedPropertyChangedHandlerChanged: Qt.callLater(() => d.fetchFees())
function resetFees() {
root.estimatedCryptoFees = ""
root.estimatedFiatFees = ""
root.estimatedTime = ""
}
function fetchFees() {
resetFees()
if(allValuesFilledCorrectly()) {
root.fetchFees()
}
}
onCombinedPropertyChangedHandlerChanged: Qt.callLater(() => root.formChanged())
readonly property bool feesIsLoading: !root.estimatedCryptoFees &&
!root.estimatedFiatFees &&
@ -237,8 +235,7 @@ StatusDialog {
width: 556
padding: 0
leftPadding: Theme.xlPadding
rightPadding: Theme.xlPadding
horizontalPadding: Theme.xlPadding
topMargin: margins + accountSelector.height + Theme.padding
background: StatusDialogBackground {
@ -287,17 +284,24 @@ StatusDialog {
}
// Sticky header only visible when scrolling
StickySendModalHeader {
id: stickySendModalHeader
width: root.width
Item {
height: childrenRect.height + Theme.smallPadding
anchors.top: accountSelector.bottom
anchors.topMargin: Theme.padding
anchors.left: parent.left
anchors.leftMargin: -Theme.xlPadding
anchors.right: parent.right
anchors.rightMargin: -Theme.xlPadding
clip: true
z: 1
isScrolling: d.isScrolling
StickySendModalHeader {
id: stickySendModalHeader
width: parent.width
stickyHeaderVisible: d.stickyHeaderVisible
networksModel: root.networksModel
assetsModel: root.assetsModel
@ -310,6 +314,7 @@ StatusDialog {
onAssetSelected: root.selectedTokenKey = key
onNetworkSelected: root.selectedChainId = chainId
}
}
// Main scrollable Layout
StatusScrollView {
@ -340,7 +345,7 @@ StatusDialog {
Layout.fillWidth: true
Layout.topMargin: 28
isScrolling: d.isScrolling
isScrolling: d.stickyHeaderVisible
networksModel: root.networksModel
assetsModel: root.assetsModel
@ -400,8 +405,7 @@ StatusDialog {
return root.fnFormatCurrencyAmount(
maxSafeValue,
amountToSend.selectedSymbol,
{ noSymbol: !amountToSend.fiatMode,
roundingMode: LocaleUtils.RoundingMode.Down
{ roundingMode: LocaleUtils.RoundingMode.Down
})
}
markAsInvalid: amountToSend.markAsInvalid
@ -474,7 +478,7 @@ StatusDialog {
footer: SendModalFooter {
width: root.width
estimateTime: root.estimatedTime
estimatedTime: root.estimatedTime
estimatedFees: root.estimatedFiatFees
loading: d.feesIsLoading && d.allValuesFilledCorrectly()

20
ui/app/AppLayouts/Wallet/views/SendModalFooter.qml
View File

@ -13,9 +13,11 @@ StatusDialogFooter {
/** property to set loading state **/
property bool loading
/** property to set estimated time **/
property string estimateTime
property string estimatedTime
/** property to set estimates fees in fiat **/
property string estimatedFees
/** property to set error state **/
property bool error
// Signal to propogate Send clicked
signal reviewSendClicked()
@ -29,7 +31,7 @@ StatusDialogFooter {
id: d
readonly property string emptyText: "--"
readonly property string loadingText: "----------"
readonly property string loadingText: "XXXXXXXXXX"
}
leftButtons: ObjectModel {
@ -40,17 +42,19 @@ StatusDialogFooter {
spacing: 0
StatusBaseText {
font.weight: Font.Medium
color: Theme.palette.directColor5
text: qsTr("Est time")
}
StatusTextWithLoadingState {
id: estimatedTime
customColor: !!root.estimateTime ? Theme.palette.directColor1:
font.weight: Font.Medium
customColor: !!root.estimatedTime ? Theme.palette.directColor1:
Theme.palette.directColor5
loading: root.loading
text: !!root.estimateTime ? root.estimateTime:
text: !!root.estimatedTime ? root.estimatedTime:
root.loading ? d.loadingText : d.emptyText
}
}
@ -60,13 +64,17 @@ StatusDialogFooter {
spacing: 0
StatusBaseText {
font.weight: Font.Medium
color: Theme.palette.directColor5
text: qsTr("Est fees")
}
StatusTextWithLoadingState {
id: estimatedFees
customColor: !!root.estimatedFees ? Theme.palette.directColor1:
font.weight: Font.Medium
customColor: root.error ? Theme.palette.dangerColor1:
!!root.estimatedFees ?
Theme.palette.directColor1:
Theme.palette.directColor5
loading: root.loading
@ -83,7 +91,7 @@ StatusDialogFooter {
Layout.rightMargin: Theme.padding
disabledColor: Theme.palette.directColor8
enabled: !!root.estimateTime &&
enabled: !!root.estimatedTime &&
!!root.estimatedFees &&
!root.loading

13
ui/app/mainui/SendModalHandler.qml
View File

@ -82,10 +82,10 @@ QtObject {
**/
required property var flatNetworksModel
/** true if testnet mode is on **/
required property var areTestNetworksEnabled
required property bool areTestNetworksEnabled
/** whether community tokens are shown in send modal
based on a global setting **/
required property var showCommunityAssetsInSend
required property bool showCommunityAssetsInSend
/** required function to format currency amount to locale string **/
required property var fnFormatCurrencyAmount
@ -238,6 +238,15 @@ QtObject {
onClosed: destroy()
onFormChanged: {
estimatedCryptoFees = ""
estimatedFiatFees = ""
estimatedTime = ""
if(formCorrectlyFilled) {
// TODO: call stores fetchSuggestedRoutes api
}
}
TokenSelectorViewAdaptor {
id: assetsSelectorViewAdaptor

6
ui/imports/shared/popups/send/views/AmountToSend.qml
View File

@ -206,6 +206,7 @@ Control {
}
contentItem: ColumnLayout {
spacing: Theme.halfPadding
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
}
@ -363,7 +365,7 @@ Control {
color: Theme.palette.directColor5
visible: hoverHandler.hovered
}
RowLayout {}
Item { Layout.fillWidth: true }
Loader {
id: bottomRightComponent
Layout.alignment: Qt.AlignVCenter