mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-17 11:28:07 +00:00
rearrange page layouts :
welcome page login page login form login layout register register check + items appearance (focus/error/disable/pressed)
This commit is contained in:
Gaelle Braud
parent
99b1fb9bde
commit
053d0bcacc
20 changed files with 600 additions and 430 deletions
|
|
@ -14,57 +14,67 @@ Item {
|
|||
property alias centerContent : centerLayout.children
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
Layout.fillHeight: true
|
||||
anchors.rightMargin: 30
|
||||
anchors.leftMargin: 80
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: bottomMountains.top
|
||||
spacing: 20
|
||||
ColumnLayout {
|
||||
Layout.rightMargin: 25
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 50
|
||||
Layout.topMargin: 20
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 50
|
||||
Layout.topMargin: 18
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||||
Control.Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.bottomMargin: 20
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||||
Control.Button {
|
||||
background: Rectangle {
|
||||
color: "transparent"
|
||||
}
|
||||
contentItem: Image {
|
||||
background: Rectangle {
|
||||
color: "transparent"
|
||||
}
|
||||
contentItem: RowLayout {
|
||||
Image {
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: AppIcons.info
|
||||
}
|
||||
onClicked: console.debug("[LoginLayout]User: open about popup")
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
|
||||
text: "About"
|
||||
font.pixelSize: 12
|
||||
color: DefaultStyle.aboutButtonTextColor
|
||||
}
|
||||
}
|
||||
onClicked: console.debug("[LoginLayout]User: open about popup")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
|
||||
textItem.text: "About"
|
||||
textItem.font.pixelSize: 12
|
||||
textItem.color: DefaultStyle.grayColor
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
id: titleLayout
|
||||
Layout.leftMargin: 40
|
||||
Layout.bottomMargin: 20
|
||||
}
|
||||
ColumnLayout {
|
||||
id: centerLayout
|
||||
Layout.leftMargin: 40
|
||||
Layout.fillHeight: true
|
||||
Layout.topMargin: 20
|
||||
}
|
||||
RowLayout {
|
||||
id: titleLayout
|
||||
Layout.bottomMargin: 20
|
||||
}
|
||||
ColumnLayout {
|
||||
id: centerLayout
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
Image {
|
||||
Layout.minimumHeight: 80
|
||||
Layout.fillWidth: true
|
||||
source: AppIcons.belledonne
|
||||
fillMode: Image.Stretch
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: bottomMountains
|
||||
// RectangleTest{color: "blue"}
|
||||
// Layout.alignment: Qt.AlignBottom
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
Image {
|
||||
Layout.minimumHeight: 50
|
||||
Layout.preferredHeight: 80
|
||||
Layout.fillWidth: true
|
||||
source: AppIcons.belledonne
|
||||
fillMode: Image.Stretch
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import Linphone
|
|||
|
||||
Window {
|
||||
id: mainWindow
|
||||
width: 960
|
||||
height: 600
|
||||
width: 1025
|
||||
height: 641
|
||||
visible: true
|
||||
title: qsTr("Linphone")
|
||||
|
||||
|
|
@ -42,7 +42,9 @@ Window {
|
|||
id: registerPage
|
||||
RegisterPage {
|
||||
onReturnToLogin: mainWindowStackView.replace(loginPage)
|
||||
onRegisterCalled: mainWindowStackView.push(checkingPage)
|
||||
onRegisterCalled: (countryCode, phoneNumber, email) => {
|
||||
mainWindowStackView.push(checkingPage, {"phoneNumber": phoneNumber, "email": email})
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
|
|
|
|||
|
|
@ -7,26 +7,33 @@ Control.Button {
|
|||
property int capitalization
|
||||
property bool inversedColors: false
|
||||
property int textSize: DefaultStyle.buttonTextSize
|
||||
property bool boldText: true
|
||||
|
||||
background: Rectangle {
|
||||
color: inversedColors ? DefaultStyle.buttonInversedBackground : DefaultStyle.buttonBackground
|
||||
color: inversedColors
|
||||
? mainItem.pressed
|
||||
? DefaultStyle.buttonPressedInversedBackground
|
||||
: DefaultStyle.buttonInversedBackground
|
||||
: mainItem.pressed
|
||||
? DefaultStyle.buttonPressedBackground
|
||||
: DefaultStyle.buttonBackground
|
||||
radius: 24
|
||||
border.color: inversedColors ? DefaultStyle.buttonBackground : DefaultStyle.buttonInversedBackground
|
||||
}
|
||||
|
||||
leftPadding: 13
|
||||
rightPadding: 13
|
||||
topPadding: 10
|
||||
bottomPadding: 10
|
||||
|
||||
contentItem: Text {
|
||||
textItem.horizontalAlignment: Text.AlignHCenter
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.leftPadding: 11
|
||||
textItem.rightPadding: 11
|
||||
textItem.topPadding: 6
|
||||
textItem.bottomPadding: 6
|
||||
|
||||
textItem.wrapMode: Text.WordWrap
|
||||
textItem.text: mainItem.text
|
||||
textItem.color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor
|
||||
textItem.font {
|
||||
bold: true
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
anchors.centerIn: parent
|
||||
wrapMode: Text.WordWrap
|
||||
text: mainItem.text
|
||||
color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor
|
||||
font {
|
||||
bold: mainItem.boldText
|
||||
pointSize: mainItem.textSize
|
||||
family: DefaultStyle.defaultFont
|
||||
capitalization: mainItem.capitalization
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ Control.CheckBox {
|
|||
|
||||
Text {
|
||||
visible: mainItem.checked
|
||||
textItem.text: "\u2714"
|
||||
textItem.font.pointSize: 18
|
||||
textItem.color: DefaultStyle.checkboxBorderColor
|
||||
text: "\u2714"
|
||||
font.pointSize: 18
|
||||
color: DefaultStyle.checkboxBorderColor
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,16 @@ ColumnLayout {
|
|||
property int backgroundWidth: 200
|
||||
// Usage : each item of the model list must be {text: ..., img: ...}
|
||||
property var modelList: []
|
||||
readonly property string currentText: selectedItemText.textItem.text
|
||||
readonly property string currentText: selectedItemText.text
|
||||
property bool enableBackgroundColors: true
|
||||
readonly property bool hasActiveFocus: combobox.activeFocus
|
||||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.text: mainItem.label
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
textItem.font {
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label
|
||||
color: combobox.activeFocus ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
|
||||
font {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
bold: true
|
||||
}
|
||||
|
|
@ -30,7 +32,8 @@ ColumnLayout {
|
|||
implicitWidth: mainItem.backgroundWidth
|
||||
implicitHeight: 30
|
||||
radius: 15
|
||||
color: DefaultStyle.formItemBackgroundColor
|
||||
color: combobox.enabled ? DefaultStyle.formItemBackgroundColor : DefaultStyle.formItemDisableBackgroundColor
|
||||
border.color: combobox.enabled ? DefaultStyle.formItemBorderColor : DefaultStyle.formItemDisableColor
|
||||
}
|
||||
contentItem: Item {
|
||||
anchors.left: parent.left
|
||||
|
|
@ -48,7 +51,8 @@ ColumnLayout {
|
|||
|
||||
Text {
|
||||
id: selectedItemText
|
||||
textItem.elide: Text.ElideRight
|
||||
color: combobox.enabled ? DefaultStyle.defaultTextColor : DefaultStyle.formItemDisableColor
|
||||
elide: Text.ElideRight
|
||||
anchors.left: selectedItemImg.right
|
||||
anchors.leftMargin: selectedItemImg.visible ? 5 : 10
|
||||
anchors.right: parent.right
|
||||
|
|
@ -62,9 +66,9 @@ ColumnLayout {
|
|||
selectedItemImg.source = mainItem.modelList[0].img
|
||||
}
|
||||
if (mainItem.modelList[index].text)
|
||||
selectedItemText.textItem.text = mainItem.modelList[0].text
|
||||
selectedItemText.text = mainItem.modelList[0].text
|
||||
else if (mainItem.modelList[index])
|
||||
selectedItemText.textItem.text = mainItem.modelList[0]
|
||||
selectedItemText.text = mainItem.modelList[0]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,12 +121,12 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
Text {
|
||||
textItem.text: modelData.text
|
||||
text: modelData.text
|
||||
? modelData.text
|
||||
: modelData
|
||||
? modelData
|
||||
: ""
|
||||
textItem.elide: Text.ElideRight
|
||||
elide: Text.ElideRight
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: delegateImg.right
|
||||
anchors.leftMargin: delegateImg.visible ? 5 : 10
|
||||
|
|
@ -142,7 +146,7 @@ ColumnLayout {
|
|||
}
|
||||
onPressed: {
|
||||
combobox.state = ""
|
||||
selectedItemText.textItem.text = modelData.text
|
||||
selectedItemText.text = modelData.text
|
||||
? modelData.text
|
||||
: modelData
|
||||
? modelData
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Linphone
|
|||
|
||||
Control.TextField {
|
||||
id: mainItem
|
||||
property int inputSize: 50
|
||||
property int inputSize: 60
|
||||
color: activeFocus ? DefaultStyle.digitInputFocusedColor : DefaultStyle.digitInputColor
|
||||
rightPadding: inputSize / 4
|
||||
leftPadding: inputSize / 4
|
||||
|
|
@ -34,6 +34,6 @@ Control.TextField {
|
|||
// // anchors.left: parent.left
|
||||
// // anchors.bottomMargin: inputSize/8
|
||||
// // transform: [/*Translate {x: mainItem.cursorRectangle.height},*/ Rotation {angle: -90}]
|
||||
// color: mainItem.activeFocus ? DefaultStyle.digitInputFocusedColor : DefaultStyle.digitInputColor
|
||||
// color:DefaultStyle.digitInputFocusedColor
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,67 +4,44 @@ import QtQuick.Controls as Control
|
|||
import Linphone
|
||||
|
||||
ColumnLayout {
|
||||
id: mainItem
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
signal useSIPButtonClicked()
|
||||
spacing: 15
|
||||
TextInput {
|
||||
id: username
|
||||
label: "Username"
|
||||
mandatory: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: password
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
clip: true
|
||||
|
||||
ColumnLayout {
|
||||
TextInput {
|
||||
id: username
|
||||
label: "Username"
|
||||
mandatory: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: password
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: lastFormLineLayout
|
||||
Button {
|
||||
text: 'Log in'
|
||||
Layout.rightMargin: 20
|
||||
onClicked: {
|
||||
LoginPageCpp.login(username.inputText, password.inputText);
|
||||
}
|
||||
}
|
||||
Text {
|
||||
textItem.color: DefaultStyle.grayColor
|
||||
textItem.text: "Forgotten password?"
|
||||
textItem.font.underline: true
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Button {
|
||||
Layout.topMargin: 40
|
||||
inversedColors: true
|
||||
text: "Use SIP Account"
|
||||
onClicked: {mainItem.useSIPButtonClicked()}
|
||||
}
|
||||
id: lastFormLineLayout
|
||||
Button {
|
||||
text: 'Log in'
|
||||
Layout.rightMargin: 20
|
||||
onClicked: {
|
||||
LoginPageCpp.login(username.inputText, password.inputText);
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Button {
|
||||
background: Item {
|
||||
visible: false
|
||||
}
|
||||
contentItem: Text {
|
||||
color: DefaultStyle.grayColor
|
||||
text: "Forgotten password?"
|
||||
font{
|
||||
underline: true
|
||||
pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
}
|
||||
onClicked: console.debug("[LoginForm]User: forgotten password button clicked")
|
||||
}
|
||||
Image {
|
||||
Layout.rightMargin: 40
|
||||
Layout.preferredWidth: 300
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: AppIcons.loginImage
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,14 @@ ColumnLayout {
|
|||
property int backgroundWidth: 100
|
||||
readonly property string currentText: combobox.model.getAt(combobox.currentIndex) ? combobox.model.getAt(combobox.currentIndex).countryCallingCode : ""
|
||||
property string defaultCallingCode: ""
|
||||
property bool enableBackgroundColors: false
|
||||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.text: mainItem.label
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
textItem.font {
|
||||
visible: mainItem.label.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label
|
||||
color: combobox.activeFocus ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
|
||||
font {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
bold: true
|
||||
}
|
||||
|
|
@ -33,28 +34,35 @@ ColumnLayout {
|
|||
implicitWidth: mainItem.backgroundWidth
|
||||
implicitHeight: 30
|
||||
radius: 15
|
||||
color: DefaultStyle.formItemBackgroundColor
|
||||
color: mainItem.enableBackgroundColor ? DefaultStyle.formItemBackgroundColor : "transparent"
|
||||
border.color: mainItem.enableBackgroundColors
|
||||
? (mainItem.errorMessage.length > 0
|
||||
? DefaultStyle.errorMessageColor
|
||||
: textField.activeFocus
|
||||
? DefaultStyle.formItemFocusBorderColor
|
||||
: DefaultStyle.formItemBorderColor)
|
||||
: "transparent"
|
||||
}
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
readonly property var currentItem: combobox.model.getAt(combobox.currentIndex)
|
||||
anchors.leftMargin: 15
|
||||
Text {
|
||||
visible: text.length > 0
|
||||
id: selectedItemFlag
|
||||
textItem.text: parent.currentItem ? parent.currentItem.flag : ""
|
||||
textItem.font.family: DefaultStyle.emojiFont
|
||||
visible: text.length > 0
|
||||
text: parent.currentItem ? parent.currentItem.flag : ""
|
||||
font.family: DefaultStyle.emojiFont
|
||||
anchors.rightMargin: 5
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Text {
|
||||
textItem.leftPadding: 5
|
||||
textItem.text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : ""
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
leftPadding: 5
|
||||
text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : ""
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
anchors.right: parent.right
|
||||
anchors.left: selectedItemFlag.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
textItem.elide: Text.ElideRight
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,8 +103,8 @@ ColumnLayout {
|
|||
Text {
|
||||
id: delegateImg;
|
||||
visible: text.length > 0
|
||||
textItem.text: $modelData.flag
|
||||
textItem.font.family: DefaultStyle.emojiFont
|
||||
text: $modelData.flag
|
||||
font.family: DefaultStyle.emojiFont
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: 15
|
||||
|
|
@ -104,13 +112,13 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
Text {
|
||||
textItem.text: "+" + $modelData.countryCallingCode
|
||||
textItem.elide: Text.ElideRight
|
||||
textItem.leftPadding: 5
|
||||
text: "+" + $modelData.countryCallingCode
|
||||
elide: Text.ElideRight
|
||||
leftPadding: 5
|
||||
anchors.left: delegateImg.right
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ ColumnLayout {
|
|||
id: mainItem
|
||||
|
||||
property string label: ""
|
||||
property string defaultText : ""
|
||||
property string errorMessage: ""
|
||||
property string placeholderText : ""
|
||||
property bool mandatory: false
|
||||
property int textInputWidth: 200
|
||||
readonly property string phoneNumber: textField.inputText
|
||||
|
|
@ -15,10 +16,10 @@ ColumnLayout {
|
|||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "")
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
textItem.font {
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label + (mainItem.mandatory ? "*" : "")
|
||||
color: (combobox.hasActiveFocus || textField.hasActiveFocus) ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
|
||||
font {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
bold: true
|
||||
}
|
||||
|
|
@ -29,6 +30,11 @@ ColumnLayout {
|
|||
implicitHeight: 30
|
||||
radius: 20
|
||||
color: DefaultStyle.formItemBackgroundColor
|
||||
border.color: mainItem.errorMessage.length > 0
|
||||
? DefaultStyle.errorMessageColor
|
||||
: (textField.hasActiveFocus || combobox.hasActiveFocus)
|
||||
? DefaultStyle.formItemFocusBorderColor
|
||||
: DefaultStyle.formItemBorderColor
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
PhoneNumberComboBox {
|
||||
|
|
@ -45,11 +51,27 @@ ColumnLayout {
|
|||
TextInput {
|
||||
id: textField
|
||||
Layout.fillWidth: true
|
||||
defaultText: mainItem.defaultText
|
||||
inputMethodHints: Qt.ImhDigitsOnly
|
||||
placeholderText: mainItem.placeholderText
|
||||
enableBackgroundColors: false
|
||||
fillWidth: true
|
||||
validator: IntValidator{}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: mainItem.errorMessage.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.errorMessage
|
||||
color: DefaultStyle.errorMessageColor
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.Wrap
|
||||
// maximumLineCount: 1
|
||||
font {
|
||||
pointSize: DefaultStyle.defaultTextSize
|
||||
family: DefaultStyle.defaultFont
|
||||
bold: true
|
||||
}
|
||||
Layout.preferredWidth: mainItem.textInputWidth
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import QtQuick 2.7 as QT
|
||||
import QtQuick 2.7 as Quick
|
||||
import QtQuick.Layouts 1.3
|
||||
import QtQuick.Controls 2.2 as Control
|
||||
import Linphone
|
||||
|
|
@ -11,11 +11,11 @@ Control.TabBar {
|
|||
: 0
|
||||
spacing: 40
|
||||
wheelEnabled: true
|
||||
background: QT.Item {
|
||||
background: Quick.Item {
|
||||
id: tabBarBackground
|
||||
anchors.fill: parent
|
||||
|
||||
QT.Rectangle {
|
||||
Quick.Rectangle {
|
||||
id: barBG
|
||||
height: 4
|
||||
color: DefaultStyle.lightGrayColor
|
||||
|
|
@ -23,7 +23,7 @@ Control.TabBar {
|
|||
width: parent.width
|
||||
}
|
||||
|
||||
// QT.Rectangle {
|
||||
// Quick.Rectangle {
|
||||
// height: 4
|
||||
// color: DefaultStyle.orangeColor
|
||||
// anchors.bottom: parent.bottom
|
||||
|
|
@ -34,17 +34,18 @@ Control.TabBar {
|
|||
// : 0
|
||||
// width: mainItem.currentItem ? mainItem.currentItem.width : 0
|
||||
// // clip: true
|
||||
// QT.Behavior on x { QT.NumberAnimation {duration: 100}}
|
||||
// QT.Behavior on width {QT.NumberAnimation {duration: 100}}
|
||||
// Quick.Behavior on x { Quick.NumberAnimation {duration: 100}}
|
||||
// Quick.Behavior on width {Quick.NumberAnimation {duration: 100}}
|
||||
// }
|
||||
}
|
||||
|
||||
QT.Repeater {
|
||||
Quick.Repeater {
|
||||
model: mainItem.model
|
||||
Control.TabButton {
|
||||
required property string modelData
|
||||
required property int index
|
||||
width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x)))
|
||||
// width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x)))
|
||||
width: txtMeter.advanceWidth
|
||||
hoverEnabled: true
|
||||
ToolTip {
|
||||
visible: tabText.truncated && hovered
|
||||
|
|
@ -52,10 +53,10 @@ Control.TabBar {
|
|||
text: modelData
|
||||
}
|
||||
|
||||
background: QT.Item {
|
||||
background: Quick.Item {
|
||||
anchors.fill: parent
|
||||
|
||||
QT.Rectangle {
|
||||
Quick.Rectangle {
|
||||
visible: mainItem.currentIndex === index
|
||||
height: 4
|
||||
color: DefaultStyle.orangeColor
|
||||
|
|
@ -65,21 +66,21 @@ Control.TabBar {
|
|||
}
|
||||
}
|
||||
|
||||
contentItem: QT.Text {
|
||||
contentItem: Quick.Text {
|
||||
id: tabText
|
||||
anchors.fill: parent
|
||||
font.bold: true
|
||||
color: DefaultStyle.defaultTextColor
|
||||
color: mainItem.currentIndex === index ? DefaultStyle.defaultTextColor : DefaultStyle.disableTextColor
|
||||
font.family: DefaultStyle.defaultFont
|
||||
font.pointSize: DefaultStyle.tabButtonTextSize
|
||||
elide: QT.Text.ElideRight
|
||||
elide: Quick.Text.ElideRight
|
||||
maximumLineCount: 1
|
||||
text: txtMeter.elidedText
|
||||
// width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x)))
|
||||
bottomPadding: 5
|
||||
}
|
||||
|
||||
QT.TextMetrics {
|
||||
Quick.TextMetrics {
|
||||
id: txtMeter
|
||||
font: tabText.font
|
||||
text: modelData
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Window {
|
|||
RowLayout {
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "Combobox with image"
|
||||
text: "Combobox with image"
|
||||
}
|
||||
ComboBox {
|
||||
modelList: [
|
||||
|
|
@ -24,7 +24,7 @@ Window {
|
|||
}
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "Combobox without image"
|
||||
text: "Combobox without image"
|
||||
}
|
||||
ComboBox {
|
||||
modelList: [
|
||||
|
|
@ -63,59 +63,59 @@ Window {
|
|||
Component {
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "item 1"
|
||||
text: "item 1"
|
||||
}
|
||||
Text {
|
||||
textItem.text: "item 1"
|
||||
text: "item 1"
|
||||
}
|
||||
}
|
||||
},
|
||||
Component {
|
||||
RowLayout {
|
||||
Text {
|
||||
textItem.text: "item 2"
|
||||
text: "item 2"
|
||||
}
|
||||
Text {
|
||||
textItem.text: "item 2"
|
||||
text: "item 2"
|
||||
}
|
||||
}
|
||||
},
|
||||
Component {
|
||||
Text {
|
||||
textItem.text: "item 3"
|
||||
text: "item 3"
|
||||
}
|
||||
},
|
||||
Component {
|
||||
Text {
|
||||
textItem.text: "item 4"
|
||||
text: "item 4"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Text {
|
||||
textItem.text: "default text"
|
||||
text: "default text"
|
||||
}
|
||||
Text {
|
||||
id: testText
|
||||
scaleLettersFactor: 2
|
||||
textItem.text: "scaled text"
|
||||
text: "scaled text"
|
||||
}
|
||||
RowLayout {
|
||||
TextInput {
|
||||
label: "mandatory text input"
|
||||
defaultText: "default text"
|
||||
placeholderText: "default text"
|
||||
mandatory: true
|
||||
}
|
||||
TextInput {
|
||||
label: "password text input"
|
||||
defaultText: "default text"
|
||||
placeholderText: "default text"
|
||||
hidden: true
|
||||
}
|
||||
TextInput {
|
||||
id: next
|
||||
label: "text input with long long looooooooooooooooooooooooooooooooooooooooooooooooooooooooong label"
|
||||
defaultText: "long long long default text"
|
||||
placeholderText: "long long long default text"
|
||||
}
|
||||
TextInput {
|
||||
label: "number text input"
|
||||
|
|
@ -125,7 +125,7 @@ Window {
|
|||
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "4 digit inputs"
|
||||
text: "4 digit inputs"
|
||||
}
|
||||
RowLayout {
|
||||
Repeater {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,26 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick 2.7 as Quick
|
||||
import QtQuick.Layouts
|
||||
import Linphone
|
||||
|
||||
RowLayout {
|
||||
id: mainItem
|
||||
property alias textItem: innerItem
|
||||
Quick.Text {
|
||||
property double scaleLettersFactor: 1.
|
||||
Text {
|
||||
id: innerItem
|
||||
font.family: DefaultStyle.defaultFont
|
||||
font.pointSize: DefaultStyle.defaultFontPointSize
|
||||
color: DefaultStyle.defaultTextColor
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
transformOrigin: Item.TopLeft
|
||||
transform: Scale {
|
||||
yScale: mainItem.scaleLettersFactor
|
||||
}
|
||||
width: txtMeter.advanceWidth
|
||||
id: innerItem
|
||||
// Layout.preferredWidth: mainItem.width
|
||||
// width: mainItem.width
|
||||
font.family: DefaultStyle.defaultFont
|
||||
font.pointSize: DefaultStyle.defaultFontPointSize
|
||||
color: DefaultStyle.defaultTextColor
|
||||
wrapMode: Quick.Text.Wrap
|
||||
elide: Quick.Text.ElideRight
|
||||
transformOrigin: Quick.Item.TopLeft
|
||||
transform: Quick.Scale {
|
||||
yScale: scaleLettersFactor//mainItem.scaleLettersFactor
|
||||
}
|
||||
|
||||
Quick.TextMetrics {
|
||||
id: txtMeter
|
||||
text: innerItem.text
|
||||
font: innerItem.font
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Controls as Control
|
||||
import QtQuick.Layouts 1.0
|
||||
import Linphone
|
||||
|
||||
|
|
@ -7,24 +7,26 @@ ColumnLayout {
|
|||
id: mainItem
|
||||
|
||||
property string label: ""
|
||||
property string defaultText : ""
|
||||
property string errorMessage: ""
|
||||
property string placeholderText: ""
|
||||
property bool mandatory: false
|
||||
property bool hidden: false
|
||||
property int textInputWidth: 200
|
||||
property var inputMethodHints: Qt.ImhNone
|
||||
property var validator: RegularExpressionValidator{}
|
||||
readonly property string inputText: textField.text
|
||||
property bool fillWidth: false
|
||||
property bool enableBackgroundColors: true
|
||||
property string inputText: textField.text
|
||||
readonly property bool hasActiveFocus: textField.activeFocus
|
||||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "")
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
textItem.elide: Text.ElideRight
|
||||
textItem.wrapMode: Text.Wrap
|
||||
textItem.maximumLineCount: 1
|
||||
textItem.font {
|
||||
visible: mainItem.label.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label + (mainItem.mandatory ? "*" : "")
|
||||
color: textField.activeFocus ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.Wrap
|
||||
maximumLineCount: 1
|
||||
font {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
family: DefaultStyle.defaultFont
|
||||
bold: true
|
||||
|
|
@ -41,37 +43,64 @@ ColumnLayout {
|
|||
implicitWidth: mainItem.textInputWidth
|
||||
implicitHeight: 30
|
||||
radius: 20
|
||||
color: DefaultStyle.formItemBackgroundColor
|
||||
opacity: 0.7
|
||||
TextField {
|
||||
color: mainItem.enableBackgroundColors ? DefaultStyle.formItemBackgroundColor : "transparent"
|
||||
border.color: mainItem.enableBackgroundColors
|
||||
? (mainItem.errorMessage.length > 0
|
||||
? DefaultStyle.errorMessageColor
|
||||
: textField.activeFocus
|
||||
? DefaultStyle.formItemFocusBorderColor
|
||||
: DefaultStyle.formItemBorderColor)
|
||||
: "transparent"
|
||||
Control.TextField {
|
||||
id: textField
|
||||
anchors.left: parent.left
|
||||
anchors.right: eyeButton.visible ? eyeButton.left : parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
placeholderText: mainItem.defaultText
|
||||
placeholderText: mainItem.placeholderText
|
||||
echoMode: (mainItem.hidden && !eyeButton.checked) ? TextInput.Password : TextInput.Normal
|
||||
font.family: DefaultStyle.defaultFont
|
||||
font.pointSize: DefaultStyle.formTextInputSize
|
||||
font.pointSize: DefaultStyle.defaultFontPointSize
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
inputMethodHints: mainItem.inputMethodHints
|
||||
selectByMouse: true
|
||||
validator: mainItem.validator
|
||||
background: Item {
|
||||
opacity: 0.
|
||||
}
|
||||
cursorDelegate: Rectangle {
|
||||
visible: textField.activeFocus
|
||||
color: DefaultStyle.formItemFocusBorderColor
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
Button {
|
||||
Control.Button {
|
||||
id: eyeButton
|
||||
visible: mainItem.hidden
|
||||
checkable: true
|
||||
background: Rectangle {
|
||||
color: "transparent"
|
||||
}
|
||||
anchors.right: parent.right
|
||||
contentItem: Image {
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: eyeButton.checked ? AppIcons.eyeHide : AppIcons.eyeShow
|
||||
source: eyeButton.checked ? AppIcons.eyeShow : AppIcons.eyeHide
|
||||
}
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.right: parent.right
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Text {
|
||||
visible: mainItem.errorMessage.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.errorMessage
|
||||
color: DefaultStyle.errorMessageColor
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.Wrap
|
||||
// maximumLineCount: 1
|
||||
font {
|
||||
pointSize: DefaultStyle.defaultTextSize
|
||||
family: DefaultStyle.defaultFont
|
||||
bold: true
|
||||
}
|
||||
Layout.preferredWidth: mainItem.textInputWidth
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ Control.ToolTip {
|
|||
radius: 15
|
||||
}
|
||||
contentItem: Text {
|
||||
textItem.text: mainItem.text
|
||||
textItem.color: DefaultStyle.defaultTextColor
|
||||
textItem.width: tooltipBackground.width
|
||||
textItem.wrapMode: Text.Wrap
|
||||
textItem.elide: Text.ElideRight
|
||||
text: mainItem.text
|
||||
color: DefaultStyle.defaultTextColor
|
||||
width: tooltipBackground.width
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
|
@ -14,9 +14,9 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
textItem.text: "Login"
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
text: "Login"
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -24,8 +24,8 @@ LoginLayout {
|
|||
}
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
textItem.text: "No account yet ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
text: "No account yet ?"
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
|
@ -38,8 +38,37 @@ LoginLayout {
|
|||
}
|
||||
}
|
||||
|
||||
centerContent: LoginForm {
|
||||
onUseSIPButtonClicked: mainItem.useSIPButtonClicked()
|
||||
centerContent: ColumnLayout {
|
||||
signal useSIPButtonClicked()
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
clip: true
|
||||
spacing: 15
|
||||
|
||||
LoginForm{}
|
||||
|
||||
Button {
|
||||
Layout.topMargin: 40
|
||||
inversedColors: true
|
||||
text: "Use SIP Account"
|
||||
onClicked: {mainItem.useSIPButtonClicked()}
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Image {
|
||||
Layout.rightMargin: 40
|
||||
Layout.preferredWidth: 300
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: AppIcons.loginImage
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,12 +29,13 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
textItem.text: {
|
||||
wrapMode: Text.NoWrap
|
||||
text: {
|
||||
var completeString = (mainItem.email.length > 0) ? "email" : "phone number"
|
||||
text = "Register | Register with your " + completeString
|
||||
}
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -43,13 +44,14 @@ LoginLayout {
|
|||
}
|
||||
|
||||
centerContent: ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
spacing: 2
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
textItem.font.bold: true
|
||||
textItem.text: {
|
||||
var completeString = (mainItem.email.length > 0) ? ("email" + mainItem.email) : ("phone number" + mainItem.phoneNumber)
|
||||
font.bold: true
|
||||
font.pointSize: DefaultStyle.defaultFontPointSize
|
||||
color: DefaultStyle.questionTextColor
|
||||
text: {
|
||||
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:"
|
||||
}
|
||||
}
|
||||
|
|
@ -57,28 +59,33 @@ LoginLayout {
|
|||
Layout.fillWidth: true
|
||||
Layout.margins: 10
|
||||
ColumnLayout {
|
||||
spacing: 70
|
||||
RowLayout {
|
||||
Repeater {
|
||||
model: 4
|
||||
DigitInput {
|
||||
required property int index
|
||||
onTextEdited: if (text.length > 0 ) {
|
||||
console.log("next", nextItemInFocusChain(true))
|
||||
if (index < 3)
|
||||
nextItemInFocusChain(true).forceActiveFocus()
|
||||
else {
|
||||
// validate()
|
||||
}
|
||||
} else {
|
||||
if (index > 0)
|
||||
nextItemInFocusChain(false).forceActiveFocus()
|
||||
}
|
||||
Layout.margins: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
textItem.text: "Didn't receive the code ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
text: "Didn't receive the code ?"
|
||||
color: DefaultStyle.questionTextColor
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
|
@ -100,6 +107,9 @@ LoginLayout {
|
|||
source: AppIcons.verif_page_image
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import Linphone
|
|||
LoginLayout {
|
||||
id: mainItem
|
||||
signal returnToLogin()
|
||||
signal registerCalled()
|
||||
signal registerCalled(countryCode: string, phoneNumber: string, email: string)
|
||||
readonly property string countryCode: phoneNumberInput.countryCode
|
||||
readonly property string phoneNumber: phoneNumberInput.phoneNumber
|
||||
readonly property string email: emailInput.inputText
|
||||
|
|
@ -17,9 +17,11 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
textItem.text: "Register"
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
Layout.preferredWidth: width
|
||||
text: "Register"
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
wrapMode: Text.NoWrap
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -27,11 +29,12 @@ LoginLayout {
|
|||
}
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
textItem.text: "Already have an account ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
color: DefaultStyle.questionTextColor
|
||||
text: "Already have an account ?"
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
// Layout.alignment: Qt.AlignRight
|
||||
inversedColors: true
|
||||
text: "Log in"
|
||||
onClicked: {
|
||||
|
|
@ -53,6 +56,7 @@ LoginLayout {
|
|||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
spacing: 15
|
||||
RowLayout {
|
||||
TextInput {
|
||||
label: "Username"
|
||||
|
|
@ -61,6 +65,7 @@ LoginLayout {
|
|||
}
|
||||
ComboBox {
|
||||
label: " "
|
||||
enabled: false
|
||||
modelList: [{text:"@sip.linphone.org"}]
|
||||
}
|
||||
}
|
||||
|
|
@ -68,42 +73,59 @@ LoginLayout {
|
|||
id: phoneNumberInput
|
||||
label: "Phone number"
|
||||
mandatory: true
|
||||
defaultText: "Phone number"
|
||||
placeholderText: "Phone number"
|
||||
textInputWidth: 250
|
||||
}
|
||||
RowLayout {
|
||||
TextInput {
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
ColumnLayout {
|
||||
TextInput {
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
Text {
|
||||
text: "The password must contain 6 characters minimum"
|
||||
font {
|
||||
pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
}
|
||||
}
|
||||
TextInput {
|
||||
label: "Confirm password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
ColumnLayout {
|
||||
TextInput {
|
||||
label: "Confirm password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
Text {
|
||||
text: "The password must contain 6 characters minimum"
|
||||
font {
|
||||
pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
textItem.text: "I would like to suscribe to the newsletter"
|
||||
text: "I would like to suscribe to the newsletter"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
textItem.text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
Layout.preferredWidth: 450
|
||||
text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
}
|
||||
}
|
||||
Button {
|
||||
text: "Register"
|
||||
onClicked:{
|
||||
console.log("[RegisterPage] User: Call register")
|
||||
mainItem.registerCalled()
|
||||
console.log("[RegisterPage] User: Call register with phone number", phoneNumberInput.phoneNumber)
|
||||
mainItem.registerCalled(phoneNumberInput.countryCode, phoneNumberInput.phoneNumber, "")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -121,6 +143,7 @@ LoginLayout {
|
|||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
spacing: 15
|
||||
RowLayout {
|
||||
TextInput {
|
||||
label: "Username"
|
||||
|
|
@ -131,6 +154,7 @@ LoginLayout {
|
|||
// if we don't set a label this item is offset
|
||||
// due to the invisibility of the upper label
|
||||
label: " "
|
||||
enabled: false
|
||||
modelList: [{text:"@sip.linphone.org"}]
|
||||
}
|
||||
}
|
||||
|
|
@ -141,39 +165,62 @@ LoginLayout {
|
|||
textInputWidth: 250
|
||||
}
|
||||
RowLayout {
|
||||
TextInput {
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
ColumnLayout {
|
||||
TextInput {
|
||||
id: pwdInput
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
Text {
|
||||
text: "The password must contain 6 characters minimum"
|
||||
font {
|
||||
pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
}
|
||||
}
|
||||
TextInput {
|
||||
label: "Confirm password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
ColumnLayout {
|
||||
TextInput {
|
||||
id: confirmPwdInput
|
||||
label: "Confirm password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
Text {
|
||||
text: "The password must contain 6 characters minimum"
|
||||
font {
|
||||
pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
textItem.text: "I would like to suscribe to the newsletter"
|
||||
text: "I would like to suscribe to the newsletter"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
textItem.text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
Layout.preferredWidth: 450
|
||||
text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
}
|
||||
}
|
||||
Button {
|
||||
text: "Register"
|
||||
onClicked:{
|
||||
console.log("[RegisterPage] User: Call register")
|
||||
mainItem.registerCalled()
|
||||
console.log("[RegisterPage] User: Call register with email", emailInput.inputText)
|
||||
if (emailInput.inputText.length == 0) {
|
||||
emailInput.errorMessage = "You must enter an email"
|
||||
return
|
||||
}
|
||||
mainItem.registerCalled("", "", emailInput.inputText)
|
||||
}
|
||||
}
|
||||
}
|
||||
Item {
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
textItem.text: "Use a SIP Account"
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
text: "Use a SIP Account"
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -38,8 +38,8 @@ LoginLayout {
|
|||
}
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
textItem.text: "No account yet ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
text: "No account yet ?"
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
|
@ -51,129 +51,140 @@ LoginLayout {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerContent: ColumnLayout {
|
||||
signal useSIPButtonClicked()
|
||||
RowLayout {
|
||||
|
||||
ColumnLayout {
|
||||
Layout.preferredWidth: 330
|
||||
Layout.maximumWidth: 340
|
||||
Control.StackView {
|
||||
id: rootStackView
|
||||
initialItem: firstItem
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
centerContent: RowLayout {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
ColumnLayout {
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
clip: true
|
||||
|
||||
Control.StackView {
|
||||
id: rootStackView
|
||||
initialItem: firstItem
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
Component {
|
||||
id: firstItem
|
||||
ColumnLayout {
|
||||
|
||||
Text {
|
||||
Layout.preferredWidth: 361
|
||||
Layout.fillWidth: true
|
||||
textItem.wrapMode: Text.WordWrap
|
||||
textItem.color: DefaultStyle.darkGrayColor
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
textItem.text: "<p>Some features require a Linphone account, such as group messaging, video conferences...</p>
|
||||
<p>These features are hidden when you register with a third party SIP account.</p>
|
||||
<p>To enable it in a commercial projet, please contact us. </p>"
|
||||
}
|
||||
|
||||
Button {
|
||||
text: 'linphone.org/contact'
|
||||
textSize: 8
|
||||
inversedColors: true
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(ConstantsCpp.ContactUrl)
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Component {
|
||||
id: firstItem
|
||||
ColumnLayout {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
Layout.maximumWidth: rootStackView.width
|
||||
clip: true
|
||||
|
||||
Button {
|
||||
Layout.fillWidth: true
|
||||
text: 'I prefere create an account'
|
||||
inversedColors: true
|
||||
onClicked: {
|
||||
console.debug("[LoginItem] User: click register")
|
||||
mainItem.goToRegister()
|
||||
ColumnLayout {
|
||||
Text {
|
||||
Layout.preferredWidth: rootStackView.width
|
||||
width: rootStackView.width
|
||||
|
||||
wrapMode: Text.WordWrap
|
||||
color: DefaultStyle.darkGrayColor
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
text: "<p>Some features require a Linphone account, such as group messaging, video conferences...</p>
|
||||
<p>These features are hidden when you register with a third party SIP account.</p>
|
||||
<p>To enable it in a commercial projet, please contact us. </p>"
|
||||
}
|
||||
Button {
|
||||
text: "linphone.org/contact"
|
||||
textSize: 8
|
||||
inversedColors: true
|
||||
onClicked: {
|
||||
Qt.openUrlExternally(ConstantsCpp.ContactUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
Layout.fillWidth: true
|
||||
Layout.bottomMargin: 40
|
||||
text: 'I understand'
|
||||
onClicked: {
|
||||
rootStackView.replace(secondItem)
|
||||
ColumnLayout {
|
||||
spacing: 10
|
||||
Layout.bottomMargin: 20
|
||||
Button {
|
||||
Layout.fillWidth: true
|
||||
inversedColors: true
|
||||
text: "I prefer creating an account"
|
||||
onClicked: {
|
||||
console.debug("[LoginItem] User: click register")
|
||||
mainItem.goToRegister()
|
||||
}
|
||||
}
|
||||
Button {
|
||||
Layout.fillWidth: true
|
||||
text: "I understand"
|
||||
onClicked: {
|
||||
rootStackView.replace(secondItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Component {
|
||||
id: secondItem
|
||||
ColumnLayout {
|
||||
TextInput {
|
||||
id: username
|
||||
label: "Username"
|
||||
mandatory: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: password
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: domain
|
||||
label: "Domain"
|
||||
mandatory: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: displayName
|
||||
label: "Display Name"
|
||||
textInputWidth: 250
|
||||
}
|
||||
ComboBox {
|
||||
label: "Transport"
|
||||
backgroundWidth: 250
|
||||
modelList:[
|
||||
{text:"TCP"},
|
||||
{text:"UDP"},
|
||||
{text:"TLS"}
|
||||
]
|
||||
}
|
||||
|
||||
Button {
|
||||
Layout.bottomMargin: 20
|
||||
|
||||
text: 'Log in'
|
||||
onClicked: {
|
||||
console.debug("[SIPLoginPage] User: Log in")
|
||||
LoginPageCpp.login(username.inputText, password.inputText);
|
||||
Component {
|
||||
id: secondItem
|
||||
ColumnLayout {
|
||||
spacing: 10
|
||||
TextInput {
|
||||
id: username
|
||||
label: "Username"
|
||||
mandatory: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: password
|
||||
label: "Password"
|
||||
mandatory: true
|
||||
hidden: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: domain
|
||||
label: "Domain"
|
||||
mandatory: true
|
||||
textInputWidth: 250
|
||||
}
|
||||
TextInput {
|
||||
id: displayName
|
||||
label: "Display Name"
|
||||
textInputWidth: 250
|
||||
}
|
||||
ComboBox {
|
||||
label: "Transport"
|
||||
backgroundWidth: 250
|
||||
modelList:[
|
||||
{text:"TCP"},
|
||||
{text:"UDP"},
|
||||
{text:"TLS"}
|
||||
]
|
||||
}
|
||||
|
||||
Button {
|
||||
Layout.topMargin: 20
|
||||
Layout.bottomMargin: 20
|
||||
|
||||
text: "Log in"
|
||||
onClicked: {
|
||||
console.debug("[SIPLoginPage] User: Log in")
|
||||
LoginPageCpp.login(username.inputText, password.inputText);
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Image {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
Layout.rightMargin: 40
|
||||
Layout.preferredWidth: 300
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: AppIcons.loginImage
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Image {
|
||||
Layout.rightMargin: 40
|
||||
Layout.preferredWidth: 300
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: AppIcons.loginImage
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,39 +11,34 @@ LoginLayout {
|
|||
titleContent: RowLayout {
|
||||
Text {
|
||||
id: welcome
|
||||
textItem.text: "Welcome"
|
||||
textItem.color: DefaultStyle.titleColor
|
||||
textItem.font.pointSize: DefaultStyle.title1FontPointSize
|
||||
textItem.font.bold: true
|
||||
text: "Welcome"
|
||||
color: DefaultStyle.titleColor
|
||||
font.pointSize: DefaultStyle.title1FontPointSize
|
||||
font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
Layout.leftMargin: 10
|
||||
Layout.bottomMargin: 5
|
||||
textItem.color: DefaultStyle.titleColor
|
||||
textItem.text: "in Linphone"
|
||||
textItem.font.pointSize: 18
|
||||
textItem.font.bold: true
|
||||
color: DefaultStyle.titleColor
|
||||
text: "in Linphone"
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Control.Button {
|
||||
leftPadding: 13
|
||||
rightPadding: 13
|
||||
topPadding: 20
|
||||
bottomPadding: 20
|
||||
Button {
|
||||
visible: carousel.currentIndex < (carousel.itemsCount - 1)
|
||||
flat: true
|
||||
checkable: false
|
||||
background: Rectangle {
|
||||
color: "transparent"
|
||||
radius: 48
|
||||
background: Item {
|
||||
visible: false
|
||||
}
|
||||
contentItem: Text {
|
||||
textItem.text: "Skip"
|
||||
textItem.font.underline: true
|
||||
text: "Skip"
|
||||
font.underline: true
|
||||
}
|
||||
onClicked: {
|
||||
console.debug("[LoginItem] User: Click skip")
|
||||
|
|
@ -71,22 +66,23 @@ LoginLayout {
|
|||
model: [
|
||||
{title: "Linphone", text: "Une application de communication <b>sécurisée</b>,<br> <b>open source</b> et <b>française</b>."},
|
||||
{title: "Sécurisé", text: "Vos communications sont en sécurité grâce aux <br><b>Chiffrement de bout en bout</b>."},
|
||||
{title: "Open Source", text: "Une application open source et un <b>service gratuit</b> depuis <b>2001</b>"},
|
||||
{title: "Open Source", text: "Une application open source et un <b>service gratuit</b> <br>depuis <b>2001</b>"},
|
||||
]
|
||||
Item {
|
||||
ColumnLayout {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 15
|
||||
Text {
|
||||
textItem.text: modelData.title
|
||||
textItem.font.bold: true
|
||||
textItem.font.pixelSize: 20
|
||||
text: modelData.title
|
||||
font.bold: true
|
||||
font.pixelSize: 20
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Text {
|
||||
Layout.maximumWidth: 361
|
||||
textItem.wrapMode: Text.WordWrap
|
||||
textItem.font.pixelSize: 11
|
||||
textItem.text: modelData.text
|
||||
wrapMode: Text.WordWrap
|
||||
font.pixelSize: 11
|
||||
text: modelData.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,28 +3,35 @@ import QtQuick 2.15
|
|||
|
||||
QtObject {
|
||||
|
||||
property string defaultFont: "Noto Sans"
|
||||
property string emojiFont: "Noto Color Emoji"
|
||||
property color orangeColor: "#FE5E00"
|
||||
property color buttonBackground: "#FE5E00"
|
||||
property color buttonPressedBackground: "#c74b02"
|
||||
property color buttonInversedBackground: "white"
|
||||
property color buttonPressedInversedBackground: "#fff1e8"
|
||||
property color buttonTextColor: "white"
|
||||
property color buttonInversedTextColor: "#FE5E00"
|
||||
property color checkboxBorderColor: "#FE5E00"
|
||||
property double checkboxBorderWidth: 2
|
||||
property int buttonTextSize: 10
|
||||
property int tabButtonTextSize: 11
|
||||
property color titleColor: "#22334D"
|
||||
property color defaultTextColor: "#4E6074"
|
||||
property int defaultTextSize: 8
|
||||
property color carouselLightGrayColor: "#DFECF2"
|
||||
property color formItemLabelColor: "#4E6074"
|
||||
property int formItemLabelSize: 8
|
||||
property int formTextInputSize: 10
|
||||
property color carouselLightGrayColor: "#DFECF2"
|
||||
property color formItemBackgroundColor: "#EDEDED"
|
||||
property color formItemDisableColor: "#949494"
|
||||
property color formItemDisableBackgroundColor: "#EDEDED"
|
||||
property color formItemBackgroundColor: "#F9F9F9"
|
||||
property color formItemBorderColor: "#EDEDED"
|
||||
property color formItemFocusBorderColor: "#FE5E00"
|
||||
|
||||
property color comboBoxHighlightColor: "#C0D1D9"
|
||||
property color comboBoxHoverColor: "#6C7A87"
|
||||
|
||||
property color aboutButtonTextColor: "#6C7A87"
|
||||
|
||||
property color questionTextColor: "#364860"
|
||||
property color errorMessageColor: "#DD5F5F"
|
||||
|
||||
property color tooltipBackgroundColor: "#DFECF2"
|
||||
|
||||
property color digitInputFocusedColor: "#FE5E00"
|
||||
|
|
@ -35,7 +42,12 @@ QtObject {
|
|||
property color grayColor: "#6C7A87"
|
||||
property color lightGrayColor: "#EDEDED"
|
||||
|
||||
property color defaultTextColor: "#4E6074"
|
||||
property color disableTextColor: "#9AABB5"
|
||||
property int defaultTextSize: 7
|
||||
property string defaultFont: "Noto Sans"
|
||||
property int defaultFontPointSize: 10
|
||||
property int title1FontPointSize: 40
|
||||
property int title1FontPointSize: 50
|
||||
property int title2FontPointSize: 20
|
||||
property color titleColor: "#22334D"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue