feat(@desktop/wallet): Handle large numbers in the desktop as per new design

1. Support upto numbers 999B
2. No decimal points after 1M

fixes #10590
This commit is contained in:
Khushboo Mehta 2023-05-10 15:04:27 +02:00 committed by Khushboo-dev-cpp
parent dc0e0e6e2a
commit 47d971a3dd
5 changed files with 48 additions and 22 deletions

View File

@ -1,4 +1,4 @@
import NimQml, Tables, strutils, strformat import NimQml, Tables, strutils, strformat, algorithm
import balance_item import balance_item
import ./currency_amount import ./currency_amount
@ -75,8 +75,13 @@ QtObject:
of "address": result = $item.address of "address": result = $item.address
of "balance": result = $item.balance 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]) = proc setItems*(self: BalanceModel, items: seq[Item]) =
self.beginResetModel() self.beginResetModel()
self.items = items self.items = items
self.items.sort(cmpBalances, SortOrder.Descending)
self.endResetModel() self.endResetModel()
self.countChanged() self.countChanged()

View File

@ -358,13 +358,14 @@ Rectangle {
visible: tagsRepeater.count > 0 visible: tagsRepeater.count > 0
anchors.top: statusListItemTertiaryTitle.bottom anchors.top: statusListItemTertiaryTitle.bottom
anchors.topMargin: visible ? 8 : 0 anchors.topMargin: visible ? 8 : 0
width: Math.min(statusListItemTagsSlotInline.width, parent.width) width: Math.min(statusListItemTagsSlotInline.width, statusListItemTagsSlotInline.availableWidth)
height: visible ? statusListItemTagsSlotInline.height : 0 height: visible ? statusListItemTagsSlotInline.height : 0
clip: true clip: true
interactive: contentWidth > width interactive: contentWidth > width
Row { Row {
id: statusListItemTagsSlotInline id: statusListItemTagsSlotInline
readonly property real availableWidth: root.width - iconOrImage.width - root.rightPadding - 2*root.leftPadding
spacing: tagsRepeater.count > 0 ? 10 : 0 spacing: tagsRepeater.count > 0 ? 10 : 0
Repeater { Repeater {

View File

@ -146,7 +146,8 @@ QtObject {
var amount var amount
var displayDecimals var displayDecimals
const numIntegerDigits = integralPartLength(currencyAmount.amount) 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) // For large numbers, we use the short scale system (https://en.wikipedia.org/wiki/Long_and_short_scales)
// and 2 decimal digits. // and 2 decimal digits.
if (numIntegerDigits > maxDigits && !optRawAmount) { if (numIntegerDigits > maxDigits && !optRawAmount) {
@ -157,7 +158,13 @@ QtObject {
// For normal numbers, we show the whole integral part and as many decimal places not // For normal numbers, we show the whole integral part and as many decimal places not
// not to exceed the maximum // not to exceed the maximum
amount = currencyAmount.amount 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) amountStr = numberToLocaleString(amount, displayDecimals, locale)
if (optStripTrailingZeroes) { if (optStripTrailingZeroes) {

View File

@ -15,6 +15,23 @@ StatusListItem {
signal tokenSelected(var selectedToken) signal tokenSelected(var selectedToken)
signal tokenHovered(var selectedToken, bool hovered) 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 title: name
titleAsideText: symbol titleAsideText: symbol
statusListItemTitleAside.font.pixelSize: 15 statusListItemTitleAside.font.pixelSize: 15
@ -25,29 +42,23 @@ StatusListItem {
asset.height: 32 asset.height: 32
statusListItemLabel.anchors.verticalCenterOffset: -12 statusListItemLabel.anchors.verticalCenterOffset: -12
statusListItemLabel.color: Theme.palette.directColor1 statusListItemLabel.color: Theme.palette.directColor1
statusListItemInlineTagsSlot.spacing: sensor.containsMouse ? 0 : -8 statusListItemInlineTagsSlot.spacing: 0
tagsModel: balances.count > 0 ? balances : [] 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 radius: sensor.containsMouse || root.highlighted ? 0 : 8
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent" color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
onClicked: d.selectToken() 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 { Component {
id: compactItem id: compactItem
StatusRoundedImage { StatusRoundedImage {
@ -55,6 +66,7 @@ StatusListItem {
width: 16 width: 16
height: 16 height: 16
image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId))) image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
visible: !root.sensor.containsMouse || index > d.indexesThatCanBeShown
} }
} }
Component { Component {
@ -69,6 +81,7 @@ StatusListItem {
asset.height: 16 asset.height: 16
asset.isImage: true asset.isImage: true
asset.name: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId))) asset.name: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
visible: root.sensor.containsMouse && index <= d.indexesThatCanBeShown
} }
} }
} }

View File

@ -25,7 +25,7 @@ StatusListItem {
subTitle:{ subTitle:{
if(!!modelData) { if(!!modelData) {
let elidedAddress = StatusQUtils.Utils.elideText(modelData.address,6,4) 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 "" return ""
} }