From 6e495596c69c4092fd8cb7de59113712ecd5e0cb Mon Sep 17 00:00:00 2001 From: Igor Sirotin Date: Wed, 3 Aug 2022 15:15:13 +0300 Subject: [PATCH] fix(StatusAssetSelector): Reimplemented using `StatusComboBox` --- ui/StatusQ | 2 +- .../shared/panels/StatusAssetSelector.qml | 227 +++++++++--------- 2 files changed, 109 insertions(+), 120 deletions(-) diff --git a/ui/StatusQ b/ui/StatusQ index 63ff9b82d1..cff836280f 160000 --- a/ui/StatusQ +++ b/ui/StatusQ @@ -1 +1 @@ -Subproject commit 63ff9b82d1f13c063dddbb244a255a9886705fc7 +Subproject commit cff836280f3b9e1671518568fe1884f286b36054 diff --git a/ui/imports/shared/panels/StatusAssetSelector.qml b/ui/imports/shared/panels/StatusAssetSelector.qml index 4e481495c8..8346a1d211 100644 --- a/ui/imports/shared/panels/StatusAssetSelector.qml +++ b/ui/imports/shared/panels/StatusAssetSelector.qml @@ -2,8 +2,6 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 -import utils 1.0 - import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 @@ -12,158 +10,149 @@ import StatusQ.Components 0.1 Item { id: root + property var assets property var selectedAsset - property string defaultToken - property string userSelectedToken + property string defaultToken: "" + property string userSelectedToken: "" property var tokenAssetSourceFn: function (symbol) { return "" } + // Define this in the usage to get balance in currency selected by user property var getCurrencyBalanceString: function (currencyBalance) { return "" } - implicitWidth: select.width - implicitHeight: 48 function resetInternal() { assets = null selectedAsset = null } + implicitWidth: 106 + implicitHeight: comboBox.implicitHeight + onSelectedAssetChanged: { if (selectedAsset && selectedAsset.symbol) { - iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase()) - selectedTextField.text = selectedAsset.symbol.toUpperCase() + d.iconSource = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase()) + d.text = selectedAsset.symbol.toUpperCase() } } - StatusSelect { - id: select - width: visualRect.width + QtObject { + id: d + property string iconSource: "" + property string text: "" + } + + StatusComboBox { + id: comboBox + + width: parent.width + height: parent.height + + control.padding: 4 + control.popup.width: 342 + control.popup.x: width - control.popup.width + model: root.assets - caretVisible: false - caretRightMargin: 0 - bgColor: Style.current.transparent - bgColorHover: Theme.palette.directColor8 - select.radius: 16 - select.height: root.height - selectMenu.width: 342 - selectMenu.height: 416 - selectedItemComponent: Rectangle { - id: visualRect - width: row.width + Style.current.padding - height: parent.height - color: Style.current.transparent - border.width: 1 - border.color: Theme.palette.directColor8 - radius: 16 - Row { - id: row - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Style.current.halfPadding - spacing: Style.current.halfPadding - StatusBaseText { - id: selectedTextField - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 15 - width: Math.min(50, implicitWidth) - elide: Text.ElideRight - verticalAlignment: Text.AlignVCenter - color: Theme.palette.directColor1 - font.weight: Font.Medium - } - StatusRoundedImage { - id: iconImg - width: 40 - height: 40 - image.onStatusChanged: { - if (iconImg.image.status === Image.Error) { - iconImg.image.source = defaultToken - } + + control.background: Rectangle { + color: comboBox.control.hovered ? Theme.palette.directColor8 : "transparent" + radius: 6 + } + + contentItem: RowLayout { + spacing: 4 + + StatusRoundedImage { + Layout.preferredWidth: 24 + Layout.preferredHeight: 24 + Layout.alignment: Qt.AlignVCenter + image.source: d.iconSource + image.onStatusChanged: { + if (image.status === Image.Error) { + image.source = defaultToken } } } + StatusBaseText { + font.pixelSize: 15 + Layout.maximumWidth: 50 + Layout.alignment: Qt.AlignVCenter + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + color: Theme.palette.directColor1 + text: d.text + } } - selectMenu.delegate: menuItem - } - Component { - id: menuItem - MenuItem { - id: itemContainer - property bool isFirstItem: index === 0 - property bool isLastItem: index === assets.rowCount() - 1 + delegate: StatusItemDelegate { + width: comboBox.control.popup.width + highlighted: index === comboBox.control.highlightedIndex + padding: 16 + + onClicked: { + // TODO: move this out of StatusQ, this involves dependency on BE code + // WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info. + root.userSelectedToken = symbol + root.selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances} + } + + // TODO: move this out of StatusQ, this involves dependency on BE code + // WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info. + Component.onCompleted: { + if ((userSelectedToken === "" && index === 0) || symbol === userSelectedToken) + root.selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances} + } + + contentItem: RowLayout { + spacing: 0 - width: parent.width - height: 72 - contentItem: Item { - anchors.fill: parent StatusRoundedImage { - id: iconImg - anchors.left: parent.left - anchors.leftMargin: 16 - anchors.verticalCenter: parent.verticalCenter image.source: root.tokenAssetSourceFn(symbol.toUpperCase()) image.onStatusChanged: { - if (iconImg.image.status === Image.Error) { - iconImg.image.source = defaultToken + if (image.status === Image.Error) { + image.source = defaultToken } } } - Column { - anchors.left: iconImg.right - anchors.leftMargin: 12 - anchors.verticalCenter: parent.verticalCenter - StatusBaseText { - text: symbol.toUpperCase() - font.pixelSize: 15 - color: Theme.palette.directColor1 - } + ColumnLayout { + Layout.fillWidth: true + Layout.leftMargin: 12 + spacing: 0 - StatusBaseText { - text: name - color: Theme.palette.baseColor1 - font.pixelSize: 15 + RowLayout { + Layout.fillWidth: true + + StatusBaseText { + Layout.fillWidth: true + text: symbol.toUpperCase() + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + StatusBaseText { + Layout.fillWidth: true + horizontalAlignment: Text.AlignRight + font.pixelSize: 15 + text: parseFloat(totalBalance).toLocaleCurrencyString(Qt.locale(), symbol) + } } - } - Column { - anchors.right: parent.right - anchors.rightMargin: 16 - anchors.verticalCenter: parent.verticalCenter - StatusBaseText { - font.pixelSize: 15 - text: parseFloat(totalBalance).toFixed(4) + " " + symbol + RowLayout { + Layout.fillWidth: true + StatusBaseText { + Layout.fillWidth: true + text: name + color: Theme.palette.baseColor1 + font.pixelSize: 15 + } + StatusBaseText { + Layout.fillWidth: true + horizontalAlignment: Text.AlignRight + font.pixelSize: 15 + text: getCurrencyBalanceString(totalCurrencyBalance) + color: Theme.palette.baseColor1 + } } - StatusBaseText { - font.pixelSize: 15 - anchors.right: parent.right - text: getCurrencyBalanceString(totalCurrencyBalance) - color: Theme.palette.baseColor1 - } - } - } - background: Rectangle { - color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor - } - Component.onCompleted: { - if(userSelectedToken === "") { - if(index === 0) { - selectedAsset = model - } - } else { - if(symbol === userSelectedToken) { - selectedAsset = model - } - } - } - MouseArea { - cursorShape: Qt.PointingHandCursor - anchors.fill: itemContainer - onClicked: { - userSelectedToken = symbol - selectedAsset = model - select.selectMenu.close() } } }