chore: Update StatusBaseButton content item layout
- introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
This commit is contained in:
Lukáš Tinkl
Lukáš Tinkl
parent
dae95c7918
commit
fe9bb7d398
|
|
@ -221,6 +221,10 @@ ListModel {
|
|||
title: "UserAgreementPopup"
|
||||
section: "Popups"
|
||||
}
|
||||
ListElement {
|
||||
title: "StatusButton"
|
||||
section: "Controls"
|
||||
}
|
||||
ListElement {
|
||||
title: "MembersSelector"
|
||||
section: "Components"
|
||||
|
|
|
|||
|
|
@ -215,5 +215,8 @@
|
|||
],
|
||||
"UserAgreementPopup": [
|
||||
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=31450-560694&t=Q4MOViPCoHsTjhs6-0"
|
||||
],
|
||||
"StatusButton": [
|
||||
"https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?type=design&node-id=1-12&t=UHegCbqAa5K7qUKd-0"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,272 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import Storybook 1.0
|
||||
|
||||
SplitView {
|
||||
Logs { id: logs }
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
readonly property var sizesModel: [StatusBaseButton.Size.Tiny, StatusBaseButton.Size.Small, StatusBaseButton.Size.Large]
|
||||
|
||||
readonly property string effectiveEmoji: ctrlEmojiEnabled.checked ? ctrlEmoji.text : ""
|
||||
readonly property int effectiveTextPosition: ctrlTextPosLeft.checked ? StatusBaseButton.TextPosition.Left
|
||||
: StatusBaseButton.TextPosition.Right
|
||||
}
|
||||
|
||||
SplitView {
|
||||
orientation: Qt.Horizontal
|
||||
SplitView.fillWidth: true
|
||||
|
||||
Pane {
|
||||
SplitView.fillWidth: true
|
||||
SplitView.fillHeight: true
|
||||
|
||||
GridLayout {
|
||||
anchors.centerIn: parent
|
||||
rowSpacing: 10
|
||||
columnSpacing: 10
|
||||
columns: 4
|
||||
|
||||
Label { text: "" }
|
||||
Label { text: "Tiny" }
|
||||
Label { text: "Small" }
|
||||
Label { text: "Large" }
|
||||
|
||||
Label {
|
||||
text: "StatusButton"
|
||||
Layout.columnSpan: 4
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label { text: "Text only:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
size: modelData
|
||||
text: ctrlText.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
|
||||
Label { text: "Icon only:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
size: modelData
|
||||
icon.name: ctrlIconName.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
|
||||
Label { text: "Text + icon:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
size: modelData
|
||||
text: ctrlText.text
|
||||
icon.name: ctrlIconName.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
|
||||
Label { text: "Round icon:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
Layout.preferredHeight: width
|
||||
size: modelData
|
||||
icon.name: ctrlIconName.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
isRoundIcon: true
|
||||
radius: height/2
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "StatusFlatButton (no Primary variant)"
|
||||
Layout.columnSpan: 4
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label { text: "Text only:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusFlatButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
size: modelData
|
||||
text: ctrlText.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
|
||||
Label { text: "Icon only:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusFlatButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
size: modelData
|
||||
icon.name: ctrlIconName.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
|
||||
Label { text: "Text + icon:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusFlatButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
size: modelData
|
||||
text: ctrlText.text
|
||||
icon.name: ctrlIconName.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
|
||||
Label { text: "Round icon:" }
|
||||
Repeater {
|
||||
model: d.sizesModel
|
||||
delegate: StatusFlatButton {
|
||||
Layout.preferredWidth: ctrlWidth.value || implicitWidth
|
||||
Layout.preferredHeight: width
|
||||
size: modelData
|
||||
icon.name: ctrlIconName.text
|
||||
asset.emoji: d.effectiveEmoji
|
||||
textPosition: d.effectiveTextPosition
|
||||
type: ctrlType.currentIndex
|
||||
loading: ctrlLoading.checked
|
||||
enabled: ctrlEnabled.checked
|
||||
isRoundIcon: true
|
||||
radius: height/2
|
||||
textFillWidth: ctrlFillWidth.checked
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LogsAndControlsPanel {
|
||||
id: logsAndControlsPanel
|
||||
|
||||
SplitView.minimumWidth: 300
|
||||
SplitView.preferredWidth: 400
|
||||
|
||||
logsView.logText: logs.logText
|
||||
|
||||
ColumnLayout {
|
||||
width: parent.width
|
||||
RowLayout {
|
||||
Label { text: "Text:" }
|
||||
TextField {
|
||||
id: ctrlText
|
||||
placeholderText: "Button text"
|
||||
text: "Foobar"
|
||||
}
|
||||
// enum StatusBaseButton.TextPosition.xxx
|
||||
RadioButton {
|
||||
id: ctrlTextPosLeft
|
||||
text: "left"
|
||||
}
|
||||
RadioButton {
|
||||
id: ctrlTextPosRight
|
||||
text: "right"
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Label { text: "Icon name:" }
|
||||
TextField {
|
||||
id: ctrlIconName
|
||||
placeholderText: "Icon name"
|
||||
text: "gif"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Label { text: "Emoji:" }
|
||||
TextField {
|
||||
id: ctrlEmoji
|
||||
text: "💩"
|
||||
}
|
||||
CheckBox {
|
||||
id: ctrlEmojiEnabled
|
||||
text: "enabled"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Label { text: "Type:" }
|
||||
ComboBox {
|
||||
id: ctrlType
|
||||
model: ["Normal", "Danger", "Primary"] // enum StatusBaseButton.Type.xxx
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Label { text: "Width:" }
|
||||
SpinBox {
|
||||
id: ctrlWidth
|
||||
from: 0
|
||||
to: 280
|
||||
value: 0 // 0 == implicitWidth
|
||||
stepSize: 10
|
||||
textFromValue: function(value, locale) { return value === 0 ? "Implicit" : value }
|
||||
}
|
||||
CheckBox {
|
||||
id: ctrlFillWidth
|
||||
text: "Fill width"
|
||||
}
|
||||
}
|
||||
Switch {
|
||||
id: ctrlLoading
|
||||
text: "Loading"
|
||||
}
|
||||
Switch {
|
||||
id: ctrlEnabled
|
||||
text: "Enabled"
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ SplitView {
|
|||
|
||||
readonly property QtObject mockupModelData: QtObject {
|
||||
property int timestamp: Date.now() / 1000
|
||||
property int txStatus: 0
|
||||
property int txType: ctrlType.currentValue
|
||||
property string from: "0xfB8131c260749c7835a08ccBdb64728De432858E"
|
||||
property string to: "0x3fb81384583b3910BB14Cc72582E8e8a56E83ae9"
|
||||
property bool isNFT: false
|
||||
|
|
@ -22,6 +22,12 @@ SplitView {
|
|||
property string nftImageUrl: Style.png("collectibles/HappyMeow")
|
||||
}
|
||||
|
||||
readonly property QtObject mockupStore: QtObject {
|
||||
function formatCurrencyAmount(cryptoValue, symbol) {
|
||||
return "%1 %2".arg(cryptoValue).arg(symbol)
|
||||
}
|
||||
}
|
||||
|
||||
SplitView {
|
||||
orientation: Qt.Vertical
|
||||
SplitView.fillWidth: true
|
||||
|
|
@ -58,17 +64,8 @@ SplitView {
|
|||
bridgeNetworkName: "Mainnet"
|
||||
feeFiatValue: 10.34
|
||||
feeCryptoValue: 0.013
|
||||
transactionStatus: Constants.TransactionStatus.Pending
|
||||
transactionType: Constants.TransactionType.Send
|
||||
formatCurrencyAmount: function(amount, symbol, options = null, locale = null) {
|
||||
const currencyAmount = {
|
||||
amount: amount,
|
||||
symbol: symbol,
|
||||
displayDecimals: 8,
|
||||
stripTrailingZeroes: true
|
||||
}
|
||||
return LocaleUtils.currencyAmountToLocaleString(currencyAmount, options)
|
||||
}
|
||||
transactionStatus: ctrlStatus.currentValue
|
||||
rootStore: root.mockupStore
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -111,6 +108,7 @@ SplitView {
|
|||
}
|
||||
|
||||
ComboBox {
|
||||
id: ctrlType
|
||||
Layout.fillWidth: true
|
||||
textRole: "name"
|
||||
valueRole: "type"
|
||||
|
|
@ -123,7 +121,6 @@ SplitView {
|
|||
ListElement { name: "Swap"; type: Constants.TransactionType.Swap }
|
||||
ListElement { name: "Bridge"; type: Constants.TransactionType.Bridge }
|
||||
}
|
||||
onActivated: delegate.transactionType = model.get(currentIndex).type
|
||||
}
|
||||
|
||||
Label {
|
||||
|
|
@ -133,16 +130,16 @@ SplitView {
|
|||
}
|
||||
|
||||
ComboBox {
|
||||
id: ctrlStatus
|
||||
Layout.fillWidth: true
|
||||
textRole: "name"
|
||||
valueRole: "type"
|
||||
valueRole: "status"
|
||||
model: ListModel {
|
||||
ListElement { name: "Pending"; status: Constants.TransactionStatus.Pending }
|
||||
ListElement { name: "Failed"; status: Constants.TransactionStatus.Failed }
|
||||
ListElement { name: "Pending"; status: Constants.TransactionStatus.Pending }
|
||||
ListElement { name: "Complete"; status: Constants.TransactionStatus.Complete }
|
||||
ListElement { name: "Finished"; status: Constants.TransactionStatus.Finished }
|
||||
}
|
||||
onActivated: delegate.transactionStatus = model.get(currentIndex).status
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,11 +42,12 @@ SplitView {
|
|||
property var dummyOverview: updateDummyView(StatusColors.colors['black'])
|
||||
|
||||
function updateDummyView(color) {
|
||||
const clr = Utils.getIdForColor(color)
|
||||
dummyOverview = ({
|
||||
name: "helloworld",
|
||||
mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
|
||||
ens: emptyString,
|
||||
color: color,
|
||||
colorId: clr,
|
||||
emoji: "⚽",
|
||||
balanceLoading: false,
|
||||
hasBalanceCache: true,
|
||||
|
|
@ -56,7 +57,6 @@ SplitView {
|
|||
stripTrailingZeroes: false}),
|
||||
isAllAccounts: false,
|
||||
hideWatchAccounts: false
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ SplitView {
|
|||
name: "",
|
||||
mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
|
||||
ens: emptyString,
|
||||
color: "",
|
||||
colorId: "",
|
||||
emoji: "",
|
||||
balanceLoading: false,
|
||||
hasBalanceCache: true,
|
||||
|
|
@ -74,10 +74,7 @@ SplitView {
|
|||
stripTrailingZeroes: false}),
|
||||
isAllAccounts: true,
|
||||
hideWatchAccounts: true,
|
||||
colors: StatusColors.colors['blue2']+ ";" +
|
||||
StatusColors.colors['yellow']+ ";" +
|
||||
StatusColors.colors['green2'] + ";" +
|
||||
StatusColors.colors['red2']
|
||||
colorIds: "purple;pink;magenta"
|
||||
})
|
||||
|
||||
readonly property QtObject connectionStore: QtObject {
|
||||
|
|
@ -169,15 +166,12 @@ SplitView {
|
|||
id: repeater
|
||||
model: Theme.palette.customisationColorsArray
|
||||
delegate: StatusColorRadioButton {
|
||||
radioButtonColor: repeater.model[index]
|
||||
radioButtonColor: modelData
|
||||
checked: index === 0
|
||||
onCheckedChanged: d.updateDummyView(repeater.model[index])
|
||||
onToggled: d.updateDummyView(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
ButtonGroup {
|
||||
buttons: row.children
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ from scripts.settings_names import *
|
|||
# Main:
|
||||
mainWindow_WalletLayout = {"container": statusDesktop_mainWindow, "type": "WalletLayout", "unnamed": 1, "visible": True}
|
||||
mainWallet_LeftTab = {"container": statusDesktop_mainWindow, "objectName": "walletLeftTab", "type": "LeftTabView", "visible": True}
|
||||
mainWallet_Saved_Addresses_Button = {"container": mainWindow_RighPanel, "objectName": "savedAddressesBtn", "type": "StatusButton"}
|
||||
mainWallet_Saved_Addresses_Button = {"container": mainWindow_RighPanel, "objectName": "savedAddressesBtn", "type": "StatusFlatButton"}
|
||||
walletAccounts_StatusListView = {"container": statusDesktop_mainWindow, "objectName": "walletAccountsListView", "type": "StatusListView", "visible": True}
|
||||
walletAccounts_WalletAccountItem_Placeholder = {"container": walletAccounts_StatusListView, "objectName": "walletAccount-%NAME%", "type": "StatusListItem", "visible": True}
|
||||
walletAccount_StatusListItem = {"container": walletAccounts_StatusListView, "objectName": RegularExpression("walletAccount*"), "type": "StatusListItem", "visible": True}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@ Button {
|
|||
Right
|
||||
}
|
||||
|
||||
property StatusAssetSettings asset: StatusAssetSettings { }
|
||||
property StatusAssetSettings asset: StatusAssetSettings {
|
||||
color: d.textColor
|
||||
}
|
||||
|
||||
property bool loading
|
||||
|
||||
|
|
@ -38,7 +40,6 @@ Button {
|
|||
property color textColor
|
||||
property color disabledTextColor
|
||||
property color borderColor: "transparent"
|
||||
property int textAlignment: Qt.AlignVCenter | Qt.AlignHCenter
|
||||
property bool textFillWidth: false
|
||||
|
||||
property int radius: size === StatusBaseButton.Size.Tiny ? 6 : 8
|
||||
|
|
@ -53,6 +54,17 @@ Button {
|
|||
id: d
|
||||
readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
|
||||
readonly property bool iconOnly: root.display === AbstractButton.IconOnly || root.text === ""
|
||||
readonly property int iconSize: {
|
||||
switch(root.size) {
|
||||
case StatusBaseButton.Size.Tiny:
|
||||
return 16
|
||||
case StatusBaseButton.Size.Small:
|
||||
return 20
|
||||
case StatusBaseButton.Size.Large:
|
||||
default:
|
||||
return 24
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
font.family: Theme.palette.baseFont.name
|
||||
|
|
@ -60,16 +72,26 @@ Button {
|
|||
font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13
|
||||
|
||||
horizontalPadding: {
|
||||
if (d.iconOnly)
|
||||
return spacing
|
||||
if (d.iconOnly) {
|
||||
return isRoundIcon ? 8 : spacing
|
||||
}
|
||||
if (root.icon.name) {
|
||||
return size === StatusBaseButton.Size.Large ? 18 : 16
|
||||
switch (size) {
|
||||
case StatusBaseButton.Size.Tiny:
|
||||
return 8
|
||||
case StatusBaseButton.Size.Small:
|
||||
return 16
|
||||
case StatusBaseButton.Size.Large:
|
||||
default:
|
||||
return 18
|
||||
}
|
||||
}
|
||||
return size === StatusBaseButton.Size.Large ? 24 : 12
|
||||
}
|
||||
verticalPadding: {
|
||||
if (d.iconOnly)
|
||||
return spacing
|
||||
if (d.iconOnly) {
|
||||
return isRoundIcon ? 8 : spacing
|
||||
}
|
||||
switch (size) {
|
||||
case StatusBaseButton.Size.Tiny:
|
||||
return 5
|
||||
|
|
@ -83,9 +105,9 @@ Button {
|
|||
|
||||
spacing: root.size === StatusBaseButton.Size.Large ? 6 : 4
|
||||
|
||||
icon.height: 24
|
||||
icon.width: 24
|
||||
icon.color: d.textColor
|
||||
icon.width: d.iconSize
|
||||
icon.height: d.iconSize
|
||||
icon.color: asset.color
|
||||
|
||||
background: Rectangle {
|
||||
radius: root.radius
|
||||
|
|
@ -97,73 +119,86 @@ Button {
|
|||
}
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
spacing: root.spacing
|
||||
contentItem: Item {
|
||||
implicitWidth: layout.implicitWidth
|
||||
implicitHeight: layout.implicitHeight
|
||||
|
||||
Component {
|
||||
id: baseIcon
|
||||
RowLayout {
|
||||
id: layout
|
||||
anchors.centerIn: parent
|
||||
width: root.textFillWidth ? root.availableWidth : Math.min(root.availableWidth, implicitWidth)
|
||||
height: Math.min(root.availableHeight, implicitHeight)
|
||||
spacing: root.spacing
|
||||
|
||||
StatusIcon {
|
||||
icon: root.icon.name
|
||||
rotation: root.asset.rotation
|
||||
opacity: !root.loading && root.icon.name !== ""
|
||||
color: root.icon.color
|
||||
Component {
|
||||
id: baseIcon
|
||||
|
||||
StatusIcon {
|
||||
icon: root.icon.name
|
||||
rotation: root.asset.rotation
|
||||
opacity: !root.loading && root.icon.name !== "" && root.display !== AbstractButton.TextOnly
|
||||
color: root.icon.color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: roundIcon
|
||||
Component {
|
||||
id: roundIcon
|
||||
|
||||
StatusRoundIcon {
|
||||
asset.name: root.icon.name
|
||||
asset.color: root.asset.color
|
||||
asset.bgColor: root.asset.bgColor
|
||||
StatusRoundIcon {
|
||||
opacity: !root.loading && root.icon.name !== "" && root.display !== AbstractButton.TextOnly
|
||||
asset.name: root.icon.name
|
||||
asset.width: d.iconSize
|
||||
asset.height: d.iconSize
|
||||
asset.color: root.icon.color
|
||||
asset.bgColor: root.asset.bgColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: text
|
||||
Component {
|
||||
id: text
|
||||
|
||||
StatusBaseText {
|
||||
opacity: !root.loading
|
||||
font: root.font
|
||||
text: root.text
|
||||
color: d.textColor
|
||||
elide: Text.ElideRight
|
||||
StatusBaseText {
|
||||
opacity: !root.loading
|
||||
font: root.font
|
||||
text: root.text
|
||||
color: d.textColor
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.alignment: root.textAlignment
|
||||
Layout.fillWidth: root.textFillWidth
|
||||
active: root.textPosition === StatusBaseButton.TextPosition.Left && !d.iconOnly
|
||||
visible: active
|
||||
sourceComponent: text
|
||||
}
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
active: root.textPosition === StatusBaseButton.TextPosition.Left && !d.iconOnly
|
||||
visible: active
|
||||
sourceComponent: text
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: iconLoader
|
||||
Loader {
|
||||
id: iconLoader
|
||||
|
||||
Layout.preferredWidth: active ? root.icon.width : 0
|
||||
Layout.preferredHeight: active ? root.icon.height : 0
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
active: root.icon.name !== ""
|
||||
sourceComponent: root.isRoundIcon ? roundIcon : baseIcon
|
||||
}
|
||||
Layout.preferredWidth: active ? root.icon.width : 0
|
||||
Layout.preferredHeight: active ? root.icon.height : 0
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
active: root.icon.name !== ""
|
||||
sourceComponent: root.isRoundIcon ? roundIcon : baseIcon
|
||||
}
|
||||
|
||||
StatusEmoji {
|
||||
Layout.preferredWidth: visible ? root.icon.width : 0
|
||||
Layout.preferredHeight: visible ? root.icon.height : 0
|
||||
visible: root.asset.emoji
|
||||
emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
|
||||
}
|
||||
StatusEmoji {
|
||||
Layout.preferredWidth: visible ? root.icon.width : 0
|
||||
Layout.preferredHeight: visible ? root.icon.height : 0
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
opacity: !root.loading && root.display !== AbstractButton.TextOnly
|
||||
visible: root.asset.emoji
|
||||
emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.alignment: root.textAlignment
|
||||
Layout.fillWidth: root.textFillWidth
|
||||
active: root.textPosition === StatusBaseButton.TextPosition.Right && !d.iconOnly
|
||||
visible: active
|
||||
sourceComponent: text
|
||||
Loader {
|
||||
Layout.fillWidth: true
|
||||
active: root.textPosition === StatusBaseButton.TextPosition.Right && !d.iconOnly
|
||||
visible: active
|
||||
sourceComponent: text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ AbstractButton {
|
|||
spacing: root.spacing
|
||||
StatusIcon {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
icon: root.statusIcon
|
||||
icon: root.statusIcon || root.icon.source || root.icon.name
|
||||
color: root.icon.color
|
||||
width: root.icon.width
|
||||
height: root.icon.height
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ QtObject {
|
|||
property color yinYang
|
||||
}
|
||||
|
||||
property var customisationColorsArray: [
|
||||
readonly property var customisationColorsArray: [
|
||||
customisationColors.blue,
|
||||
customisationColors.purple,
|
||||
customisationColors.orange,
|
||||
|
|
@ -294,7 +294,7 @@ QtObject {
|
|||
customisationColors.yinYang
|
||||
]
|
||||
|
||||
property var communityColorsArray: [
|
||||
readonly property var communityColorsArray: [
|
||||
customisationColors.blue,
|
||||
customisationColors.yellow,
|
||||
customisationColors.magenta,
|
||||
|
|
|
|||
|
|
@ -241,8 +241,6 @@ StatusDropdown {
|
|||
|
||||
Layout.fillWidth: true
|
||||
|
||||
textFillWidth: true
|
||||
|
||||
enabled: {
|
||||
if (root.forceButtonDisabled)
|
||||
return false
|
||||
|
|
|
|||
|
|
@ -69,7 +69,6 @@ Item {
|
|||
hoverColor: Theme.palette.baseColor2
|
||||
|
||||
font.weight: Font.Normal
|
||||
textAlignment: Qt.AlignTop | Qt.AlignHCenter
|
||||
textPosition: StatusBaseButton.TextPosition.Left
|
||||
textColor: Theme.palette.baseColor1
|
||||
text: overview.ens || StatusQUtils.Utils.elideText(overview.mixedcaseAddress, 6, 4)
|
||||
|
|
@ -96,7 +95,6 @@ Item {
|
|||
hoverColor: Theme.palette.baseColor2
|
||||
|
||||
font.weight: Font.Normal
|
||||
textAlignment: Qt.AlignTop | Qt.AlignHCenter
|
||||
textColor: Theme.palette.baseColor1
|
||||
text: overview.hideWatchAccounts ? qsTr("Show watch-only"): qsTr("Hide watch-only")
|
||||
|
||||
|
|
|
|||
|
|
@ -391,23 +391,19 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
contentItem: StatusButton {
|
||||
contentItem: StatusFlatButton {
|
||||
id: savedAddressesBtn
|
||||
|
||||
objectName: "savedAddressesBtn"
|
||||
size: StatusBaseButton.Size.Large
|
||||
normalColor: "transparent"
|
||||
hoverColor: Theme.palette.primaryColor3
|
||||
asset.color: Theme.palette.primaryColor1
|
||||
asset.bgColor: Theme.palette.primaryColor3
|
||||
font.weight: Font.Medium
|
||||
text: qsTr("Saved addresses")
|
||||
icon.name: "address"
|
||||
icon.width: 40
|
||||
icon.height: 40
|
||||
icon.color: Theme.palette.primaryColor1
|
||||
isRoundIcon: true
|
||||
textColor: Theme.palette.directColor1
|
||||
textAlignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
textFillWidth: true
|
||||
spacing: parent.ListView.view.firstItem.statusListItemTitleArea.anchors.leftMargin
|
||||
onClicked: {
|
||||
|
|
|
|||
|
|
@ -349,13 +349,13 @@ StatusListItem {
|
|||
break
|
||||
}
|
||||
if (type === Constants.TransactionType.Swap) {
|
||||
const crypto = rootStore.formatCurrencyAmount(d.swapCryptoValue, d.swapSymbol)
|
||||
const fiat = rootStore.formatCurrencyAmount(d.swapCryptoValue, d.swapSymbol)
|
||||
const crypto = rootStore.formatCurrencyAmount(root.swapCryptoValue, root.swapSymbol)
|
||||
const fiat = rootStore.formatCurrencyAmount(root.swapCryptoValue, root.swapSymbol)
|
||||
valuesString += qsTr("Amount received %1 (%2)").arg(crypto).arg(fiat) + endl2
|
||||
} else if (type === Constants.TransactionType.Bridge) {
|
||||
// Reduce crypto value by fee value
|
||||
const valueInCrypto = rootStore.getCryptoValue(root.fiatValue - feeFiatValue, root.symbol, root.currentCurrency)
|
||||
const crypto = rootStore.formatCurrencyAmount(valueInCrypto, d.symbol)
|
||||
const crypto = rootStore.formatCurrencyAmount(valueInCrypto, root.symbol)
|
||||
const fiat = rootStore.formatCurrencyAmount(root.fiatValue - feeFiatValue, root.currentCurrency)
|
||||
valuesString += qsTr("Amount received %1 (%2)").arg(crypto).arg(fiat) + endl2
|
||||
}
|
||||
|
|
@ -658,11 +658,10 @@ StatusListItem {
|
|||
height: parent.height * 0.7
|
||||
verticalPadding: 0
|
||||
horizontalPadding: radius
|
||||
textFillWidth: true
|
||||
text: qsTr("Retry")
|
||||
size: StatusButton.Small
|
||||
type: StatusButton.Primary
|
||||
visible: !root.loading && root.transactionStatus === Constants.TransactionType.Failed
|
||||
visible: !root.loading && root.transactionStatus === Constants.TransactionStatus.Failed
|
||||
onClicked: root.retryClicked()
|
||||
}
|
||||
|
||||
|
|
@ -705,7 +704,7 @@ StatusListItem {
|
|||
}
|
||||
PropertyChanges {
|
||||
target: root.asset
|
||||
bgBorderWidth: root.transactionStatus === Constants.TransactionType.Failed ? 0 : 1
|
||||
bgBorderWidth: root.transactionStatus === Constants.TransactionStatus.Failed ? 0 : 1
|
||||
width: 34
|
||||
height: 34
|
||||
bgWidth: 56
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ StatusDialog {
|
|||
type: root.isInvitationPending ? StatusBaseButton.Type.Danger
|
||||
: StatusBaseButton.Type.Normal
|
||||
enabled: checkBox.checked || root.isInvitationPending
|
||||
textFillWidth: true
|
||||
onClicked: {
|
||||
if (root.isInvitationPending) {
|
||||
root.cancelMembershipRequest()
|
||||
|
|
|
|||
|
|
@ -384,7 +384,6 @@ Pane {
|
|||
Layout.preferredWidth: height
|
||||
|
||||
visible: !d.isCurrentUser
|
||||
size: StatusBaseButton.Size.Small
|
||||
horizontalPadding: 6
|
||||
verticalPadding: 6
|
||||
icon.name: "more"
|
||||
|
|
|
|||
|
|
@ -731,7 +731,7 @@ QtObject {
|
|||
|
||||
|
||||
function getIdForColor(color){
|
||||
let c = color.toUpperCase()
|
||||
let c = color.toString().toUpperCase()
|
||||
switch(c) {
|
||||
case Theme.palette.customisationColors.blue.toString().toUpperCase():
|
||||
return Constants.walletAccountColors.primary
|
||||
|
|
|
|||
Loading…
Reference in New Issue