From f1395a3a0af55fe66d750266a2505c4a42aa98c6 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Tue, 26 Nov 2024 17:34:09 +0100 Subject: [PATCH] feat(@desktop/wallet): Adapt AmountToSend for Simple Send fixes #16703 --- storybook/pages/AmountToSendPage.qml | 37 ++++++++++- storybook/pages/AmountValidatorPage.qml | 15 +++++ .../qmlTests/tests/tst_AmountValidator.qml | 22 +++++++ .../qmlTests/tests/tst_SwapInputPanel.qml | 17 +++++- .../StatusQ/Validators/AmountValidator.qml | 4 ++ .../shared/popups/send/views/AmountToSend.qml | 61 ++++++++++++++++++- 6 files changed, 149 insertions(+), 7 deletions(-) diff --git a/storybook/pages/AmountToSendPage.qml b/storybook/pages/AmountToSendPage.qml index 0d2662a905..cff84a25ed 100644 --- a/storybook/pages/AmountToSendPage.qml +++ b/storybook/pages/AmountToSendPage.qml @@ -19,6 +19,8 @@ SplitView { anchors.centerIn: parent + width: 400 + interactive: interactiveCheckBox.checked fiatInputInteractive: fiatInteractiveCheckBox.checked markAsInvalid: markAsInvalidCheckBox.checked @@ -26,7 +28,7 @@ SplitView { mainInputLoading: ctrlMainInputLoading.checked bottomTextLoading: ctrlBottomTextLoading.checked - caption: "Amount to send" + caption: captionField.text decimalPoint: decimalPointRadioButton.checked ? "." : "," price: parseFloat(priceTextField.text) @@ -35,6 +37,10 @@ SplitView { formatFiat: balance => `${balance.toLocaleString(Qt.locale())} USD` formatBalance: balance => `${balance.toLocaleString(Qt.locale())} ETH` + + dividerVisible: ctrlDividerVisible.checked + selectedSymbol: ctrlShowMainInputSymbol.checked ? amountToSend.fiatMode ? "USD": "ETH": "" + progressivePixelReduction: ctrlProgressivePixelReduction.checked } } @@ -46,6 +52,19 @@ SplitView { ColumnLayout { spacing: 15 + + RowLayout { + Label { + text: "Caption" + } + + TextField { + id: captionField + + text: "Amount to send" + } + } + RowLayout { Label { text: "Price" @@ -119,6 +138,22 @@ SplitView { id: ctrlBottomTextLoading text: "Bottom text loading" } + + CheckBox { + id: ctrlDividerVisible + text: "Divider" + } + + CheckBox { + id: ctrlProgressivePixelReduction + text: "Progressive Pixel Reduction" + checked: true + } + + CheckBox { + id: ctrlShowMainInputSymbol + text: "Show Main Input Symbol" + } } Label { diff --git a/storybook/pages/AmountValidatorPage.qml b/storybook/pages/AmountValidatorPage.qml index e349a114ee..154aeaf480 100644 --- a/storybook/pages/AmountValidatorPage.qml +++ b/storybook/pages/AmountValidatorPage.qml @@ -20,6 +20,7 @@ Item { maxIntegralDigits: maxIntegralDigitsSpinBox.value maxDecimalDigits: maxDecimalDigitsSpinBox.value + maxDigits: maxTotalDigitsSpinBox.value } } @@ -80,6 +81,20 @@ Item { value: 5 } } + + RowLayout { + Layout.alignment: Qt.AlignHCenter + + Label { + text: "Max total digits:" + } + + SpinBox { + id: maxTotalDigitsSpinBox + + value: maxIntegralDigitsSpinBox.value + maxDecimalDigitsSpinBox.value + } + } } } diff --git a/storybook/qmlTests/tests/tst_AmountValidator.qml b/storybook/qmlTests/tests/tst_AmountValidator.qml index ed46469327..d23de68a6e 100644 --- a/storybook/qmlTests/tests/tst_AmountValidator.qml +++ b/storybook/qmlTests/tests/tst_AmountValidator.qml @@ -171,5 +171,27 @@ Item { compare(textField.acceptableInput, true) compare(textField.text, ".22") } + + function test_maxTotalDigits() { + textField.text = "1234567891." + textField.forceActiveFocus() + textField.validator.maxDecimalDigits = 18 + textField.validator.maxDigits = 15 + textField.cursorPosition = 11 + + type(Qt.Key_1) + type(Qt.Key_2) + type(Qt.Key_3) + type(Qt.Key_4) + type(Qt.Key_5) + + compare(textField.acceptableInput, true) + compare(textField.text, "1234567891.12345") + + type(Qt.Key_6) + + compare(textField.acceptableInput, true) + compare(textField.text, "1234567891.12345") + } } } diff --git a/storybook/qmlTests/tests/tst_SwapInputPanel.qml b/storybook/qmlTests/tests/tst_SwapInputPanel.qml index 7fc41ecdcf..41347b49a4 100644 --- a/storybook/qmlTests/tests/tst_SwapInputPanel.qml +++ b/storybook/qmlTests/tests/tst_SwapInputPanel.qml @@ -176,7 +176,11 @@ Item { const amountToSendInput = findChild(controlUnderTest, "amountToSendInput") verify(!!amountToSendInput) - mouseClick(amountToSendInput) + + const amountToSend_textField = findChild(controlUnderTest, "amountToSend_textField") + verify(!!amountToSend_textField) + + mouseClick(amountToSend_textField) waitForRendering(amountToSendInput) verify(amountToSendInput.cursorVisible) @@ -221,7 +225,11 @@ Item { const amountToSendInput = findChild(controlUnderTest, "amountToSendInput") verify(!!amountToSendInput) - mouseClick(amountToSendInput) + + const amountToSend_textField = findChild(controlUnderTest, "amountToSend_textField") + verify(!!amountToSend_textField) + + mouseClick(amountToSend_textField) waitForRendering(amountToSendInput) verify(amountToSendInput.cursorVisible) @@ -398,10 +406,13 @@ Item { const amountToSendInput = findChild(controlUnderTest, "amountToSendInput") verify(!!amountToSendInput) + const amountToSend_textField = findChild(controlUnderTest, "amountToSend_textField") + verify(!!amountToSend_textField) + const bottomItemText = findChild(amountToSendInput, "bottomItemText") verify(!!bottomItemText) - mouseClick(amountToSendInput) + mouseClick(amountToSend_textField) // enter 5.42 as entered amount keyClick(Qt.Key_5) keyClick(Qt.Key_Period) diff --git a/ui/StatusQ/src/StatusQ/Validators/AmountValidator.qml b/ui/StatusQ/src/StatusQ/Validators/AmountValidator.qml index 1d746110f5..ca3bfd3f95 100644 --- a/ui/StatusQ/src/StatusQ/Validators/AmountValidator.qml +++ b/ui/StatusQ/src/StatusQ/Validators/AmountValidator.qml @@ -24,6 +24,7 @@ GenericValidator { property string decimalPoint: Qt.locale(locale).decimalPoint property int maxIntegralDigits: 10 property int maxDecimalDigits: 10 + property int maxDigits: maxIntegralDigits + maxDecimalDigits validate: { if (input.length === 0) @@ -52,6 +53,9 @@ GenericValidator { const [integral, decimal] = pointsCount ? delocalized.split(".") : [delocalized, ""] + if ((integral.length + decimal.length) > root.maxDigits) + return GenericValidator.Invalid + if (integral.length > root.maxIntegralDigits) return GenericValidator.Invalid diff --git a/ui/imports/shared/popups/send/views/AmountToSend.qml b/ui/imports/shared/popups/send/views/AmountToSend.qml index 17a49cda78..b1b67b6c53 100644 --- a/ui/imports/shared/popups/send/views/AmountToSend.qml +++ b/ui/imports/shared/popups/send/views/AmountToSend.qml @@ -55,6 +55,19 @@ Control { property alias caption: captionText.text property bool interactive: true + /* Boolean flag decides whether divider is shown between main input + area and bottom text */ + property bool dividerVisible + + /* Boolean flag decides whether the main input text area's fontsize reduces + as more and more characters are added. + True by default */ + property bool progressivePixelReduction: true + + /* This string holds the current main input area's currency symbol (fiat or crypto) + Not set = not shown */ + property string selectedSymbol + readonly property bool cursorVisible: textField.cursorVisible readonly property alias placeholderText: textField.placeholderText @@ -155,6 +168,22 @@ Control { multiplier), SQUtils.AmountsArithmetic.fromNumber(price)).toFixed() } + + /* Incase we dont have progressing font size reduction we only + allow users to enter digits until there is place left */ + function getMaxDigitsAllowed() { + if (root.progressivePixelReduction) { + return validator.maxDecimalDigits + validator.maxIntegralDigits + } else { + let availableSpaceForAmount = root.availableWidth - currencyField.contentWidth - layout.spacing + return Math.floor(availableSpaceForAmount/textMetrics.tightBoundingRect.width) + } + } + + readonly property TextMetrics textMetrics: TextMetrics { + font: textField.font + text: "0" + } } contentItem: ColumnLayout { @@ -173,13 +202,14 @@ Control { } RowLayout { + id: layout + spacing: 4 + StatusTextField { id: textField objectName: "amountToSend_textField" - Layout.fillWidth: true - implicitHeight: 44 padding: 0 background: null @@ -198,11 +228,16 @@ Control { + "0".repeat(root.fiatDecimalPlaces) } - font.pixelSize: Utils.getFontSizeBasedOnLetterCount(text) + font.pixelSize:{ + if (!root.progressivePixelReduction) + return 34 + return Utils.getFontSizeBasedOnLetterCount(text) + } validator: AmountValidator { id: validator + maxDigits: d.getMaxDigitsAllowed() maxDecimalDigits: d.fiatMode ? root.fiatDecimalPlaces : root.multiplierIndex locale: root.locale.name @@ -215,6 +250,26 @@ Control { Layout.preferredHeight: textField.height visible: root.mainInputLoading } + StatusBaseText { + id: currencyField + + objectName: "amountToSend_currencyField" + + Layout.alignment: Qt.AlignVCenter + Layout.topMargin: 10 + + color: Theme.palette.directColor5 + text: selectedSymbol + font.pixelSize: Theme.additionalTextSize + } + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 1 + Layout.bottomMargin: 12 + color: Theme.palette.baseColor2 + visible: root.dividerVisible } StatusBaseText {