mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-22 20:40:18 +00:00
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:
parent
dc0e0e6e2a
commit
47d971a3dd
@ -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()
|
||||||
|
@ -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 {
|
||||||
|
@ -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) {
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 ""
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user