From 824f14e2202d04a0e12f042f35935cdc5bca4bb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Mon, 27 May 2024 10:39:50 +0200 Subject: [PATCH] StatusRowButton and SlippageSelector as a separate components, api simplified, fixed issue with setting values from outside --- storybook/pages/StatusButtonRowPage.qml | 55 ++++------- .../shared/controls/SlippageSelector.qml | 94 ++++++++++++++++++ .../shared/controls/StatusButtonRow.qml | 97 ++++--------------- ui/imports/shared/controls/qmldir | 1 + 4 files changed, 135 insertions(+), 112 deletions(-) create mode 100644 ui/imports/shared/controls/SlippageSelector.qml diff --git a/storybook/pages/StatusButtonRowPage.qml b/storybook/pages/StatusButtonRowPage.qml index 36d7675dde..7a6f029082 100644 --- a/storybook/pages/StatusButtonRowPage.qml +++ b/storybook/pages/StatusButtonRowPage.qml @@ -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 } } diff --git a/ui/imports/shared/controls/SlippageSelector.qml b/ui/imports/shared/controls/SlippageSelector.qml new file mode 100644 index 0000000000..0055d71123 --- /dev/null +++ b/ui/imports/shared/controls/SlippageSelector.qml @@ -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) + } + } +} diff --git a/ui/imports/shared/controls/StatusButtonRow.qml b/ui/imports/shared/controls/StatusButtonRow.qml index f590c3ef38..602909fb78 100644 --- a/ui/imports/shared/controls/StatusButtonRow.qml +++ b/ui/imports/shared/controls/StatusButtonRow.qml @@ -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 } } } diff --git a/ui/imports/shared/controls/qmldir b/ui/imports/shared/controls/qmldir index 6d653d0625..da1f5f9085 100644 --- a/ui/imports/shared/controls/qmldir +++ b/ui/imports/shared/controls/qmldir @@ -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