From e4feaa39ac99ee3572a22363209844da9f534630 Mon Sep 17 00:00:00 2001 From: Noelia Date: Thu, 5 May 2022 11:57:39 +0200 Subject: [PATCH] fix(Onboarding/PasswordScreens): UI small fixes (texts, sizes, positions) - Updated finalise button text with the British spelling. - Password warning texts in onboard flow updated to correct size. - Updated StatusQ that fixes button change size after loading. - Updated position of the message error in the Confirmation Screen. Fixes #5607, #5339, #5606 and #5610 NOTE: Updated status-desktop compilation error after StatusQ commit 1a5990f24bd3f2aba87ab62880e39113c63ba015 --- ui/StatusQ | 2 +- .../Onboarding/views/ConfirmPasswordView.qml | 97 +++++++++++-------- .../popups/SendContactRequestModal.qml | 2 +- 3 files changed, 56 insertions(+), 45 deletions(-) diff --git a/ui/StatusQ b/ui/StatusQ index ae1e72fb23..3bdfc3e528 160000 --- a/ui/StatusQ +++ b/ui/StatusQ @@ -1 +1 @@ -Subproject commit ae1e72fb23e1037293c55e5279f5337a13aef19f +Subproject commit 3bdfc3e52817e2e3ce156ac549482405e76150b1 diff --git a/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml b/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml index d8e1a67a6f..4baeb101ea 100644 --- a/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml +++ b/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml @@ -44,75 +44,86 @@ OnboardingBasePage { StatusBaseText { anchors.horizontalCenter: parent.horizontalCenter text: qsTr("You will never be able to recover your password if you lose it.") - font.pixelSize: 12 + font.pixelSize: 15 color: Theme.palette.dangerColor1 } StatusBaseText { anchors.horizontalCenter: parent.horizontalCenter text: qsTr("If you need to, write it using pen and paper and keep in a safe place.") - font.pixelSize: 12 + font.pixelSize: 15 color: Theme.palette.baseColor1 } StatusBaseText { anchors.horizontalCenter: parent.horizontalCenter text: qsTr("If you lose your password you will lose access to your Status profile.") - font.pixelSize: 12 + font.pixelSize: 15 color: Theme.palette.baseColor1 } } - // TODO replace with StatusInput as soon as it supports password - Input { - id: confPswInput - - property bool showPassword: false - + Column { + anchors.horizontalCenter: parent.horizontalCenter + spacing: Style.current.padding width: parent.width - enabled: !submitBtn.loading - placeholderText: qsTr("Confirm you password (again)") - textField.echoMode: showPassword ? TextInput.Normal : TextInput.Password - textField.validator: RegExpValidator { regExp: /^[!-~]{0,64}$/ } // That incudes NOT extended ASCII printable characters less space and a maximum of 64 characters allowed - keepHeight: true - textField.rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2 - onTextChanged: { - errorTxt.text = "" + + // TODO replace with StatusInput as soon as it supports password + Input { + id: confPswInput + + property bool showPassword: false + + width: parent.width + enabled: !submitBtn.loading + placeholderText: qsTr("Confirm you password (again)") + textField.echoMode: showPassword ? TextInput.Normal : TextInput.Password + textField.validator: RegExpValidator { regExp: /^[!-~]{0,64}$/ } // That incudes NOT extended ASCII printable characters less space and a maximum of 64 characters allowed + keepHeight: true + textField.rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2 + onTextChanged: { + errorTxt.text = "" + } + + StatusFlatRoundButton { + id: showHideCurrentIcon + visible: confPswInput.text !== "" + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 16 + width: 24 + height: 24 + icon.name: confPswInput.showPassword ? "hide" : "show" + icon.color: Theme.palette.baseColor1 + + onClicked: confPswInput.showPassword = !confPswInput.showPassword + } } - StatusFlatRoundButton { - id: showHideCurrentIcon - visible: confPswInput.text !== "" - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: 16 - width: 24 - height: 24 - icon.name: confPswInput.showPassword ? "hide" : "show" - icon.color: Theme.palette.baseColor1 - - onClicked: confPswInput.showPassword = !confPswInput.showPassword + StatusBaseText { + id: errorTxt + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: 12 + color: Theme.palette.dangerColor1 + onTextChanged: { + if(text === "") filler.visible = true + else filler.visible = false + } } - } - StatusBaseText { - id: errorTxt - font.pixelSize: 12 - width: parent.width - horizontalAlignment: StatusBaseText.AlignHCenter - color: Theme.palette.dangerColor1 - } - - // Just a column filler to fit the design - Item { - height: Style.current.padding - width: parent.width + // Just a column filler to keep the component height althought errorTxt.text is "" + Item { + id: filler + width: root.width + visible: true + height: errorTxt.height + } } StatusButton { id: submitBtn anchors.horizontalCenter: parent.horizontalCenter - text: qsTr("Finalize Status Password Creation") + text: qsTr("Finalise Status Password Creation") enabled:!submitBtn.loading && confPswInput.text.length >= 6 property Timer sim: Timer { diff --git a/ui/app/AppLayouts/Profile/popups/SendContactRequestModal.qml b/ui/app/AppLayouts/Profile/popups/SendContactRequestModal.qml index f3ff400a46..30795004ee 100644 --- a/ui/app/AppLayouts/Profile/popups/SendContactRequestModal.qml +++ b/ui/app/AppLayouts/Profile/popups/SendContactRequestModal.qml @@ -125,7 +125,7 @@ StatusModal { input.placeholderText: qsTr("Say who you are / why you want to become a contact...") input.multiline: true input.implicitHeight: d.msgHeight - input.verticalAlignmet: TextEdit.AlignTop + input.verticalAlignment: TextEdit.AlignTop validators: [StatusMinLengthValidator { minLength: d.minMsgLength