diff --git a/src/app/modules/shared_models/balance_model.nim b/src/app/modules/shared_models/balance_model.nim index 25021167f9..b030ff090a 100644 --- a/src/app/modules/shared_models/balance_model.nim +++ b/src/app/modules/shared_models/balance_model.nim @@ -1,4 +1,4 @@ -import NimQml, Tables, strutils, strformat +import NimQml, Tables, strutils, strformat, algorithm import balance_item import ./currency_amount @@ -75,8 +75,13 @@ QtObject: of "address": result = $item.address of "balance": result = $item.balance + + proc cmpBalances*(x, y: Item): int = + cmp(x.balance.getAmount(), y.balance.getAmount()) + proc setItems*(self: BalanceModel, items: seq[Item]) = self.beginResetModel() self.items = items + self.items.sort(cmpBalances, SortOrder.Descending) self.endResetModel() self.countChanged() diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index 3a4567d1bd..014c0ae0b2 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -358,13 +358,14 @@ Rectangle { visible: tagsRepeater.count > 0 anchors.top: statusListItemTertiaryTitle.bottom anchors.topMargin: visible ? 8 : 0 - width: Math.min(statusListItemTagsSlotInline.width, parent.width) + width: Math.min(statusListItemTagsSlotInline.width, statusListItemTagsSlotInline.availableWidth) height: visible ? statusListItemTagsSlotInline.height : 0 clip: true interactive: contentWidth > width Row { id: statusListItemTagsSlotInline + readonly property real availableWidth: root.width - iconOrImage.width - root.rightPadding - 2*root.leftPadding spacing: tagsRepeater.count > 0 ? 10 : 0 Repeater { diff --git a/ui/StatusQ/src/StatusQ/Core/LocaleUtils.qml b/ui/StatusQ/src/StatusQ/Core/LocaleUtils.qml index 67771a7d8c..3016b28a7a 100644 --- a/ui/StatusQ/src/StatusQ/Core/LocaleUtils.qml +++ b/ui/StatusQ/src/StatusQ/Core/LocaleUtils.qml @@ -146,7 +146,8 @@ QtObject { var amount var displayDecimals const numIntegerDigits = integralPartLength(currencyAmount.amount) - const maxDigits = 10 + const maxDigits = 11 // We add "B" suffix only after 999 Billion + const maxDigitsToShowDecimal = 6 // We do not display decimal places after 1 million // For large numbers, we use the short scale system (https://en.wikipedia.org/wiki/Long_and_short_scales) // and 2 decimal digits. if (numIntegerDigits > maxDigits && !optRawAmount) { @@ -157,7 +158,13 @@ QtObject { // For normal numbers, we show the whole integral part and as many decimal places not // not to exceed the maximum amount = currencyAmount.amount - displayDecimals = Math.min(optDisplayDecimals, Math.max(0, maxDigits - numIntegerDigits)) + // For numbers over 1M , dont show decimal places + if(numIntegerDigits > maxDigitsToShowDecimal) { + displayDecimals = 0 + } + else { + displayDecimals = Math.min(optDisplayDecimals, Math.max(0, maxDigits - numIntegerDigits)) + } } amountStr = numberToLocaleString(amount, displayDecimals, locale) if (optStripTrailingZeroes) { diff --git a/ui/imports/shared/controls/TokenBalancePerChainDelegate.qml b/ui/imports/shared/controls/TokenBalancePerChainDelegate.qml index 804104f7b0..c3b485aefa 100644 --- a/ui/imports/shared/controls/TokenBalancePerChainDelegate.qml +++ b/ui/imports/shared/controls/TokenBalancePerChainDelegate.qml @@ -15,6 +15,23 @@ StatusListItem { signal tokenSelected(var selectedToken) signal tokenHovered(var selectedToken, bool hovered) + QtObject { + id: d + + readonly property int indexesThatCanBeShown: Math.floor((root.statusListItemInlineTagsSlot.availableWidth - compactRow.width)/statusListItemInlineTagsSlot.children[0].width)-1 + + function selectToken() { + root.tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals}) + } + } + + Connections { + target: root.sensor + function onContainsMouseChanged() { + root.tokenHovered({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals}, root.sensor.containsMouse) + } + } + title: name titleAsideText: symbol statusListItemTitleAside.font.pixelSize: 15 @@ -25,29 +42,23 @@ StatusListItem { asset.height: 32 statusListItemLabel.anchors.verticalCenterOffset: -12 statusListItemLabel.color: Theme.palette.directColor1 - statusListItemInlineTagsSlot.spacing: sensor.containsMouse ? 0 : -8 + statusListItemInlineTagsSlot.spacing: 0 tagsModel: balances.count > 0 ? balances : [] - tagsDelegate: sensor.containsMouse ? expandedItem : compactItem + tagsDelegate: expandedItem + statusListItemInlineTagsSlot.children: Row { + id: compactRow + spacing: -6 + Repeater { + model: balances.count > 0 ? balances : [] + delegate: compactItem + } + } + radius: sensor.containsMouse || root.highlighted ? 0 : 8 color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent" onClicked: d.selectToken() - Connections { - target: root.sensor - function onContainsMouseChanged() { - root.tokenHovered({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals}, root.sensor.containsMouse) - } - } - - QtObject { - id: d - - function selectToken() { - root.tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals}) - } - } - Component { id: compactItem StatusRoundedImage { @@ -55,6 +66,7 @@ StatusListItem { width: 16 height: 16 image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId))) + visible: !root.sensor.containsMouse || index > d.indexesThatCanBeShown } } Component { @@ -69,6 +81,7 @@ StatusListItem { asset.height: 16 asset.isImage: true asset.name: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId))) + visible: root.sensor.containsMouse && index <= d.indexesThatCanBeShown } } } diff --git a/ui/imports/shared/controls/WalletAccountListItem.qml b/ui/imports/shared/controls/WalletAccountListItem.qml index 0216f991f5..35ec0d4e53 100644 --- a/ui/imports/shared/controls/WalletAccountListItem.qml +++ b/ui/imports/shared/controls/WalletAccountListItem.qml @@ -25,7 +25,7 @@ StatusListItem { subTitle:{ if(!!modelData) { let elidedAddress = StatusQUtils.Utils.elideText(modelData.address,6,4) - return sensor.containsMouse ? WalletUtils.colorizedChainPrefix(chainShortNames) + Utils.richColorText(elidedAddress, Theme.palette.directColor1): chainShortNames + elidedAddress + return sensor.containsMouse ? WalletUtils.colorizedChainPrefix(chainShortNames) || Utils.richColorText(elidedAddress, Theme.palette.directColor1) : elidedAddress } return "" }