From 18ad29338c14e7ed792f23fd5fd0baf344863242 Mon Sep 17 00:00:00 2001 From: Gaelle Braud Date: Thu, 21 Dec 2023 11:45:19 +0100 Subject: [PATCH] UI fixes : digit input (indicator), error messages (text + colors), pages item sizes, popup background --- Linphone/view/App/Main.qml | 14 ++-- Linphone/view/CMakeLists.txt | 1 + Linphone/view/Item/ComboBox.qml | 39 ++++++++--- Linphone/view/Item/DigitInput.qml | 58 ++++++++-------- Linphone/view/Item/ErrorText.qml | 55 ++++++++++++++++ Linphone/view/Item/Form/LoginForm.qml | 57 +++++++--------- Linphone/view/Item/PhoneNumberComboBox.qml | 26 ++++---- Linphone/view/Item/PhoneNumberInput.qml | 4 +- Linphone/view/Item/TextInput.qml | 45 +++++++------ Linphone/view/Page/Login/LoginPage.qml | 17 ++--- .../view/Page/Login/RegisterCheckingPage.qml | 31 +++++---- Linphone/view/Page/Login/RegisterPage.qml | 53 +++++++-------- Linphone/view/Page/Login/SIPLoginPage.qml | 66 +++++-------------- 13 files changed, 262 insertions(+), 204 deletions(-) create mode 100644 Linphone/view/Item/ErrorText.qml diff --git a/Linphone/view/App/Main.qml b/Linphone/view/App/Main.qml index db4f8e7db..79e886dca 100644 --- a/Linphone/view/App/Main.qml +++ b/Linphone/view/App/Main.qml @@ -23,17 +23,17 @@ Window { AccountProxy{ id: accountProxy - onHaveAccountChanged: { - if(haveAccount) - mainWindowStackView.replace(mainPage, StackView.Immediate) - else - mainWindowStackView.replace(loginPage, StackView.Immediate) - } + // onHaveAccountChanged: { + // if(haveAccount) + // mainWindowStackView.replace(mainPage, StackView.Immediate) + // else + // mainWindowStackView.replace(loginPage, StackView.Immediate) + // } } StackView { id: mainWindowStackView anchors.fill: parent - initialItem: accountProxy.haveAccount ? mainPage : welcomePage + initialItem: welcomePage } Component { id: welcomePage diff --git a/Linphone/view/CMakeLists.txt b/Linphone/view/CMakeLists.txt index dc1cdd7a2..95711d9f9 100644 --- a/Linphone/view/CMakeLists.txt +++ b/Linphone/view/CMakeLists.txt @@ -30,6 +30,7 @@ list(APPEND _LINPHONEAPP_QML_FILES view/Item/DesktopPopup.qml view/Item/DigitInput.qml view/Item/EffectImage.qml + view/Item/ErrorText.qml view/Item/NumericPad.qml view/Item/PhoneNumberComboBox.qml view/Item/PhoneNumberInput.qml diff --git a/Linphone/view/Item/ComboBox.qml b/Linphone/view/Item/ComboBox.qml index c55ecd5e9..7a3b94c78 100644 --- a/Linphone/view/Item/ComboBox.qml +++ b/Linphone/view/Item/ComboBox.qml @@ -1,13 +1,14 @@ import QtQuick import QtQuick.Controls as Control import QtQuick.Layouts 1.0 +import QtQuick.Effects import Linphone ColumnLayout { id: mainItem property string label: "" - property int backgroundWidth: 200 * DefaultStyle.dp // Usage : each item of the model list must be {text: ..., img: ...} + // If string list, only text part of the delegate will be filled property var modelList: [] readonly property string currentText: selectedItemText.text property bool enableBackgroundColors: true @@ -27,9 +28,9 @@ ColumnLayout { Control.ComboBox { id: combobox model: mainItem.modelList - width: mainItem.backgroundWidth + Layout.preferredWidth: mainItem.width background: Rectangle { - implicitWidth: mainItem.backgroundWidth + implicitWidth: mainItem.width implicitHeight: 49 * DefaultStyle.dp radius: 63 * DefaultStyle.dp color: combobox.enabled ? DefaultStyle.grey_100 : DefaultStyle.grey_200 @@ -53,6 +54,10 @@ ColumnLayout { id: selectedItemText color: combobox.enabled ? DefaultStyle.main2_600 : DefaultStyle.grey_400 elide: Text.ElideRight + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } anchors.left: selectedItemImg.right anchors.leftMargin: selectedItemImg.visible ? 5 * DefaultStyle.dp : 10 * DefaultStyle.dp anchors.right: parent.right @@ -98,7 +103,7 @@ ColumnLayout { highlight: Rectangle { width: listView.width color: DefaultStyle.main2_300 - radius: 63 * DefaultStyle.dp + radius: 15 * DefaultStyle.dp y: listView.currentItem? listView.currentItem.y : 0 } @@ -127,6 +132,10 @@ ColumnLayout { ? modelData : "" elide: Text.ElideRight + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } anchors.verticalCenter: parent.verticalCenter anchors.left: delegateImg.right anchors.leftMargin: delegateImg.visible ? 5 * DefaultStyle.dp : 10 * DefaultStyle.dp @@ -140,7 +149,7 @@ ColumnLayout { Rectangle { anchors.fill: parent opacity: 0.1 - radius: 63 * DefaultStyle.dp + radius: 15 * DefaultStyle.dp color: DefaultStyle.main2_500main visible: parent.containsMouse } @@ -165,11 +174,23 @@ ColumnLayout { listView.positionViewAtIndex(listView.currentIndex, ListView.Center) } - background: Rectangle { - implicitWidth: mainItem.backgroundWidth + background: Item { + implicitWidth: mainItem.width implicitHeight: 30 * DefaultStyle.dp - radius: 63 * DefaultStyle.dp - } + Rectangle { + id: cboxBg + anchors.fill: parent + radius: 15 * DefaultStyle.dp + } + MultiEffect { + anchors.fill: cboxBg + source: cboxBg + shadowEnabled: true + shadowColor: DefaultStyle.grey_1000 + shadowBlur: 1 + shadowOpacity: 0.1 + } + } } } } diff --git a/Linphone/view/Item/DigitInput.qml b/Linphone/view/Item/DigitInput.qml index d4919df22..fa2df97a4 100644 --- a/Linphone/view/Item/DigitInput.qml +++ b/Linphone/view/Item/DigitInput.qml @@ -6,42 +6,46 @@ Control.TextField { id: mainItem property int inputSize: 100 * DefaultStyle.dp color: activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_500main - rightPadding: width * 0.32 - leftPadding: width * 0.32 - topPadding: height * 0.2 - bottomPadding: height * 0.2 validator: IntValidator{bottom: 0; top: 9} - // horizontalAlignment: TextInput.AlignHCenter - // verticalAlignment: TextInput.AlignVCenter + + width: inputSize * 0.9 + height: inputSize + horizontalAlignment: TextInput.AlignHCenter + verticalAlignment: TextInput.AlignVCenter // just reserve the space for the background placeholderText: "0" placeholderTextColor: "transparent" + // cursorVisible is overwritten on focus change so useless to hide the cursor + cursorDelegate: Item{} + // horizontalAlignment: Control.TextField.AlignHCenter font.family: DefaultStyle.defaultFont font.pixelSize: inputSize / 2 font.weight: 300 * DefaultStyle.dp - background: Rectangle { - id: background - border.width: Math.max(DefaultStyle.dp, 1) - border.color: mainItem.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_500main - radius: mainItem.inputSize * 0.15 - width: mainItem.inputSize * 0.9 - height: mainItem.inputSize + background: Item { + anchors.fill: parent + // width: mainItem.inputSize * 0.9 + // height: mainItem.inputSize + Rectangle { + id: background + border.width: Math.max(DefaultStyle.dp, 1) + border.color: mainItem.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_500main + radius: mainItem.inputSize * 0.15 + width: mainItem.inputSize * 0.9 + height: mainItem.inputSize + } + Rectangle { + id: indicator + visible: mainItem.activeFocus + color: DefaultStyle.main1_500_main + height : Math.max(0.5, 1 * DefaultStyle.dp) + width: mainItem.inputSize * 0.67 + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: (mainItem.inputSize / 8) * DefaultStyle.dp + } } - // cursorDelegate: Rectangle { - // visible: mainItem.activeFocus - // // width: mainItem.cursorRectangle.width - // // height: mainItem.cursorRectangle.height - inputSize/5 - // x: background.x - // y: background.height - inputSize/8 - // transform: Rotation {angle: -90} - // // anchors.bottom: parent.bottom - // // anchors.left: parent.left - // // anchors.bottomMargin: inputSize/8 - // // transform: [/*Translate {x: mainItem.cursorRectangle.height},*/ Rotation {angle: -90}] - // color:DefaultStyle.main1_500_main - // } -} +} \ No newline at end of file diff --git a/Linphone/view/Item/ErrorText.qml b/Linphone/view/Item/ErrorText.qml new file mode 100644 index 000000000..35944060d --- /dev/null +++ b/Linphone/view/Item/ErrorText.qml @@ -0,0 +1,55 @@ +import QtQuick +import QtQuick.Controls as Control +import QtQuick.Layouts 1.0 +import QtQuick.Effects +import Linphone + +Text { + id: mainItem + color: DefaultStyle.danger_500main + opacity: 0 + font { + pixelSize: 13 * DefaultStyle.dp + weight: 600 * DefaultStyle.dp + } + states: [ + State{ + name: "Visible" + PropertyChanges{target: mainItem; opacity: 1.0} + }, + State{ + name:"Invisible" + PropertyChanges{target: mainItem; opacity: 0.0} + } + ] + transitions: [ + Transition { + from: "Visible" + to: "Invisible" + NumberAnimation { + property: "opacity" + duration: 1000 + } + // NumberAnimation { + // property: "visible" + // duration: 1100 + // } + } + ] + Timer { + id: autoHideErrorMessage + interval: 2500 + onTriggered: mainItem.state = "Invisible" + } + + onOpacityChanged: if (opacity === 1) autoHideErrorMessage.restart() + + Connections { + target: mainItem + onTextChanged: { + if (mainItem.text.length > 0) { + errorText.state = "Visible" + } + } + } +} \ No newline at end of file diff --git a/Linphone/view/Item/Form/LoginForm.qml b/Linphone/view/Item/Form/LoginForm.qml index 8caeb6570..73c205de0 100644 --- a/Linphone/view/Item/Form/LoginForm.qml +++ b/Linphone/view/Item/Form/LoginForm.qml @@ -13,52 +13,41 @@ ColumnLayout { id: username label: "Username" mandatory: true - textInputWidth: 250 * DefaultStyle.dp + enableErrorText: true + + Binding on background.border.color { + when: errorText.opacity != 0 + value: DefaultStyle.danger_500main + } + Binding on textField.color { + when: errorText.opacity != 0 + value: DefaultStyle.danger_500main + } } TextInput { id: password label: "Password" mandatory: true hidden: true - textInputWidth: 250 * DefaultStyle.dp + enableErrorText: true + + Binding on background.border.color { + when: errorText.opacity != 0 + value: DefaultStyle.danger_500main + } + Binding on textField.color { + when: errorText.opacity != 0 + value: DefaultStyle.danger_500main + } } - Text { + ErrorText { id: errorText - text: "Connection has failed. Please verify your credentials" - color: DefaultStyle.danger_500main - opacity: 0 - states: [ - State{ - name: "Visible" - PropertyChanges{target: errorText; opacity: 1.0} - }, - State{ - name:"Invisible" - PropertyChanges{target: errorText; opacity: 0.0} - } - ] - transitions: [ - Transition { - from: "Visible" - to: "Invisible" - NumberAnimation { - property: "opacity" - duration: 1000 - } - } - ] - Timer { - id: autoHideErrorMessage - interval: 2500 - onTriggered: errorText.state = "Invisible" - } Connections { target: LoginPageCpp onRegistrationStateChanged: { if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Failed) { - errorText.state = "Visible" - autoHideErrorMessage.restart() + errorText.text = qsTr("Le couple identifiant mot de passe ne correspont pas") } else if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) { mainItem.connectionSucceed() } @@ -69,7 +58,7 @@ ColumnLayout { RowLayout { id: lastFormLineLayout Button { - text: "Log in" + text: qsTr("Connexion") Layout.rightMargin: 20 * DefaultStyle.dp onClicked: { username.errorMessage = "" diff --git a/Linphone/view/Item/PhoneNumberComboBox.qml b/Linphone/view/Item/PhoneNumberComboBox.qml index 0c85f682a..ad9bb452f 100644 --- a/Linphone/view/Item/PhoneNumberComboBox.qml +++ b/Linphone/view/Item/PhoneNumberComboBox.qml @@ -190,18 +190,22 @@ ColumnLayout { listView.positionViewAtIndex(listView.currentIndex, ListView.Center) } - background: Rectangle { + background: Item { anchors.fill: parent - radius: 15 * DefaultStyle.dp - color: DefaultStyle.grey_100 - } - - MultiEffect { - anchors.fill: listPopup - source: listPopup - shadowEnabled: true - shadowColor: DefaultStyle.grey_1000 - shadowBlur: 1 + Rectangle { + id: popupBg + anchors.fill: parent + radius: 15 * DefaultStyle.dp + color: DefaultStyle.grey_100 + } + MultiEffect { + anchors.fill: popupBg + source: popupBg + shadowEnabled: true + shadowColor: DefaultStyle.grey_1000 + shadowBlur: 1 + shadowOpacity: 0.1 + } } } } diff --git a/Linphone/view/Item/PhoneNumberInput.qml b/Linphone/view/Item/PhoneNumberInput.qml index 898b04ef4..b46cf080f 100644 --- a/Linphone/view/Item/PhoneNumberInput.qml +++ b/Linphone/view/Item/PhoneNumberInput.qml @@ -27,8 +27,8 @@ ColumnLayout { } Rectangle { - implicitWidth: mainItem.textInputWidth - implicitHeight: 49 * DefaultStyle.dp + Layout.preferredWidth: mainItem.textInputWidth + Layout.preferredHeight: 49 * DefaultStyle.dp radius: 63 * DefaultStyle.dp color: DefaultStyle.grey_100 border.color: mainItem.errorMessage.length > 0 diff --git a/Linphone/view/Item/TextInput.qml b/Linphone/view/Item/TextInput.qml index 14544ce54..42e886fe9 100644 --- a/Linphone/view/Item/TextInput.qml +++ b/Linphone/view/Item/TextInput.qml @@ -16,6 +16,12 @@ ColumnLayout { property bool fillWidth: false property bool enableBackgroundColors: true property string initialText + + property bool enableErrorText: false + + property alias textField: textField + property alias background: input + readonly property string text: textField.text readonly property bool hasActiveFocus: textField.activeFocus @@ -50,21 +56,24 @@ ColumnLayout { if (mainItem.fillWidth) Layout.fillWidth = true } - implicitWidth: mainItem.textInputWidth - implicitHeight: 49 * DefaultStyle.dp + Layout.preferredWidth: mainItem.textInputWidth + Layout.preferredHeight: 49 * DefaultStyle.dp radius: 79 * DefaultStyle.dp color: mainItem.enableBackgroundColors ? DefaultStyle.grey_100 : "transparent" border.color: mainItem.enableBackgroundColors - ? (mainItem.errorMessage.length > 0 - ? DefaultStyle.danger_500main - : textField.activeFocus - ? DefaultStyle.main1_500_main - : DefaultStyle.grey_200) - : "transparent" + ? errorText.opacity === 0 + ? textField.activeFocus + ? DefaultStyle.main1_500_main + : DefaultStyle.grey_200 + : DefaultStyle.danger_500main + : "transparent" + Control.TextField { id: textField anchors.left: parent.left + anchors.leftMargin: 10 * DefaultStyle.dp anchors.right: eyeButton.visible ? eyeButton.left : parent.right + anchors.rightMargin: eyeButton.visible ? 0 : 10 * DefaultStyle.dp anchors.verticalCenter: parent.verticalCenter placeholderText: mainItem.placeholderText echoMode: (mainItem.hidden && !eyeButton.checked) ? TextInput.Password : TextInput.Normal @@ -73,7 +82,7 @@ ColumnLayout { pixelSize: 14 * DefaultStyle.dp weight: 400 * DefaultStyle.dp } - color: DefaultStyle.main2_600 + color: errorText.opacity === 0 ? DefaultStyle.main2_600 : DefaultStyle.danger_500main selectByMouse: true validator: mainItem.validator background: Item { @@ -95,25 +104,19 @@ ColumnLayout { contentItem: Image { fillMode: Image.PreserveAspectFit source: eyeButton.checked ? AppIcons.eyeShow : AppIcons.eyeHide + width: 20 * DefaultStyle.dp + height: 20 * DefaultStyle.dp } anchors.top: parent.top anchors.bottom: parent.bottom anchors.right: parent.right + anchors.rightMargin: 5 * DefaultStyle.dp } } - Text { - visible: mainItem.errorMessage.length > 0 - verticalAlignment: Text.AlignVCenter + ErrorText { + id: errorText + visible: mainItem.enableErrorText text: mainItem.errorMessage - color: DefaultStyle.danger_500main - elide: Text.ElideRight - wrapMode: Text.Wrap - // maximumLineCount: 1 - font { - pixelSize: 13 * DefaultStyle.dp - family: DefaultStyle.defaultFont - bold: true - } Layout.preferredWidth: mainItem.textInputWidth } } diff --git a/Linphone/view/Page/Login/LoginPage.qml b/Linphone/view/Page/Login/LoginPage.qml index 8cfeb1fe3..f71c65615 100644 --- a/Linphone/view/Page/Login/LoginPage.qml +++ b/Linphone/view/Page/Login/LoginPage.qml @@ -32,7 +32,7 @@ LoginLayout { source: AppIcons.profile } Text { - text: "Login" + text: qsTr("Connexion") font { pixelSize: 36 * DefaultStyle.dp weight: 800 * DefaultStyle.dp @@ -44,13 +44,13 @@ LoginLayout { } Text { Layout.rightMargin: 15 * DefaultStyle.dp - text: "No account yet ?" + text: qsTr("Pas encore de compte ?") font.pixelSize: 14 * DefaultStyle.dp font.weight: 400 * DefaultStyle.dp } Button { Layout.alignment: Qt.AlignRight - text: "Register" + text: qsTr("S'inscrire") onClicked: { console.debug("[LoginPage] User: go to register") mainItem.goToRegister() @@ -68,7 +68,7 @@ LoginLayout { Button { Layout.topMargin: 40 * DefaultStyle.dp inversedColors: true - text: "Use SIP Account" + text: qsTr("Compte SIP tiers") onClicked: {mainItem.useSIPButtonClicked()} } } @@ -76,14 +76,15 @@ LoginLayout { Layout.fillWidth: true } Image { + Layout.alignment: Qt.AlignVCenter Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 300 * DefaultStyle.dp + Layout.preferredWidth: 395 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: AppIcons.loginImage } - } - Item { - Layout.fillHeight: true + Item { + Layout.fillHeight: true + } } } } diff --git a/Linphone/view/Page/Login/RegisterCheckingPage.qml b/Linphone/view/Page/Login/RegisterCheckingPage.qml index eef4abe1b..64a01a92e 100644 --- a/Linphone/view/Page/Login/RegisterCheckingPage.qml +++ b/Linphone/view/Page/Login/RegisterCheckingPage.qml @@ -50,7 +50,10 @@ LoginLayout { Text { Layout.alignment: Qt.AlignTop font.bold: true - font.pixelSize: DefaultStyle.defaultFontPointSize + font { + pixelSize: 22 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } color: DefaultStyle.main2_700 text: { var completeString = (mainItem.email.length > 0) ? ("email " + mainItem.email) : ("phone number " + mainItem.phoneNumber) @@ -71,16 +74,22 @@ LoginLayout { model: 4 DigitInput { required property int index - onTextEdited: if (text.length > 0 ) { - if (index < 3) - nextItemInFocusChain(true).forceActiveFocus() - else { - // validate() - } - } else { - if (index > 0) - nextItemInFocusChain(false).forceActiveFocus() - } + Layout.preferredWidth: width + Layout.preferredHeight: height + Component.onCompleted: console.log("completed", width, Layout.preferredWidth) + onTextEdited: { + console.log("textfield text", text, index) + if (text.length > 0 ) { + if (index < 3) + nextItemInFocusChain(true).forceActiveFocus() + else { + // validate() + } + } else { + if (index > 0) + nextItemInFocusChain(false).forceActiveFocus() + } + } Layout.margins: 10 * DefaultStyle.dp } } diff --git a/Linphone/view/Page/Login/RegisterPage.qml b/Linphone/view/Page/Login/RegisterPage.qml index 6b8c9e587..99de72140 100644 --- a/Linphone/view/Page/Login/RegisterPage.qml +++ b/Linphone/view/Page/Login/RegisterPage.qml @@ -18,7 +18,7 @@ LoginLayout { } Text { Layout.preferredWidth: width - text: qsTr("Register") + text: qsTr("Inscription") font { pixelSize: 36 * DefaultStyle.dp weight: 800 * DefaultStyle.dp @@ -32,7 +32,7 @@ LoginLayout { Text { Layout.rightMargin: 15 * DefaultStyle.dp color: DefaultStyle.main2_700 - text: qsTr("Already have an account ?") + text: qsTr("Déjà un compte ?") font { pixelSize: 14 * DefaultStyle.dp weight: 400 * DefaultStyle.dp @@ -40,8 +40,7 @@ LoginLayout { } Button { // Layout.alignment: Qt.AlignRight - inversedColors: true - text: "Log in" + text: qsTr("Connexion") onClicked: { console.debug("[RegisterPage] User: return") returnToLogin() @@ -62,10 +61,11 @@ LoginLayout { ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true + Layout.topMargin: 20 * DefaultStyle.dp spacing: 15 * DefaultStyle.dp RowLayout { TextInput { - label: "Username" + label: qsTr("Username") mandatory: true textInputWidth: 346 * DefaultStyle.dp } @@ -73,11 +73,12 @@ LoginLayout { label: " " enabled: false modelList: [{text:"@sip.linphone.org"}] + Layout.preferredWidth: 210 * DefaultStyle.dp } } PhoneNumberInput { id: phoneNumberInput - label: "Phone number" + label: qsTr("Phone number") mandatory: true placeholderText: "Phone number" textInputWidth: 346 * DefaultStyle.dp @@ -85,13 +86,13 @@ LoginLayout { RowLayout { ColumnLayout { TextInput { - label: "Password" + label: qsTr("Password") mandatory: true hidden: true textInputWidth: 346 * DefaultStyle.dp } Text { - text: "The password must contain 6 characters minimum" + text: qsTr("The password must contain 6 characters minimum") font { pixelSize: 12 * DefaultStyle.dp weight: 300 * DefaultStyle.dp @@ -100,13 +101,13 @@ LoginLayout { } ColumnLayout { TextInput { - label: "Confirm password" + label: qsTr("Confirm password") mandatory: true hidden: true textInputWidth: 346 * DefaultStyle.dp } Text { - text: "The password must contain 6 characters minimum" + text: qsTr("The password must contain 6 characters minimum") font { pixelSize: 12 * DefaultStyle.dp weight: 300 * DefaultStyle.dp @@ -118,7 +119,7 @@ LoginLayout { CheckBox { } Text { - text: "I would like to suscribe to the newsletter" + text: qsTr("I would like to suscribe to the newsletter") } } RowLayout { @@ -126,11 +127,11 @@ LoginLayout { } Text { Layout.preferredWidth: 450 * DefaultStyle.dp - text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." + text: qsTr("I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy.") } } Button { - text: "Register" + text: qsTr("Register") onClicked:{ console.log("[RegisterPage] User: Call register with phone number", phoneNumberInput.phoneNumber) mainItem.registerCalled(phoneNumberInput.countryCode, phoneNumberInput.phoneNumber, "") @@ -142,7 +143,7 @@ LoginLayout { } Image { Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 300 * DefaultStyle.dp + Layout.preferredWidth: 395 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: AppIcons.loginImage } @@ -154,7 +155,7 @@ LoginLayout { spacing: 15 * DefaultStyle.dp RowLayout { TextInput { - label: "Username" + label: qsTr("Username") mandatory: true textInputWidth: 346 * DefaultStyle.dp } @@ -164,12 +165,12 @@ LoginLayout { label: " " enabled: false modelList: [{text:"@sip.linphone.org"}] - backgroundWidth: 154 * DefaultStyle.dp + Layout.preferredWidth: 210 * DefaultStyle.dp } } TextInput { id: emailInput - label: "Email" + label: qsTr("Email") mandatory: true textInputWidth: 346 * DefaultStyle.dp } @@ -177,13 +178,13 @@ LoginLayout { ColumnLayout { TextInput { id: pwdInput - label: "Password" + label: qsTr("Password") mandatory: true hidden: true textInputWidth: 346 * DefaultStyle.dp } Text { - text: "The password must contain 6 characters minimum" + text: qsTr("The password must contain 6 characters minimum") font { pixelSize: 12 * DefaultStyle.dp weight: 300 * DefaultStyle.dp @@ -193,13 +194,13 @@ LoginLayout { ColumnLayout { TextInput { id: confirmPwdInput - label: "Confirm password" + label: qsTr("Confirm password") mandatory: true hidden: true textInputWidth: 346 * DefaultStyle.dp } Text { - text: "The password must contain 6 characters minimum" + text: qsTr("The password must contain 6 characters minimum") font { pixelSize: 12 * DefaultStyle.dp weight: 300 * DefaultStyle.dp @@ -211,7 +212,7 @@ LoginLayout { CheckBox { } Text { - text: "I would like to suscribe to the newsletter" + text: qsTr("I would like to suscribe to the newsletter") } } RowLayout { @@ -219,15 +220,15 @@ LoginLayout { } Text { Layout.preferredWidth: 450 * DefaultStyle.dp - text: "I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy." + text: qsTr("I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy.") } } Button { - text: "Register" + text: qsTr("Register") onClicked:{ console.log("[RegisterPage] User: Call register with email", emailInput.text) if (emailInput.text.length == 0) { - emailInput.errorMessage = "You must enter an email" + emailInput.errorMessage = qsTr("You must enter an email") return } mainItem.registerCalled("", "", emailInput.text) @@ -239,7 +240,7 @@ LoginLayout { } Image { Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 300 * DefaultStyle.dp + Layout.preferredWidth: 395 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: AppIcons.loginImage } diff --git a/Linphone/view/Page/Login/SIPLoginPage.qml b/Linphone/view/Page/Login/SIPLoginPage.qml index 3b0e6c9d4..77b9456a7 100644 --- a/Linphone/view/Page/Login/SIPLoginPage.qml +++ b/Linphone/view/Page/Login/SIPLoginPage.qml @@ -49,7 +49,7 @@ LoginLayout { } Text { Layout.rightMargin: 15 * DefaultStyle.dp - text: qsTr("No account yet ?") + text: qsTr("Pas encore de compte ?") font { pixelSize: 14 * DefaultStyle.dp weight: 400 * DefaultStyle.dp @@ -57,8 +57,7 @@ LoginLayout { } Button { Layout.alignment: Qt.AlignRight - inversedColors: true - text: qsTr("Register") + text: qsTr("S'inscrire") onClicked: { console.debug("[SIPLoginPage] User: go to register page") mainItem.goToRegister() @@ -115,7 +114,7 @@ LoginLayout { Button { Layout.fillWidth: true inversedColors: true - text: "I prefer creating an account" + text: qsTr("I prefer creating an account") onClicked: { console.debug("[SIPLoginPage] User: click register") mainItem.goToRegister() @@ -123,7 +122,7 @@ LoginLayout { } Button { Layout.fillWidth: true - text: "I understand" + text: qsTr("I understand") onClicked: { rootStackView.replace(secondItem) } @@ -139,70 +138,41 @@ LoginLayout { spacing: 10 * DefaultStyle.dp TextInput { id: username - label: "Username" + label: qsTr("Username") mandatory: true - textInputWidth: 250 * DefaultStyle.dp + textInputWidth: 360 * DefaultStyle.dp } TextInput { id: password - label: "Password" + label: qsTr("Password") mandatory: true hidden: true - textInputWidth: 250 * DefaultStyle.dp + textInputWidth: 360 * DefaultStyle.dp } TextInput { id: domain - label: "Domain" + label: qsTr("Domain") mandatory: true - textInputWidth: 250 * DefaultStyle.dp + textInputWidth: 360 * DefaultStyle.dp } TextInput { id: displayName - label: "Display Name" - textInputWidth: 250 * DefaultStyle.dp + label: qsTr("Display Name") + textInputWidth: 360 * DefaultStyle.dp } ComboBox { - label: "Transport" - backgroundWidth: 250 * DefaultStyle.dp - modelList:[ "TCP", "UDP", "TLS"] + label: qsTr("Transport") + modelList:[ "TCP", "UDP", "TLS", "DTLS"] + Layout.preferredWidth: 360 * DefaultStyle.dp } - Text { + ErrorText { id: errorText - text: "Connection has failed. Please verify your credentials" - color: DefaultStyle.danger_500main - opacity: 0 - states: [ - State{ - name: "Visible" - PropertyChanges{target: errorText; opacity: 1.0} - }, - State{ - name:"Invisible" - PropertyChanges{target: errorText; opacity: 0.0} - } - ] - transitions: [ - Transition { - from: "Visible" - to: "Invisible" - NumberAnimation { - property: "opacity" - duration: 1000 - } - } - ] - Timer { - id: autoHideErrorMessage - interval: 2500 - onTriggered: errorText.state = "Invisible" - } Connections { target: LoginPageCpp onRegistrationStateChanged: { if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Failed) { - errorText.state = "Visible" - autoHideErrorMessage.restart() + errorText.text = qsTr("Connection has failed. Please verify your credentials") } else if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) { mainItem.connectionSucceed() } @@ -214,7 +184,7 @@ LoginLayout { Layout.topMargin: 20 * DefaultStyle.dp Layout.bottomMargin: 20 * DefaultStyle.dp - text: "Log in" + text: qsTr("Log in") onClicked: { console.debug("[SIPLoginPage] User: Log in") LoginPageCpp.login(username.inputText, password.inputText);