status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

StatusRowButton and SlippageSelector as a separate components, api simplified, fixed issue with setting values from outside

This commit is contained in:
Michał Cieślak 2024-05-27 10:39:50 +02:00 committed by Lukáš Tinkl
parent 442111c1ad
commit 824f14e220
4 changed files with 135 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
storybook/pages/StatusButtonRowPage.qml
View File

@ -19,15 +19,10 @@ SplitView {
SplitView.fillWidth: true
SplitView.fillHeight: true
background: Rectangle {
color: Theme.palette.baseColor4
}
StatusButtonRow {
SlippageSelector {
id: buttonRow
symbolValue: ctrlCustomSymbol.text
anchors.centerIn: parent
//currentValue: 1.42
}
}
@ -40,37 +35,27 @@ SplitView {
ColumnLayout {
anchors.fill: parent
RowLayout {
Label {
Layout.fillWidth: true
Label { text: "Custom symbol:" }
TextField {
Layout.fillWidth: true
id: ctrlCustomSymbol
text: " %"
font.weight: Font.Medium
text: "Value: %1".arg(buttonRow.value)
}
Label {
Layout.fillWidth: true
font.weight: Font.Medium
text: "Valid: " + buttonRow.valid//"%1".arg(buttonRow.valid ? "true" : "false")
}
ColumnLayout {
Repeater {
model: [0.1, 0.5, 0.24, 0.8, 120.84]
Button {
text: "set " + modelData
onClicked: buttonRow.value = modelData
}
}
}
Button {
text: "Reset to default"
onClicked: buttonRow.reset()
}
Label {
Layout.fillWidth: true
text: "Model: [%1]".arg(buttonRow.model)
}
Label {
Layout.fillWidth: true
text: "Default value: %1".arg(buttonRow.defaultValue)
}
Label {
Layout.fillWidth: true
font.weight: Font.Medium
text: "Current value: %1".arg(buttonRow.currentValue)
}
Label {
Layout.fillWidth: true
font.weight: Font.Medium
text: "Valid: %1".arg(buttonRow.valid ? "true" : "false")
}
Item { Layout.fillHeight: true }
}

94
ui/imports/shared/controls/SlippageSelector.qml Normal file
View File

@ -0,0 +1,94 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Controls 0.1
Control {
id: root
property double value: 0.5
readonly property bool valid: customInput.visible && customInput.valid
|| buttons.value !== null
onValueChanged: {
if (d.internalUpdate)
return false
const custom = !d.values.includes(value)
if (custom) {
customButton.visible = false
customInput.value = value
} else {
customButton.visible = true
}
}
Component.onCompleted: {
buttons.model.append(d.values.map(i => ({ text: "%L1 %".arg(i), value: i })))
valueChanged()
}
QtObject {
id: d
readonly property var values: [0.1, 0.5, 1]
property bool internalUpdate: false
function update(value) {
internalUpdate = true
root.value = value
internalUpdate = false
}
}
contentItem: RowLayout {
spacing: buttons.spacing
StatusButtonRow {
id: buttons
model: ListModel {}
Binding on value {
value: customInput.visible ? null : root.value
}
onValueChanged: {
if (value === null)
return
d.update(value)
customButton.visible = true
}
}
StatusButton {
id: customButton
objectName: "customButton"
Layout.minimumWidth: 130
text: qsTr("Custom")
onClicked: {
visible = false
customInput.clear()
customInput.forceActiveFocus()
}
}
CurrencyAmountInput {
id: customInput
objectName: "customInput"
Layout.minimumWidth: customButton.Layout.minimumWidth
visible: !customButton.visible
minValue: 0.01
maxValue: 100.0
currencySymbol: "%"
onValueChanged: d.update(value)
}
}
}

97
ui/imports/shared/controls/StatusButtonRow.qml
View File

@ -7,93 +7,36 @@ import StatusQ.Controls 0.1
import utils 1.0
Control {
RowLayout {
id: root
property var model: [0.1, 0.5, 1]
property double defaultValue: 0.5
property string symbolValue: " %"
property string textRole: "text"
property string valueRole: "value"
property alias currentValue: d.currentValue
property alias model: repeater.model
property var value: null
readonly property bool valid: d.currentValue && (d.customInputFocused ? customLoader.item.valid : true)
spacing: Style.current.halfPadding
function reset() {
customLoader.sourceComponent = customButtonComponent
d.currentValue = root.defaultValue
}
Repeater {
id: repeater
Component.onCompleted: {
if (currentValue && !root.model.includes(currentValue))
d.activateCustomInput()
}
objectName: "buttonsRepeater"
QtObject {
id: d
delegate: StatusButton {
readonly property var value: model[root.valueRole]
property double currentValue: root.defaultValue
readonly property bool customInputFocused: customLoader.sourceComponent === customInputComponent && customLoader.item.focus
function activateCustomInput() {
customLoader.sourceComponent = customInputComponent
customLoader.item.forceActiveFocus()
}
}
background: null
contentItem: RowLayout {
spacing: Style.current.halfPadding
Repeater {
objectName: "buttonsRepeater"
model: root.model
delegate: StatusButton {
readonly property double value: modelData
Layout.minimumWidth: 100
Layout.fillWidth: true
type: checked ? StatusBaseButton.Type.Primary : StatusBaseButton.Type.Normal
checkable: true
checked: value === d.currentValue && !d.customInputFocused
text: "%L1%2".arg(modelData).arg(root.symbolValue)
onClicked: d.currentValue = value
}
}
Loader {
id: customLoader
objectName: "customLoader"
Layout.minimumWidth: 130
Layout.minimumWidth: 100
Layout.fillWidth: true
sourceComponent: customButtonComponent
}
}
Component {
id: customButtonComponent
StatusButton {
objectName: "customButton"
text: qsTr("Custom")
onClicked: d.activateCustomInput()
}
}
Component {
id: customInputComponent
CurrencyAmountInput {
objectName: "customInput"
minValue: 0.01
currencySymbol: root.symbolValue
focus: value === d.currentValue
onValueChanged: d.currentValue = value
onFocusChanged: {
if (focus && valid)
d.currentValue = value
else if (!valid)
clear()
}
Component.onCompleted: {
if (d.currentValue && d.currentValue !== root.defaultValue && !root.model.includes(d.currentValue))
value = d.currentValue
}
type: checked ? StatusBaseButton.Type.Primary
: StatusBaseButton.Type.Normal
checkable: true
checked: value === root.value
text: model[root.textRole]
onClicked: root.value = value
}
}
}

1
ui/imports/shared/controls/qmldir
View File

@ -31,6 +31,7 @@ SeedPhraseTextArea 1.0 SeedPhraseTextArea.qml
SendToContractWarning 1.0 SendToContractWarning.qml
SettingsRadioButton 1.0 SettingsRadioButton.qml
ShapeRectangle 1.0 ShapeRectangle.qml
SlippageSelector 1.0 SlippageSelector.qml
SocialLinkPreview 1.0 SocialLinkPreview.qml
StatusButtonRow 1.0 StatusButtonRow.qml
StatusSyncCodeInput 1.0 StatusSyncCodeInput.qml