From b6bddabccea6f46bcb2fc54766ca6557550ee131 Mon Sep 17 00:00:00 2001 From: Gaelle Braud Date: Tue, 9 Apr 2024 12:45:05 +0200 Subject: [PATCH] fix ui login pages --- Linphone/data/image/lock.svg | 3 + Linphone/view/App/Layout/LoginLayout.qml | 32 +- Linphone/view/Item/BusyIndicator.qml | 2 +- Linphone/view/Item/Button.qml | 8 +- Linphone/view/Item/Carousel.qml | 20 +- Linphone/view/Item/CheckBox.qml | 2 +- Linphone/view/Item/ErrorText.qml | 4 +- Linphone/view/Item/Form/LoginForm.qml | 11 +- Linphone/view/Item/PhoneNumberInput.qml | 4 +- Linphone/view/Layout/FormItemLayout.qml | 2 + Linphone/view/Page/Login/LoginPage.qml | 133 +++--- .../view/Page/Login/RegisterCheckingPage.qml | 217 +++++----- Linphone/view/Page/Login/RegisterPage.qml | 377 ++++++++---------- Linphone/view/Page/Login/SIPLoginPage.qml | 311 ++++++++------- Linphone/view/Page/Login/WelcomePage.qml | 47 ++- Linphone/view/Style/AppIcons.qml | 1 + 16 files changed, 578 insertions(+), 596 deletions(-) create mode 100644 Linphone/data/image/lock.svg diff --git a/Linphone/data/image/lock.svg b/Linphone/data/image/lock.svg new file mode 100644 index 000000000..c075c8870 --- /dev/null +++ b/Linphone/data/image/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/Linphone/view/App/Layout/LoginLayout.qml b/Linphone/view/App/Layout/LoginLayout.qml index 0129bf404..1943896af 100644 --- a/Linphone/view/App/Layout/LoginLayout.qml +++ b/Linphone/view/App/Layout/LoginLayout.qml @@ -14,27 +14,25 @@ Rectangle { property alias centerContent : centerLayout.children color: DefaultStyle.grey_0 ColumnLayout { - anchors.rightMargin: 40 * DefaultStyle.dp - anchors.leftMargin: 119 * DefaultStyle.dp + // anchors.leftMargin: 119 * DefaultStyle.dp anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.bottom: bottomMountains.top - spacing: 3 * DefaultStyle.dp + spacing: 0 RowLayout { Layout.fillWidth: true Layout.preferredHeight: 102 * DefaultStyle.dp - Layout.maximumHeight: 102 * DefaultStyle.dp - // Layout.topMargin: 18 - // Layout.alignment: Qt.AlignRight | Qt.AlignTop + Layout.rightMargin: 42 * DefaultStyle.dp + spacing: 0 Item { Layout.fillWidth: true } Button { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - // Layout.bottomMargin: 20 background: Item{} contentItem: RowLayout { + spacing: 8 * DefaultStyle.dp Image { fillMode: Image.PreserveAspectFit source: AppIcons.info @@ -58,30 +56,24 @@ Rectangle { RowLayout { id: titleLayout Layout.preferredHeight: 131 * DefaultStyle.dp - // Layout.bottomMargin: 20 - } - ColumnLayout { - id: centerLayout + Layout.fillWidth: true + spacing: 0 } Item { + id: centerLayout Layout.fillHeight: true Layout.fillWidth: true } } - RowLayout { + Image { id: bottomMountains anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right - Image { - Layout.minimumHeight: 50 * DefaultStyle.dp - Layout.preferredHeight: 80 * DefaultStyle.dp - Layout.fillWidth: true - source: AppIcons.belledonne - fillMode: Image.Stretch - } - + height: 108 * DefaultStyle.dp + source: AppIcons.belledonne + fillMode: Image.Stretch } } diff --git a/Linphone/view/Item/BusyIndicator.qml b/Linphone/view/Item/BusyIndicator.qml index 2812abc93..74a685b64 100644 --- a/Linphone/view/Item/BusyIndicator.qml +++ b/Linphone/view/Item/BusyIndicator.qml @@ -25,7 +25,7 @@ Item { from: 0 to: 360 loops: Animation.Infinite - duration: 10000 + duration: 15000 } } } diff --git a/Linphone/view/Item/Button.qml b/Linphone/view/Item/Button.qml index e9d150a4a..e88b22fec 100644 --- a/Linphone/view/Item/Button.qml +++ b/Linphone/view/Item/Button.qml @@ -8,11 +8,13 @@ Control.Button { id: mainItem property int capitalization property color color: DefaultStyle.main1_500_main + property color disabledColor: DefaultStyle.main1_500_main_darker property color borderColor: "transparent" property color pressedColor: DefaultStyle.main1_500_main_darker property bool inversedColors: false property int textSize: 18 * DefaultStyle.dp property int textWeight: 600 * DefaultStyle.dp + property int radius: 48 * DefaultStyle.dp property color textColor: DefaultStyle.grey_0 property bool underline: false property bool shadowEnabled: false @@ -35,14 +37,16 @@ Control.Button { Rectangle { anchors.fill: parent id: buttonBackground - color: inversedColors + color: mainItem.enabled + ? inversedColors ? mainItem.pressed ? DefaultStyle.grey_100 : DefaultStyle.grey_0 : mainItem.pressed ? mainItem.pressedColor : mainItem.color - radius: 48 * DefaultStyle.dp + : mainItem.disabledColor + radius: mainItem.radius border.color: inversedColors ? mainItem.color : mainItem.borderColor MouseArea { diff --git a/Linphone/view/Item/Carousel.qml b/Linphone/view/Item/Carousel.qml index 6c2ac0a3d..9b16bea9e 100644 --- a/Linphone/view/Item/Carousel.qml +++ b/Linphone/view/Item/Carousel.qml @@ -11,6 +11,8 @@ ColumnLayout { // which is part of the carouselStackLayout children list required property int itemsCount property int currentIndex: carouselStackLayout.currentIndex + property var currentItem: carouselButton.itemAt(currentIndex) + spacing: 61 * DefaultStyle.dp function goToSlide(index) { carouselStackLayout.goToSlideAtIndex(index) @@ -70,30 +72,34 @@ ColumnLayout { radius: 30 * DefaultStyle.dp color: DefaultStyle.main1_500_main z: 1 - x: mainItem.currentIndex >= 0 && carouselButton.itemAt(mainItem.currentIndex) ? carouselButton.itemAt(mainItem.currentIndex).x : 0 + x: mainItem.currentIndex >= 0 && mainItem.currentItem ? mainItem.currentItem.x - width/2 + mainItem.currentItem.width/2 : 0 Behavior on x { NumberAnimation {duration: 100}} } RowLayout { id: carouselButtonsLayout - spacing: 10 * DefaultStyle.dp + spacing: 7.5 * DefaultStyle.dp + anchors.leftMargin: 2.5 * DefaultStyle.dp Repeater { id: carouselButton model: mainItem.itemsCount delegate: Button { - width: 8 * DefaultStyle.dp - height: 8 * DefaultStyle.dp - padding: 0 + Layout.preferredWidth: 8 * DefaultStyle.dp + Layout.preferredHeight: 8 * DefaultStyle.dp + topPadding: 0 + bottomPadding: 0 + leftPadding: 0 + rightPadding: 0 background: Rectangle { color: DefaultStyle.main2_200 radius: 30 * DefaultStyle.dp - width: 8 * DefaultStyle.dp - height: 8 * DefaultStyle.dp + anchors.fill: parent } onClicked: { mainItem.goToSlide(modelData) } } } + Item{Layout.fillWidth: true} } } } diff --git a/Linphone/view/Item/CheckBox.qml b/Linphone/view/Item/CheckBox.qml index 22ef01f30..835752bf4 100644 --- a/Linphone/view/Item/CheckBox.qml +++ b/Linphone/view/Item/CheckBox.qml @@ -12,7 +12,7 @@ Control.CheckBox { y: (parent.height - height) / 2 radius: 3 * DefaultStyle.dp border.color: DefaultStyle.main1_500_main - border.width: 2 * DefaultStyle.dp + border.width: 2.2 * DefaultStyle.dp // color: mainItem.checked ? DefaultStyle.main1_500_main : "transparent" EffectImage { visible: mainItem.checked diff --git a/Linphone/view/Item/ErrorText.qml b/Linphone/view/Item/ErrorText.qml index 1bcb0861b..e9cc696d1 100644 --- a/Linphone/view/Item/ErrorText.qml +++ b/Linphone/view/Item/ErrorText.qml @@ -15,8 +15,8 @@ Text { mainItem.state = "Invisible" } font { - pixelSize: 13 * DefaultStyle.dp - weight: 600 * DefaultStyle.dp + pixelSize: 12 * DefaultStyle.dp + weight: 300 * DefaultStyle.dp } states: [ State{ diff --git a/Linphone/view/Item/Form/LoginForm.qml b/Linphone/view/Item/Form/LoginForm.qml index 29c4ec1e4..5d5579add 100644 --- a/Linphone/view/Item/Form/LoginForm.qml +++ b/Linphone/view/Item/Form/LoginForm.qml @@ -6,7 +6,7 @@ import Linphone ColumnLayout { id: mainItem - spacing: 15 * DefaultStyle.dp + spacing: 25 * DefaultStyle.dp signal connectionSucceed() FormItemLayout { @@ -52,9 +52,8 @@ ColumnLayout { } ErrorText { - anchors.top: password.bottom - anchors.topMargin: 15 * DefaultStyle.dp id: errorText + anchors.top: password.bottom Connections { target: LoginPageCpp onErrorMessageChanged: { @@ -70,7 +69,8 @@ ColumnLayout { } RowLayout { - id: lastFormLineLayout + Layout.topMargin: 7 * DefaultStyle.dp + spacing: 29 * DefaultStyle.dp Button { leftPadding: 20 * DefaultStyle.dp rightPadding: 20 * DefaultStyle.dp @@ -108,7 +108,6 @@ ColumnLayout { } } } - Layout.rightMargin: 20 * DefaultStyle.dp onClicked: { username.errorMessage = "" password.errorMessage = "" @@ -135,7 +134,7 @@ ColumnLayout { font{ underline: true pixelSize: 13 * DefaultStyle.dp - weight : 600 * DefaultStyle.dp + weight: 600 * DefaultStyle.dp } } onClicked: console.debug("[LoginForm]User: forgotten password button clicked") diff --git a/Linphone/view/Item/PhoneNumberInput.qml b/Linphone/view/Item/PhoneNumberInput.qml index 15b335738..afa4227e4 100644 --- a/Linphone/view/Item/PhoneNumberInput.qml +++ b/Linphone/view/Item/PhoneNumberInput.qml @@ -10,7 +10,7 @@ ColumnLayout { property string errorMessage: "" property string placeholderText : "" property bool mandatory: false - property int textInputWidth: 200 * DefaultStyle.dp + property int textInputWidth: width property string initialPhoneNumber readonly property string phoneNumber: textField.text readonly property string countryCode: combobox.currentText @@ -55,7 +55,7 @@ ColumnLayout { placeholderText: mainItem.placeholderText background: Item{} initialText: initialPhoneNumber - validator: IntValidator{} + validator: RegularExpressionValidator{ regularExpression: /[0-9]+/} } } } diff --git a/Linphone/view/Layout/FormItemLayout.qml b/Linphone/view/Layout/FormItemLayout.qml index 5a5fa4d4b..89f854233 100644 --- a/Linphone/view/Layout/FormItemLayout.qml +++ b/Linphone/view/Layout/FormItemLayout.qml @@ -13,6 +13,7 @@ ColumnLayout { property string errorMessage: "" property bool enableErrorText: false property bool errorTextVisible: errorText.opacity > 0 + spacing: 5 * DefaultStyle.dp Text { visible: label.length > 0 @@ -39,6 +40,7 @@ ColumnLayout { id: errorText visible: mainItem.enableErrorText text: mainItem.errorMessage + color: DefaultStyle.main2_600 Layout.preferredWidth: implicitWidth } } diff --git a/Linphone/view/Page/Login/LoginPage.qml b/Linphone/view/Page/Login/LoginPage.qml index 466008ef0..f720c3051 100644 --- a/Linphone/view/Page/Login/LoginPage.qml +++ b/Linphone/view/Page/Login/LoginPage.qml @@ -11,12 +11,13 @@ LoginLayout { signal goToRegister() signal connectionSucceed() - titleContent: RowLayout { - spacing: 15 * DefaultStyle.dp + titleContent: [ Button { - visible: mainItem.showBackButton + enabled: mainItem.showBackButton + opacity: mainItem.showBackButton ? 1.0 : 0 Layout.preferredHeight: 27 * DefaultStyle.dp Layout.preferredWidth: 27 * DefaultStyle.dp + Layout.leftMargin: 79 * DefaultStyle.dp icon.source: AppIcons.leftArrow icon.width: 27 * DefaultStyle.dp icon.height: 27 * DefaultStyle.dp @@ -27,72 +28,78 @@ LoginLayout { console.debug("[LoginLayout] User: return") mainItem.goBack() } - } - Image { - fillMode: Image.PreserveAspectFit - source: AppIcons.profile - Layout.preferredHeight: 34 * DefaultStyle.dp - Layout.preferredWidth: 34 * DefaultStyle.dp - } - Text { - text: qsTr("Connexion") - font { - pixelSize: 36 * DefaultStyle.dp - weight: 800 * DefaultStyle.dp + }, + RowLayout { + spacing: 15 * DefaultStyle.dp + Layout.leftMargin: 21 * DefaultStyle.dp + Image { + fillMode: Image.PreserveAspectFit + source: AppIcons.profile + Layout.preferredHeight: 34 * DefaultStyle.dp + Layout.preferredWidth: 34 * DefaultStyle.dp } - } + Text { + text: qsTr("Connexion") + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } + } + }, Item { Layout.fillWidth: true - } - Text { - Layout.rightMargin: 15 * DefaultStyle.dp - text: qsTr("Pas encore de compte ?") - font.pixelSize: 14 * DefaultStyle.dp - font.weight: 400 * DefaultStyle.dp - } - Button { - Layout.alignment: Qt.AlignRight - leftPadding: 20 * DefaultStyle.dp - rightPadding: 20 * DefaultStyle.dp - topPadding: 11 * DefaultStyle.dp - bottomPadding: 11 * DefaultStyle.dp - text: qsTr("S'inscrire") - onClicked: { - console.debug("[LoginPage] User: go to register") - mainItem.goToRegister() - } - } - } - centerContent: ColumnLayout { - Layout.leftMargin: 45 * DefaultStyle.dp + }, RowLayout { - - ColumnLayout { - LoginForm { - onConnectionSucceed: mainItem.connectionSucceed() - } - Button { - Layout.topMargin: 40 * DefaultStyle.dp - inversedColors: true - leftPadding: 20 * DefaultStyle.dp - rightPadding: 20 * DefaultStyle.dp - topPadding: 11 * DefaultStyle.dp - bottomPadding: 11 * DefaultStyle.dp - text: qsTr("Compte SIP tiers") - onClicked: {mainItem.useSIPButtonClicked()} - } + spacing: 20 * DefaultStyle.dp + Layout.rightMargin: 51 * DefaultStyle.dp + Text { + Layout.rightMargin: 15 * DefaultStyle.dp + text: qsTr("Pas encore de compte ?") + font.pixelSize: 14 * DefaultStyle.dp + font.weight: 400 * DefaultStyle.dp } - Item { - Layout.fillWidth: true - } - Image { - Layout.alignment: Qt.AlignVCenter - Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 395 * DefaultStyle.dp - fillMode: Image.PreserveAspectFit - source: AppIcons.loginImage + Button { + Layout.alignment: Qt.AlignRight + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + text: qsTr("S'inscrire") + onClicked: { + console.debug("[LoginPage] User: go to register") + mainItem.goToRegister() + } } } - } + ] + centerContent: [ + ColumnLayout { + anchors.left: parent.left + anchors.top: parent.top + anchors.leftMargin: 127 * DefaultStyle.dp + anchors.topMargin: 70 * DefaultStyle.dp + spacing: 39 * DefaultStyle.dp + LoginForm { + onConnectionSucceed: mainItem.connectionSucceed() + } + Button { + inversedColors: true + Layout.preferredWidth: 235 * DefaultStyle.dp + Layout.preferredHeight: 47 * DefaultStyle.dp + text: qsTr("Compte SIP tiers") + onClicked: {mainItem.useSIPButtonClicked()} + } + }, + Image { + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 129 * DefaultStyle.dp + anchors.rightMargin: 127 * DefaultStyle.dp + width: 395 * DefaultStyle.dp + height: 350 * DefaultStyle.dp + fillMode: Image.PreserveAspectFit + source: AppIcons.loginImage + } + ] } diff --git a/Linphone/view/Page/Login/RegisterCheckingPage.qml b/Linphone/view/Page/Login/RegisterCheckingPage.qml index 128e49220..450a39701 100644 --- a/Linphone/view/Page/Login/RegisterCheckingPage.qml +++ b/Linphone/view/Page/Login/RegisterCheckingPage.qml @@ -9,126 +9,119 @@ LoginLayout { property string phoneNumber property string email - titleContent: RowLayout { - Button { - Layout.preferredHeight: 24 * DefaultStyle.dp - Layout.preferredWidth: 24 * DefaultStyle.dp - icon.source: AppIcons.leftArrow - icon.width: 24 * DefaultStyle.dp - icon.height: 24 * DefaultStyle.dp - background: Rectangle { - color: "transparent" - } - onClicked: { - console.debug("[RegisterCheckingPage] User: return to register") - mainItem.returnToRegister() - } - } - Image { - fillMode: Image.PreserveAspectFit - source: AppIcons.profile - } - Text { - wrapMode: Text.NoWrap - text: { - var completeString = (mainItem.email.length > 0) ? qsTr("email") : qsTr("numéro") - text = qsTr("Inscription | Confirmer votre ") + completeString - } - font { - pixelSize: 36 * DefaultStyle.dp - weight: 800 * DefaultStyle.dp - } - scaleLettersFactor: 1.1 - } - Item { - Layout.fillWidth: true - } - } - - centerContent: ColumnLayout { - spacing: 2 * DefaultStyle.dp - Text { - Layout.alignment: Qt.AlignTop - font.bold: true - 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) - text = "We have sent a verification code on your " + completeString + "
Please enter the verification code below:" - } - font { - pixelSize: 22 * DefaultStyle.dp - weight: 800 * DefaultStyle.dp - } - } + titleContent: [ RowLayout { - Layout.fillWidth: true - Layout.margins: 10 * DefaultStyle.dp - ColumnLayout { - spacing: 70 * DefaultStyle.dp - RowLayout { - Repeater { - model: 4 - DigitInput { - required property int index - Layout.preferredWidth: width - Layout.preferredHeight: height - 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 - } - } + spacing: 21 * DefaultStyle.dp + Layout.leftMargin: 119 * DefaultStyle.dp + Button { + Layout.preferredHeight: 24 * DefaultStyle.dp + Layout.preferredWidth: 24 * DefaultStyle.dp + icon.source: AppIcons.leftArrow + icon.width: 24 * DefaultStyle.dp + icon.height: 24 * DefaultStyle.dp + background: Rectangle { + color: "transparent" } - RowLayout { - Layout.alignment: Qt.AlignBottom - Text { - Layout.rightMargin: 15 * DefaultStyle.dp - text: "Didn't receive the code ?" - color: DefaultStyle.main2_700 - font.pixelSize: 14 * DefaultStyle.dp - font.weight: 400 * DefaultStyle.dp - } - Button { - Layout.alignment: Qt.AlignRight - leftPadding: 20 * DefaultStyle.dp - rightPadding: 20 * DefaultStyle.dp - topPadding: 11 * DefaultStyle.dp - bottomPadding: 11 * DefaultStyle.dp - inversedColors: true - text: "Resend a code" - onClicked: { - console.debug("[RegisterCheckingPage] User: Resend code") - } - } + onClicked: { + console.debug("[RegisterCheckingPage] User: return to register") + mainItem.returnToRegister() } } - Item { - Layout.fillWidth: true - } Image { - Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 300 * DefaultStyle.dp fillMode: Image.PreserveAspectFit - source: AppIcons.verif_page_image + source: AppIcons.profile } - } + Text { + wrapMode: Text.NoWrap + text: { + var completeString = (mainItem.email.length > 0) ? qsTr("email") : qsTr("numéro") + text = qsTr("Inscription | Confirmer votre ") + completeString + } + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } + scaleLettersFactor: 1.1 + } + }, Item { - Layout.fillHeight: true + Layout.fillWidth: true } - } + ] + + centerContent: [ + ColumnLayout { + anchors.left: parent.left + anchors.top: parent.top + anchors.topMargin: 51 * DefaultStyle.dp + anchors.leftMargin: 127 * DefaultStyle.dp + spacing: 104 * DefaultStyle.dp + Text { + font { + bold: true + 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 + "\"") + text = "We have sent a verification code on your " + completeString + "
Please enter the verification code below:" + } + } + RowLayout { + spacing: 45 * DefaultStyle.dp + Repeater { + model: 4 + DigitInput { + required property int index + Layout.preferredWidth: width + Layout.preferredHeight: height + onTextEdited: { + if (text.length > 0 ) { + if (index < 3) + nextItemInFocusChain(true).forceActiveFocus() + else { + // TODO : validate() + } + } else { + if (index > 0) + nextItemInFocusChain(false).forceActiveFocus() + } + } + } + } + } + RowLayout { + spacing: 20 * DefaultStyle.dp + Text { + text: "Didn't receive the code ?" + color: DefaultStyle.main2_700 + font.pixelSize: 14 * DefaultStyle.dp + font.weight: 400 * DefaultStyle.dp + } + Button { + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + inversedColors: true + text: "Resend a code" + onClicked: { + console.debug("[RegisterCheckingPage] User: Resend code") + } + } + } + }, + Image { + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 140 * DefaultStyle.dp + anchors.rightMargin: 97.03 * DefaultStyle.dp + width: 476.78 * DefaultStyle.dp + height: 345.13 * DefaultStyle.dp + fillMode: Image.PreserveAspectFit + source: AppIcons.verif_page_image + } + ] } diff --git a/Linphone/view/Page/Login/RegisterPage.qml b/Linphone/view/Page/Login/RegisterPage.qml index 3be7f9e7d..8e4e4505c 100644 --- a/Linphone/view/Page/Login/RegisterPage.qml +++ b/Linphone/view/Page/Login/RegisterPage.qml @@ -11,221 +11,122 @@ LoginLayout { readonly property string phoneNumber: phoneNumberInput.phoneNumber readonly property string email: emailInput.text - titleContent: RowLayout { - Image { - fillMode: Image.PreserveAspectFit - source: AppIcons.profile - } - Text { - Layout.preferredWidth: width - text: qsTr("Inscription") - font { - pixelSize: 36 * DefaultStyle.dp - weight: 800 * DefaultStyle.dp + titleContent: [ + RowLayout { + spacing: 21 * DefaultStyle.dp + Layout.leftMargin: 119 * DefaultStyle.dp + Image { + fillMode: Image.PreserveAspectFit + source: AppIcons.profile } - wrapMode: Text.NoWrap - scaleLettersFactor: 1.1 - } + Text { + Layout.preferredWidth: width + text: qsTr("Inscription") + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } + wrapMode: Text.NoWrap + scaleLettersFactor: 1.1 + } + }, Item { Layout.fillWidth: true - } - Text { - Layout.rightMargin: 15 * DefaultStyle.dp - color: DefaultStyle.main2_700 - text: qsTr("Déjà un compte ?") - font { - pixelSize: 14 * DefaultStyle.dp - weight: 400 * DefaultStyle.dp + }, + RowLayout { + spacing: 20 * DefaultStyle.dp + Layout.rightMargin: 51 * DefaultStyle.dp + Text { + Layout.rightMargin: 15 * DefaultStyle.dp + color: DefaultStyle.main2_700 + text: qsTr("Déjà un compte ?") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + } + Button { + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + text: qsTr("Connexion") + onClicked: { + console.debug("[RegisterPage] User: return") + returnToLogin() + } } } - Button { - // Layout.alignment: Qt.AlignRight - leftPadding: 20 * DefaultStyle.dp - rightPadding: 20 * DefaultStyle.dp - topPadding: 11 * DefaultStyle.dp - bottomPadding: 11 * DefaultStyle.dp - text: qsTr("Connexion") - onClicked: { - console.debug("[RegisterPage] User: return") - returnToLogin() + ] + + centerContent: [ + ColumnLayout { + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.topMargin: 51 * DefaultStyle.dp + anchors.leftMargin: 127 * DefaultStyle.dp + anchors.rightMargin: 127 * DefaultStyle.dp + spacing: 50 * DefaultStyle.dp + TabBar { + Layout.fillWidth: true + id: bar + model: [qsTr("Register with phone number"), qsTr("Register with email")] } - } - } - - centerContent: ColumnLayout { - Layout.topMargin: 40 * DefaultStyle.dp - TabBar { - Layout.fillWidth: true - id: bar - model: [qsTr("Register with phone number"), qsTr("Register with email")] - } - StackLayout { - currentIndex: bar.currentIndex - Layout.topMargin: 50 * DefaultStyle.dp - - RowLayout { + ColumnLayout { + spacing: 22 * DefaultStyle.dp ColumnLayout { - Layout.fillWidth: true - Layout.fillHeight: true - spacing: 15 * DefaultStyle.dp + spacing: 24 * DefaultStyle.dp RowLayout { + spacing: 16 * DefaultStyle.dp FormItemLayout { label: qsTr("Username") mandatory: true contentItem: TextField { + id: usernameInput Layout.preferredWidth: 346 * DefaultStyle.dp } } - ComboBox { - Layout.alignment: Qt.AlignBottom - enabled: false - model: [{text:"@sip.linphone.org"}] - Layout.preferredWidth: 210 * DefaultStyle.dp - Layout.preferredHeight: 49 * DefaultStyle.dp - } - } - PhoneNumberInput { - id: phoneNumberInput - label: qsTr("Phone number") - mandatory: true - placeholderText: "Phone number" - Layout.preferredWidth: 346 * DefaultStyle.dp - } - RowLayout { - ColumnLayout { - FormItemLayout { - label: qsTr("Password") - mandatory: true - contentItem: TextField { - hidden: true - Layout.preferredWidth: 346 * DefaultStyle.dp - } - } - Text { - text: qsTr("The password must contain 6 characters minimum") - font { - pixelSize: 12 * DefaultStyle.dp - weight: 300 * DefaultStyle.dp - } - } - } - ColumnLayout { - FormItemLayout { - label: qsTr("Confirm password") - mandatory: true - contentItem: TextField { - hidden: true - Layout.preferredWidth: 346 * DefaultStyle.dp - } - } - Text { - text: qsTr("The password must contain 6 characters minimum") - font { - pixelSize: 12 * DefaultStyle.dp - weight: 300 * DefaultStyle.dp - } - } - } - } - RowLayout { - CheckBox { - } - Text { - text: qsTr("I would like to suscribe to the newsletter") - } - } - RowLayout { - CheckBox { - } RowLayout { - spacing: 0 - Layout.fillWidth: true - Text { - // Layout.preferredWidth: 450 * DefaultStyle.dp - text: qsTr("I accept the Terms and Conditions: ") + spacing: 10 * DefaultStyle.dp + Layout.alignment: Qt.AlignBottom + ComboBox { + enabled: false + model: [{text:"@sip.linphone.org"}] + Layout.preferredWidth: 210 * DefaultStyle.dp + Layout.preferredHeight: 49 * DefaultStyle.dp } - Text { - // Layout.preferredWidth: 450 * DefaultStyle.dp - font.underline: true - text: qsTr("Read the Terms and Conditions.") - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor - onClicked: console.log("TODO : display terms and conditions") - } - } - Text { - // Layout.preferredWidth: 450 * DefaultStyle.dp - text: qsTr("I accept the Privacy policy: ") - } - Text { - // Layout.preferredWidth: 450 * DefaultStyle.dp - font.underline: true - text: qsTr("Read the Privacy policy.") - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor - onClicked: console.log("TODO : display privacy policy") - } + EffectImage { + imageSource: AppIcons.lock + colorizationColor: DefaultStyle.main2_600 + Layout.preferredWidth: 16 * DefaultStyle.dp + Layout.preferredHeight: 16 * DefaultStyle.dp } } } - Button { - leftPadding: 20 * DefaultStyle.dp - rightPadding: 20 * DefaultStyle.dp - topPadding: 11 * DefaultStyle.dp - bottomPadding: 11 * DefaultStyle.dp - text: qsTr("Register") - onClicked:{ - console.log("[RegisterPage] User: Call register with phone number", phoneNumberInput.phoneNumber) - mainItem.registerCalled(phoneNumberInput.countryCode, phoneNumberInput.phoneNumber, "") + StackLayout { + currentIndex: bar.currentIndex + Layout.fillWidth: true + PhoneNumberInput { + id: phoneNumberInput + label: qsTr("Phone number") + mandatory: true + placeholderText: "Phone number" + Layout.preferredWidth: 346 * DefaultStyle.dp } - } - } - Item { - Layout.fillWidth: true - } - Image { - Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 395 * DefaultStyle.dp - fillMode: Image.PreserveAspectFit - source: AppIcons.loginImage - } - } - RowLayout { - ColumnLayout { - Layout.fillWidth: true - Layout.fillHeight: true - spacing: 15 * DefaultStyle.dp - RowLayout { FormItemLayout { - label: qsTr("Username") + label: qsTr("Email") mandatory: true contentItem: TextField { + id: emailInput Layout.preferredWidth: 346 * DefaultStyle.dp } } - ComboBox { - // if we don't set a label this item is offset - // due to the invisibility of the upper label - enabled: false - model: [{text:"@sip.linphone.org"}] - Layout.preferredWidth: 210 * DefaultStyle.dp - Layout.alignment: Qt.AlignBottom - } - } - FormItemLayout { - label: qsTr("Email") - mandatory: true - contentItem: TextField { - id: emailInput - Layout.preferredWidth: 346 * DefaultStyle.dp - } } RowLayout { + spacing: 16 * DefaultStyle.dp ColumnLayout { + spacing: 5 * DefaultStyle.dp FormItemLayout { label: qsTr("Password") mandatory: true @@ -244,6 +145,7 @@ LoginLayout { } } ColumnLayout { + spacing: 5 * DefaultStyle.dp FormItemLayout { label: qsTr("Confirm password") mandatory: true @@ -262,48 +164,101 @@ LoginLayout { } } } + } + ColumnLayout { + spacing: 18 * DefaultStyle.dp RowLayout { CheckBox { } Text { text: qsTr("I would like to suscribe to the newsletter") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } } } RowLayout { CheckBox { + id: termsCheckBox } - Text { - Layout.preferredWidth: 450 * DefaultStyle.dp - text: qsTr("I accept the Terms and Conditions : Read the Terms and Conditions.
I accept the Privacy policy : Read the Privacy policy.") - } - } - Button { - leftPadding: 20 * DefaultStyle.dp - rightPadding: 20 * DefaultStyle.dp - topPadding: 11 * DefaultStyle.dp - bottomPadding: 11 * DefaultStyle.dp - text: qsTr("Register") - onClicked:{ - console.log("[RegisterPage] User: Call register with email", emailInput.text) - if (emailInput.text.length == 0) { - emailInput.errorMessage = qsTr("You must enter an email") - return + RowLayout { + spacing: 0 + Layout.fillWidth: true + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + text: qsTr("I accept the Terms and Conditions: ") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + } + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + font { + underline: true + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + text: qsTr("Read the Terms and Conditions.") + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor + onClicked: console.log("TODO : display terms and conditions") + } + } + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + text: qsTr("I accept the Privacy policy: ") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + } + Text { + // Layout.preferredWidth: 450 * DefaultStyle.dp + font { + underline: true + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + text: qsTr("Read the Privacy policy.") + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor + onClicked: console.log("TODO : display privacy policy") + } } - mainItem.registerCalled("", "", emailInput.text) } } } - Item { - Layout.fillWidth: true - } - Image { - Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 395 * DefaultStyle.dp - fillMode: Image.PreserveAspectFit - source: AppIcons.loginImage + Button { + // enabled: termsCheckBox.checked && usernameInput.text.length != 0 && pwdInput.text.length != 0 && confirmPwdInput.text.length != 0 + // && (phoneNumberInput.phoneNumber.length != 0 || emailInput.text.length != 0) + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + text: qsTr("Register") + onClicked:{ + console.log("[RegisterPage] User: Call register with phone number", phoneNumberInput.phoneNumber) + mainItem.registerCalled(phoneNumberInput.countryCode, phoneNumberInput.phoneNumber, emailInput.text) + } } } + }, + Image { + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 129 * DefaultStyle.dp + anchors.rightMargin: 127 * DefaultStyle.dp + width: 395 * DefaultStyle.dp + height: 350 * 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 e4b72451c..68075f5ee 100644 --- a/Linphone/view/Page/Login/SIPLoginPage.qml +++ b/Linphone/view/Page/Login/SIPLoginPage.qml @@ -10,129 +10,137 @@ LoginLayout { signal goToRegister() signal connectionSucceed() - titleContent: RowLayout { - Button { - Layout.preferredHeight: 24 * DefaultStyle.dp - Layout.preferredWidth: 24 * DefaultStyle.dp - icon.source: AppIcons.leftArrow - icon.width: 24 * DefaultStyle.dp - icon.height: 24 * DefaultStyle.dp - background: Item { - anchors.fill: parent + titleContent: [ + RowLayout { + Layout.leftMargin: 119 * DefaultStyle.dp + spacing: 21 * DefaultStyle.dp + Button { + Layout.preferredHeight: 24 * DefaultStyle.dp + Layout.preferredWidth: 24 * DefaultStyle.dp + icon.source: AppIcons.leftArrow + icon.width: 24 * DefaultStyle.dp + icon.height: 24 * DefaultStyle.dp + background: Item { + anchors.fill: parent + } + onClicked: { + console.debug("[SIPLoginPage] User: return") + mainItem.goBack() + } } - onClicked: { - console.debug("[SIPLoginPage] User: return") - mainItem.goBack() + Image { + fillMode: Image.PreserveAspectFit + source: AppIcons.profile + Layout.preferredHeight: 34 * DefaultStyle.dp + Layout.preferredWidth: 34 * DefaultStyle.dp + sourceSize.width: 34 * DefaultStyle.dp + sourceSize.height: 34 * DefaultStyle.dp } - } - Image { - fillMode: Image.PreserveAspectFit - source: AppIcons.profile - Layout.preferredHeight: 34 * DefaultStyle.dp - Layout.preferredWidth: 34 * DefaultStyle.dp - sourceSize.width: 34 * DefaultStyle.dp - sourceSize.height: 34 * DefaultStyle.dp - } - Text { - text: qsTr("Compte SIP tiers") - font { - pixelSize: 36 * DefaultStyle.dp - weight: 800 * DefaultStyle.dp + Text { + text: qsTr("Compte SIP tiers") + font { + pixelSize: 36 * DefaultStyle.dp + weight: 800 * DefaultStyle.dp + } + scaleLettersFactor: 1.1 } - scaleLettersFactor: 1.1 - } + }, Item { Layout.fillWidth: true - } - Text { - Layout.rightMargin: 15 * DefaultStyle.dp - text: qsTr("Pas encore de compte ?") - font { - pixelSize: 14 * DefaultStyle.dp - weight: 400 * DefaultStyle.dp + }, + RowLayout { + Layout.rightMargin: 51 * DefaultStyle.dp + spacing: 20 * DefaultStyle.dp + Text { + Layout.rightMargin: 15 * DefaultStyle.dp + text: qsTr("Pas encore de compte ?") + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400 * DefaultStyle.dp + } + } + Button { + Layout.alignment: Qt.AlignRight + text: qsTr("S'inscrire") + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + onClicked: { + console.debug("[SIPLoginPage] User: go to register page") + mainItem.goToRegister() + } } } - Button { - Layout.alignment: Qt.AlignRight - text: qsTr("S'inscrire") - onClicked: { - console.debug("[SIPLoginPage] User: go to register page") - mainItem.goToRegister() + ] + + Component { + id: firstItem + ColumnLayout { + spacing: 0 + Text { + Layout.fillWidth: true + Layout.preferredWidth: rootStackView.width + wrapMode: Text.WordWrap + color: DefaultStyle.main2_600 + font { + pixelSize: 14 * DefaultStyle.dp + weight: 400* DefaultStyle.dp + } + text: "

Some features require a Linphone account, such as group messaging, video conferences...

+

These features are hidden when you register with a third party SIP account.

+

To enable it in a commercial projet, please contact us.

" + } + Button { + Layout.topMargin: 18 * DefaultStyle.dp + text: "linphone.org/contact" + textSize: 13 * DefaultStyle.dp + inversedColors: true + leftPadding: 12 * DefaultStyle.dp + rightPadding: 12 * DefaultStyle.dp + topPadding: 6 * DefaultStyle.dp + bottomPadding: 6 * DefaultStyle.dp + onClicked: { + Qt.openUrlExternally(ConstantsCpp.ContactUrl) + } + } + Button { + Layout.topMargin: 85 * DefaultStyle.dp + Layout.preferredWidth: 360 * DefaultStyle.dp + inversedColors: true + text: qsTr("I prefer creating an account") + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + onClicked: { + console.debug("[SIPLoginPage] User: click register") + mainItem.goToRegister() + } + } + Button { + Layout.topMargin: 20 * DefaultStyle.dp + Layout.preferredWidth: 360 * DefaultStyle.dp + text: qsTr("I understand") + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + onClicked: { + rootStackView.replace(secondItem) + } + } + Item { + Layout.fillHeight: true } } } - - centerContent: RowLayout { - signal useSIPButtonClicked() - Layout.topMargin: 85 * DefaultStyle.dp - Control.StackView { - id: rootStackView - initialItem: firstItem - Layout.preferredWidth: 361 * DefaultStyle.dp - Layout.fillHeight: true - Layout.alignment: Qt.AlignVCenter - clip: true - } - Component { - id: firstItem + Component { + id: secondItem + ColumnLayout { + spacing: 0 ColumnLayout { - Layout.alignment: Qt.AlignVCenter - spacing: 10 * DefaultStyle.dp - // Layout.bottomMargin: 20 * DefaultStyle.dp - Text { - Layout.fillWidth: true - Layout.preferredWidth: rootStackView.width - width: rootStackView.width - wrapMode: Text.WordWrap - color: DefaultStyle.main2_600 - font { - pixelSize: 14 * DefaultStyle.dp - weight: 400* DefaultStyle.dp - } - text: "

Some features require a Linphone account, such as group messaging, video conferences...

-

These features are hidden when you register with a third party SIP account.

-

To enable it in a commercial projet, please contact us.

" - } - Button { - text: "linphone.org/contact" - textSize: 13 * DefaultStyle.dp - inversedColors: true - leftPadding: 12 * DefaultStyle.dp - rightPadding: 12 * DefaultStyle.dp - topPadding: 6 * DefaultStyle.dp - bottomPadding: 6 * DefaultStyle.dp - onClicked: { - Qt.openUrlExternally(ConstantsCpp.ContactUrl) - } - } - Item { - Layout.preferredHeight: 85 * DefaultStyle.dp - } - Button { - Layout.fillWidth: true - inversedColors: true - text: qsTr("I prefer creating an account") - onClicked: { - console.debug("[SIPLoginPage] User: click register") - mainItem.goToRegister() - } - } - Button { - Layout.fillWidth: true - text: qsTr("I understand") - onClicked: { - rootStackView.replace(secondItem) - } - } - Item { - Layout.fillHeight: true - } - } - } - Component { - id: secondItem - ColumnLayout { - spacing: 10 * DefaultStyle.dp + spacing: 16 * DefaultStyle.dp FormItemLayout { label: qsTr("Username") mandatory: true @@ -173,49 +181,62 @@ LoginLayout { model:[ "TCP", "UDP", "TLS", "DTLS"] } } + } - ErrorText { - id: errorText - Connections { - target: LoginPageCpp - onRegistrationStateChanged: { - if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Failed) { - errorText.text = qsTr("Connection has failed. Please verify your credentials") - } else if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) { - mainItem.connectionSucceed() - } + ErrorText { + id: errorText + Connections { + target: LoginPageCpp + onRegistrationStateChanged: { + if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Failed) { + errorText.text = qsTr("Connection has failed. Please verify your credentials") + } else if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) { + mainItem.connectionSucceed() } } } + } - Button { - Layout.topMargin: 20 * DefaultStyle.dp - Layout.bottomMargin: 20 * DefaultStyle.dp - - text: qsTr("Log in") - onClicked: { - console.debug("[SIPLoginPage] User: Log in") - LoginPageCpp.login(username.inputText, password.inputText); - } - } - Item { - Layout.fillHeight: true + Button { + Layout.topMargin: 32 * DefaultStyle.dp + leftPadding: 20 * DefaultStyle.dp + rightPadding: 20 * DefaultStyle.dp + topPadding: 11 * DefaultStyle.dp + bottomPadding: 11 * DefaultStyle.dp + text: qsTr("Log in") + onClicked: { + console.debug("[SIPLoginPage] User: Log in") + LoginPageCpp.login(username.inputText, password.inputText); } } - - } - Item { - Layout.fillWidth: true + Item { + Layout.fillHeight: true + } } + + } + + centerContent: [ + Control.StackView { + id: rootStackView + initialItem: firstItem + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.topMargin: 70 * DefaultStyle.dp + anchors.leftMargin: 127 * DefaultStyle.dp + width: 361 * DefaultStyle.dp + clip: true + }, Image { - Layout.alignment: Qt.AlignVCenter - Layout.rightMargin: 40 * DefaultStyle.dp - Layout.preferredWidth: 395 * DefaultStyle.dp + anchors.top: parent.top + anchors.right: parent.right + anchors.topMargin: 129 * DefaultStyle.dp + anchors.rightMargin: 127 * DefaultStyle.dp + width: 395 * DefaultStyle.dp + height: 350 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: AppIcons.loginImage } - Item { - Layout.fillHeight: true - } - } + ] } diff --git a/Linphone/view/Page/Login/WelcomePage.qml b/Linphone/view/Page/Login/WelcomePage.qml index 8d57239fb..e812ea230 100644 --- a/Linphone/view/Page/Login/WelcomePage.qml +++ b/Linphone/view/Page/Login/WelcomePage.qml @@ -8,21 +8,23 @@ LoginLayout { id: mainItem signal startButtonPressed() - titleContent: RowLayout { + titleContent: [ Text { id: welcome text: qsTr("Bienvenue") + Layout.alignment: Qt.AlignVCenter + Layout.leftMargin: 132 * DefaultStyle.dp color: DefaultStyle.main2_800 font { pixelSize: 96 * DefaultStyle.dp weight: 800 * DefaultStyle.dp } scaleLettersFactor: 1.1 - } + }, Text { Layout.alignment: Qt.AlignBottom - Layout.leftMargin: 10 * DefaultStyle.dp - Layout.bottomMargin: 5 * DefaultStyle.dp + Layout.leftMargin: 29 * DefaultStyle.dp + Layout.bottomMargin: 19 * DefaultStyle.dp color: DefaultStyle.main2_800 text: qsTr("sur Linphone") font { @@ -30,13 +32,15 @@ LoginLayout { weight: 800 * DefaultStyle.dp } scaleLettersFactor: 1.1 - } + }, Item { Layout.fillWidth: true - } + }, Button { visible: carousel.currentIndex < (carousel.itemsCount - 1) flat: true + Layout.rightMargin: 50 * DefaultStyle.dp + Layout.alignment: Qt.AlignVCenter | Layout.AlignRight background: Item { visible: false } @@ -53,26 +57,27 @@ LoginLayout { mainItem.startButtonPressed() } } - } - centerContent: Item { - id: centerLayout - Layout.bottomMargin: 20 * DefaultStyle.dp - Layout.fillWidth: false - Layout.fillHeight: false - Layout.leftMargin: 250 * DefaultStyle.dp - Layout.topMargin: 165 * DefaultStyle.dp + ] + centerContent: ColumnLayout { + spacing: 76 * DefaultStyle.dp + anchors.left: parent.left + anchors.top: parent.top + anchors.leftMargin: 308 * DefaultStyle.dp + anchors.topMargin: 166 * DefaultStyle.dp + RowLayout { id: carouselLayout Image { id: carouselImg - Layout.rightMargin: 40 * DefaultStyle.dp + // Layout.rightMargin: 40 * DefaultStyle.dp Layout.preferredWidth: 153.22 * DefaultStyle.dp - Layout.preferredHeight: 156 * DefaultStyle.dp + Layout.preferredHeight: 155.9 * DefaultStyle.dp fillMode: Image.PreserveAspectFit source: carousel.currentIndex == 0 ? AppIcons.welcomeLinphoneLogo : carousel.currentIndex == 1 ? AppIcons.welcomeLock : AppIcons.welcomeOpenSource } Carousel { id: carousel + Layout.leftMargin: 75.78 * DefaultStyle.dp itemsCount: slideRepeater.count itemsList: Repeater { id: slideRepeater @@ -80,10 +85,9 @@ LoginLayout { {title: qsTr("Linphone"), text: qsTr("Une application de communication sécurisée,
open source et française.")}, {title: qsTr("Sécurisé"), text: qsTr("Vos communications sont en sécurité grâce aux
Chiffrement de bout en bout.")}, {title: qsTr("Open Source"), text: qsTr("Une application open source et un service gratuit
depuis 2001")} - // {title: qsTr("Sécurisé"), text: qsTr("Vos communications sont en sécurité grâce aux
Chiffrement de bout en bout.")} ] ColumnLayout { - spacing: 15 * DefaultStyle.dp + spacing: 10 * DefaultStyle.dp Text { id: title text: modelData.title @@ -106,12 +110,7 @@ LoginLayout { } Button { - anchors.top: carouselLayout.bottom - anchors.right: carouselLayout.right - anchors.topMargin: 20 * DefaultStyle.dp - anchors.bottomMargin: 20 * DefaultStyle.dp - anchors.leftMargin: (centerLayout.width - width) * DefaultStyle.dp - y: centerLayout.implicitWidth - width + Layout.leftMargin: 509 * DefaultStyle.dp leftPadding: 20 * DefaultStyle.dp rightPadding: 20 * DefaultStyle.dp topPadding: 11 * DefaultStyle.dp diff --git a/Linphone/view/Style/AppIcons.qml b/Linphone/view/Style/AppIcons.qml index 48d6837c1..39f3072cc 100644 --- a/Linphone/view/Style/AppIcons.qml +++ b/Linphone/view/Style/AppIcons.qml @@ -4,6 +4,7 @@ import QtQuick 2.15 QtObject { property string welcomeLinphoneLogo: "image://internal/linphone.svg" property string welcomeLock: "image://internal/secured.svg" + property string lock: "image://internal/lock.svg" property string welcomeOpenSource: "image://internal/open_source.svg" property string eyeHide: "image://internal/eye.svg" property string eyeShow: "image://internal/eye-slash.svg"