data/linux.x86.linphone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui login pages

Browse source
This commit is contained in:
Gaelle Braud 2024-04-09 12:45:05 +02:00 committed by Julien Wadel
parent 7e9714d6c5
commit b6bddabcce
16 changed files with 578 additions and 596 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Linphone/data/image/lock.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7.16667V4.5C12 2.29133 10.2087 0.5 8 0.5C5.79133 0.5 4 2.29133 4 4.5V7.16667H2V16.5H14V7.16667H12ZM8.66667 12.3153V13.8333H7.33333V12.3153C6.93667 12.084 6.66667 11.6593 6.66667 11.1667C6.66667 10.4307 7.264 9.83333 8 9.83333C8.736 9.83333 9.33333 10.4307 9.33333 11.1667C9.33333 11.6587 9.064 12.084 8.66667 12.3153ZM5.33333 4.5V7.16667H10.6667V4.5C10.6667 3.02933 9.47 1.83333 8 1.83333C6.52933 1.83333 5.33333 3.02933 5.33333 4.5Z" fill="#4E6074"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 608 B

28
Linphone/view/App/Layout/LoginLayout.qml
View file

@ -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
height: 108 * DefaultStyle.dp
source: AppIcons.belledonne
fillMode: Image.Stretch
}
}
}

2
Linphone/view/Item/BusyIndicator.qml
View file

@ -25,7 +25,7 @@ Item {
from: 0
to: 360
loops: Animation.Infinite
duration: 10000
duration: 15000
}
}
}

8
Linphone/view/Item/Button.qml
View file

@ -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 {

20
Linphone/view/Item/Carousel.qml
View file

@ -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}
}
}
}

2
Linphone/view/Item/CheckBox.qml
View file

@ -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

4
Linphone/view/Item/ErrorText.qml
View file

@ -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{

11
Linphone/view/Item/Form/LoginForm.qml
View file

@ -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")

4
Linphone/view/Item/PhoneNumberInput.qml
View file

@ -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]+/}
}
}
}

2
Linphone/view/Layout/FormItemLayout.qml
View file

@ -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
}
}

53
Linphone/view/Page/Login/LoginPage.qml
View file

@ -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,7 +28,10 @@ LoginLayout {
console.debug("[LoginLayout] User: return")
mainItem.goBack()
}
}
},
RowLayout {
spacing: 15 * DefaultStyle.dp
Layout.leftMargin: 21 * DefaultStyle.dp
Image {
fillMode: Image.PreserveAspectFit
source: AppIcons.profile
@ -41,9 +45,13 @@ LoginLayout {
weight: 800 * DefaultStyle.dp
}
}
},
Item {
Layout.fillWidth: true
}
},
RowLayout {
spacing: 20 * DefaultStyle.dp
Layout.rightMargin: 51 * DefaultStyle.dp
Text {
Layout.rightMargin: 15 * DefaultStyle.dp
text: qsTr("Pas encore de compte ?")
@ -63,36 +71,35 @@ LoginLayout {
}
}
}
centerContent: ColumnLayout {
Layout.leftMargin: 45 * DefaultStyle.dp
RowLayout {
]
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 {
Layout.topMargin: 40 * DefaultStyle.dp
inversedColors: true
leftPadding: 20 * DefaultStyle.dp
rightPadding: 20 * DefaultStyle.dp
topPadding: 11 * DefaultStyle.dp
bottomPadding: 11 * DefaultStyle.dp
Layout.preferredWidth: 235 * DefaultStyle.dp
Layout.preferredHeight: 47 * DefaultStyle.dp
text: qsTr("Compte SIP tiers")
onClicked: {mainItem.useSIPButtonClicked()}
}
}
Item {
Layout.fillWidth: 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
}
}
}
]
}

59
Linphone/view/Page/Login/RegisterCheckingPage.qml
View file

@ -9,7 +9,10 @@ LoginLayout {
property string phoneNumber
property string email
titleContent: RowLayout {
titleContent: [
RowLayout {
spacing: 21 * DefaultStyle.dp
Layout.leftMargin: 119 * DefaultStyle.dp
Button {
Layout.preferredHeight: 24 * DefaultStyle.dp
Layout.preferredWidth: 24 * DefaultStyle.dp
@ -40,36 +43,33 @@ LoginLayout {
}
scaleLettersFactor: 1.1
}
},
Item {
Layout.fillWidth: true
}
}
]
centerContent: ColumnLayout {
spacing: 2 * DefaultStyle.dp
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 {
Layout.alignment: Qt.AlignTop
font.bold: true
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)
var completeString = (mainItem.email.length > 0) ? ("email \"" + mainItem.email + "\"") : ("phone number \"" + mainItem.phoneNumber + "\"")
text = "We have sent a verification code on your " + completeString + " <br>Please enter the verification code below:"
}
font {
pixelSize: 22 * DefaultStyle.dp
weight: 800 * DefaultStyle.dp
}
}
RowLayout {
Layout.fillWidth: true
Layout.margins: 10 * DefaultStyle.dp
ColumnLayout {
spacing: 70 * DefaultStyle.dp
RowLayout {
spacing: 45 * DefaultStyle.dp
Repeater {
model: 4
DigitInput {
@ -77,33 +77,29 @@ LoginLayout {
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()
// TODO : validate()
}
} else {
if (index > 0)
nextItemInFocusChain(false).forceActiveFocus()
}
}
Layout.margins: 10 * DefaultStyle.dp
}
}
}
RowLayout {
Layout.alignment: Qt.AlignBottom
spacing: 20 * DefaultStyle.dp
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
@ -115,20 +111,17 @@ LoginLayout {
}
}
}
}
Item {
Layout.fillWidth: true
}
},
Image {
Layout.rightMargin: 40 * DefaultStyle.dp
Layout.preferredWidth: 300 * DefaultStyle.dp
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
}
}
Item {
Layout.fillHeight: true
}
}
]
}

265
Linphone/view/Page/Login/RegisterPage.qml
View file

@ -11,7 +11,10 @@ LoginLayout {
readonly property string phoneNumber: phoneNumberInput.phoneNumber
readonly property string email: emailInput.text
titleContent: RowLayout {
titleContent: [
RowLayout {
spacing: 21 * DefaultStyle.dp
Layout.leftMargin: 119 * DefaultStyle.dp
Image {
fillMode: Image.PreserveAspectFit
source: AppIcons.profile
@ -26,9 +29,13 @@ LoginLayout {
wrapMode: Text.NoWrap
scaleLettersFactor: 1.1
}
},
Item {
Layout.fillWidth: true
}
},
RowLayout {
spacing: 20 * DefaultStyle.dp
Layout.rightMargin: 51 * DefaultStyle.dp
Text {
Layout.rightMargin: 15 * DefaultStyle.dp
color: DefaultStyle.main2_700
@ -39,7 +46,6 @@ LoginLayout {
}
}
Button {
// Layout.alignment: Qt.AlignRight
leftPadding: 20 * DefaultStyle.dp
rightPadding: 20 * DefaultStyle.dp
topPadding: 11 * DefaultStyle.dp
@ -51,39 +57,56 @@ LoginLayout {
}
}
}
]
centerContent: ColumnLayout {
Layout.topMargin: 40 * DefaultStyle.dp
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")]
}
StackLayout {
currentIndex: bar.currentIndex
Layout.topMargin: 50 * DefaultStyle.dp
RowLayout {
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 15 * DefaultStyle.dp
spacing: 22 * DefaultStyle.dp
ColumnLayout {
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 {
RowLayout {
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
}
EffectImage {
imageSource: AppIcons.lock
colorizationColor: DefaultStyle.main2_600
Layout.preferredWidth: 16 * DefaultStyle.dp
Layout.preferredHeight: 16 * DefaultStyle.dp
}
}
}
StackLayout {
currentIndex: bar.currentIndex
Layout.fillWidth: true
PhoneNumberInput {
id: phoneNumberInput
label: qsTr("Phone number")
@ -91,131 +114,6 @@ LoginLayout {
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: ")
}
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")
}
}
}
}
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, "")
}
}
}
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")
mandatory: true
contentItem: TextField {
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
@ -224,8 +122,11 @@ LoginLayout {
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
}
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
text: qsTr("I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy.")
// 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")
}
}
}
}
}
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 email", emailInput.text)
if (emailInput.text.length == 0) {
emailInput.errorMessage = qsTr("You must enter an email")
return
}
mainItem.registerCalled("", "", emailInput.text)
console.log("[RegisterPage] User: Call register with phone number", phoneNumberInput.phoneNumber)
mainItem.registerCalled(phoneNumberInput.countryCode, phoneNumberInput.phoneNumber, emailInput.text)
}
}
}
Item {
Layout.fillWidth: true
}
},
Image {
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
}
}
}
}
]
}

93
Linphone/view/Page/Login/SIPLoginPage.qml
View file

@ -10,7 +10,10 @@ LoginLayout {
signal goToRegister()
signal connectionSucceed()
titleContent: RowLayout {
titleContent: [
RowLayout {
Layout.leftMargin: 119 * DefaultStyle.dp
spacing: 21 * DefaultStyle.dp
Button {
Layout.preferredHeight: 24 * DefaultStyle.dp
Layout.preferredWidth: 24 * DefaultStyle.dp
@ -41,9 +44,13 @@ LoginLayout {
}
scaleLettersFactor: 1.1
}
},
Item {
Layout.fillWidth: true
}
},
RowLayout {
Layout.rightMargin: 51 * DefaultStyle.dp
spacing: 20 * DefaultStyle.dp
Text {
Layout.rightMargin: 15 * DefaultStyle.dp
text: qsTr("Pas encore de compte ?")
@ -55,34 +62,25 @@ LoginLayout {
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()
}
}
}
]
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
ColumnLayout {
Layout.alignment: Qt.AlignVCenter
spacing: 10 * DefaultStyle.dp
// Layout.bottomMargin: 20 * DefaultStyle.dp
spacing: 0
Text {
Layout.fillWidth: true
Layout.preferredWidth: rootStackView.width
width: rootStackView.width
wrapMode: Text.WordWrap
color: DefaultStyle.main2_600
font {
@ -94,6 +92,7 @@ LoginLayout {
<p>To enable it in a commercial projet, please contact us. </p>"
}
Button {
Layout.topMargin: 18 * DefaultStyle.dp
text: "linphone.org/contact"
textSize: 13 * DefaultStyle.dp
inversedColors: true
@ -105,21 +104,28 @@ LoginLayout {
Qt.openUrlExternally(ConstantsCpp.ContactUrl)
}
}
Item {
Layout.preferredHeight: 85 * DefaultStyle.dp
}
Button {
Layout.fillWidth: true
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.fillWidth: true
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)
}
@ -132,7 +138,9 @@ LoginLayout {
Component {
id: secondItem
ColumnLayout {
spacing: 10 * DefaultStyle.dp
spacing: 0
ColumnLayout {
spacing: 16 * DefaultStyle.dp
FormItemLayout {
label: qsTr("Username")
mandatory: true
@ -173,6 +181,7 @@ LoginLayout {
model:[ "TCP", "UDP", "TLS", "DTLS"]
}
}
}
ErrorText {
id: errorText
@ -189,9 +198,11 @@ LoginLayout {
}
Button {
Layout.topMargin: 20 * DefaultStyle.dp
Layout.bottomMargin: 20 * DefaultStyle.dp
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")
@ -204,18 +215,28 @@ LoginLayout {
}
}
Item {
Layout.fillWidth: 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
}
}
]
}

47
Linphone/view/Page/Login/WelcomePage.qml
View file

@ -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 <b>sécurisée</b>,<br> <b>open source</b> et <b>française</b>.")},
{title: qsTr("Sécurisé"), text: qsTr("Vos communications sont en sécurité grâce aux <br><b>Chiffrement de bout en bout</b>.")},
{title: qsTr("Open Source"), text: qsTr("Une application open source et un <b>service gratuit</b> <br>depuis <b>2001</b>")}
// {title: qsTr("Sécurisé"), text: qsTr("Vos communications sont en sécurité grâce aux <br><b>Chiffrement de bout en bout</b>.")}
]
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

1
Linphone/view/Style/AppIcons.qml
View file

@ -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"