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

rearrange page layouts :

Browse source 
welcome page
login page
login form
login layout
register
register check

+ items appearance (focus/error/disable/pressed)
This commit is contained in:
Gaelle Braud 2023-10-31 13:49:31 +01:00
parent 99b1fb9bde
commit 053d0bcacc
20 changed files with 600 additions and 430 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,57 +14,67 @@ Item {
property alias centerContent : centerLayout.children property alias centerContent : centerLayout.children
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.rightMargin: 30
Layout.fillHeight: true anchors.leftMargin: 80
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: bottomMountains.top
spacing: 20
ColumnLayout { ColumnLayout {
Layout.rightMargin: 25 Layout.fillWidth: true
RowLayout { Layout.preferredHeight: 50
Layout.fillWidth: true Layout.topMargin: 18
Layout.preferredHeight: 50 Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.topMargin: 20 Control.Button {
Layout.alignment: Qt.AlignRight
Layout.bottomMargin: 20 Layout.bottomMargin: 20
Layout.alignment: Qt.AlignRight | Qt.AlignTop background: Rectangle {
Control.Button { color: "transparent"
background: Rectangle { }
color: "transparent" contentItem: RowLayout {
} Image {
contentItem: Image {
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
source: AppIcons.info 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 { RowLayout {
Layout.alignment: Qt.AlignBottom id: titleLayout
Image { Layout.bottomMargin: 20
Layout.minimumHeight: 80
Layout.fillWidth: true
source: AppIcons.belledonne
fillMode: Image.Stretch
}
} }
ColumnLayout {
id: centerLayout
Layout.fillHeight: true
}
}
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
}
} }
} }

8
Linphone/view/App/Main.qml
View file

@ -6,8 +6,8 @@ import Linphone
Window { Window {
id: mainWindow id: mainWindow
width: 960 width: 1025
height: 600 height: 641
visible: true visible: true
title: qsTr("Linphone") title: qsTr("Linphone")
@ -42,7 +42,9 @@ Window {
id: registerPage id: registerPage
RegisterPage { RegisterPage {
onReturnToLogin: mainWindowStackView.replace(loginPage) onReturnToLogin: mainWindowStackView.replace(loginPage)
onRegisterCalled: mainWindowStackView.push(checkingPage) onRegisterCalled: (countryCode, phoneNumber, email) => {
mainWindowStackView.push(checkingPage, {"phoneNumber": phoneNumber, "email": email})
}
} }
} }
Component { Component {

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

@ -7,26 +7,33 @@ Control.Button {
property int capitalization property int capitalization
property bool inversedColors: false property bool inversedColors: false
property int textSize: DefaultStyle.buttonTextSize property int textSize: DefaultStyle.buttonTextSize
property bool boldText: true
background: Rectangle { background: Rectangle {
color: inversedColors ? DefaultStyle.buttonInversedBackground : DefaultStyle.buttonBackground color: inversedColors
? mainItem.pressed
? DefaultStyle.buttonPressedInversedBackground
: DefaultStyle.buttonInversedBackground
: mainItem.pressed
? DefaultStyle.buttonPressedBackground
: DefaultStyle.buttonBackground
radius: 24 radius: 24
border.color: inversedColors ? DefaultStyle.buttonBackground : DefaultStyle.buttonInversedBackground border.color: inversedColors ? DefaultStyle.buttonBackground : DefaultStyle.buttonInversedBackground
} }
contentItem: Text { leftPadding: 13
textItem.horizontalAlignment: Text.AlignHCenter rightPadding: 13
textItem.verticalAlignment: Text.AlignVCenter topPadding: 10
textItem.leftPadding: 11 bottomPadding: 10
textItem.rightPadding: 11
textItem.topPadding: 6
textItem.bottomPadding: 6
textItem.wrapMode: Text.WordWrap contentItem: Text {
textItem.text: mainItem.text horizontalAlignment: Text.AlignHCenter
textItem.color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor anchors.centerIn: parent
textItem.font { wrapMode: Text.WordWrap
bold: true text: mainItem.text
color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor
font {
bold: mainItem.boldText
pointSize: mainItem.textSize pointSize: mainItem.textSize
family: DefaultStyle.defaultFont family: DefaultStyle.defaultFont
capitalization: mainItem.capitalization capitalization: mainItem.capitalization

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

@ -17,9 +17,9 @@ Control.CheckBox {
Text { Text {
visible: mainItem.checked visible: mainItem.checked
textItem.text: "\u2714" text: "\u2714"
textItem.font.pointSize: 18 font.pointSize: 18
textItem.color: DefaultStyle.checkboxBorderColor color: DefaultStyle.checkboxBorderColor
anchors.centerIn: parent anchors.centerIn: parent
} }
} }

28
Linphone/view/Item/ComboBox.qml
View file

@ -9,14 +9,16 @@ ColumnLayout {
property int backgroundWidth: 200 property int backgroundWidth: 200
// Usage : each item of the model list must be {text: ..., img: ...} // Usage : each item of the model list must be {text: ..., img: ...}
property var modelList: [] 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 { Text {
visible: label.length > 0 visible: label.length > 0
textItem.verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
textItem.text: mainItem.label text: mainItem.label
textItem.color: DefaultStyle.formItemLabelColor color: combobox.activeFocus ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
textItem.font { font {
pointSize: DefaultStyle.formItemLabelSize pointSize: DefaultStyle.formItemLabelSize
bold: true bold: true
} }
@ -30,7 +32,8 @@ ColumnLayout {
implicitWidth: mainItem.backgroundWidth implicitWidth: mainItem.backgroundWidth
implicitHeight: 30 implicitHeight: 30
radius: 15 radius: 15
color: DefaultStyle.formItemBackgroundColor color: combobox.enabled ? DefaultStyle.formItemBackgroundColor : DefaultStyle.formItemDisableBackgroundColor
border.color: combobox.enabled ? DefaultStyle.formItemBorderColor : DefaultStyle.formItemDisableColor
} }
contentItem: Item { contentItem: Item {
anchors.left: parent.left anchors.left: parent.left
@ -48,7 +51,8 @@ ColumnLayout {
Text { Text {
id: selectedItemText id: selectedItemText
textItem.elide: Text.ElideRight color: combobox.enabled ? DefaultStyle.defaultTextColor : DefaultStyle.formItemDisableColor
elide: Text.ElideRight
anchors.left: selectedItemImg.right anchors.left: selectedItemImg.right
anchors.leftMargin: selectedItemImg.visible ? 5 : 10 anchors.leftMargin: selectedItemImg.visible ? 5 : 10
anchors.right: parent.right anchors.right: parent.right
@ -62,9 +66,9 @@ ColumnLayout {
selectedItemImg.source = mainItem.modelList[0].img selectedItemImg.source = mainItem.modelList[0].img
} }
if (mainItem.modelList[index].text) if (mainItem.modelList[index].text)
selectedItemText.textItem.text = mainItem.modelList[0].text selectedItemText.text = mainItem.modelList[0].text
else if (mainItem.modelList[index]) else if (mainItem.modelList[index])
selectedItemText.textItem.text = mainItem.modelList[0] selectedItemText.text = mainItem.modelList[0]
} }
} }
@ -117,12 +121,12 @@ ColumnLayout {
} }
Text { Text {
textItem.text: modelData.text text: modelData.text
? modelData.text ? modelData.text
: modelData : modelData
? modelData ? modelData
: "" : ""
textItem.elide: Text.ElideRight elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: delegateImg.right anchors.left: delegateImg.right
anchors.leftMargin: delegateImg.visible ? 5 : 10 anchors.leftMargin: delegateImg.visible ? 5 : 10
@ -142,7 +146,7 @@ ColumnLayout {
} }
onPressed: { onPressed: {
combobox.state = "" combobox.state = ""
selectedItemText.textItem.text = modelData.text selectedItemText.text = modelData.text
? modelData.text ? modelData.text
: modelData : modelData
? modelData ? modelData

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

@ -4,7 +4,7 @@ import Linphone
Control.TextField { Control.TextField {
id: mainItem id: mainItem
property int inputSize: 50 property int inputSize: 60
color: activeFocus ? DefaultStyle.digitInputFocusedColor : DefaultStyle.digitInputColor color: activeFocus ? DefaultStyle.digitInputFocusedColor : DefaultStyle.digitInputColor
rightPadding: inputSize / 4 rightPadding: inputSize / 4
leftPadding: inputSize / 4 leftPadding: inputSize / 4
@ -34,6 +34,6 @@ Control.TextField {
// // anchors.left: parent.left // // anchors.left: parent.left
// // anchors.bottomMargin: inputSize/8 // // anchors.bottomMargin: inputSize/8
// // transform: [/*Translate {x: mainItem.cursorRectangle.height},*/ Rotation {angle: -90}] // // transform: [/*Translate {x: mainItem.cursorRectangle.height},*/ Rotation {angle: -90}]
// color: mainItem.activeFocus ? DefaultStyle.digitInputFocusedColor : DefaultStyle.digitInputColor // color:DefaultStyle.digitInputFocusedColor
// } // }
} }

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

@ -4,67 +4,44 @@ import QtQuick.Controls as Control
import Linphone import Linphone
ColumnLayout { ColumnLayout {
id: mainItem spacing: 15
Layout.alignment: Qt.AlignBottom TextInput {
signal useSIPButtonClicked() id: username
label: "Username"
mandatory: true
textInputWidth: 250
}
TextInput {
id: password
label: "Password"
mandatory: true
hidden: true
textInputWidth: 250
}
RowLayout { RowLayout {
ColumnLayout { id: lastFormLineLayout
Layout.fillHeight: true Button {
Layout.fillWidth: true text: 'Log in'
clip: true Layout.rightMargin: 20
onClicked: {
ColumnLayout { LoginPageCpp.login(username.inputText, password.inputText);
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()}
}
} }
} }
Item { Button {
Layout.fillWidth: true 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
} }
} }

46
Linphone/view/Item/PhoneNumberComboBox.qml
View file

@ -9,13 +9,14 @@ ColumnLayout {
property int backgroundWidth: 100 property int backgroundWidth: 100
readonly property string currentText: combobox.model.getAt(combobox.currentIndex) ? combobox.model.getAt(combobox.currentIndex).countryCallingCode : "" readonly property string currentText: combobox.model.getAt(combobox.currentIndex) ? combobox.model.getAt(combobox.currentIndex).countryCallingCode : ""
property string defaultCallingCode: "" property string defaultCallingCode: ""
property bool enableBackgroundColors: false
Text { Text {
visible: label.length > 0 visible: mainItem.label.length > 0
textItem.verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
textItem.text: mainItem.label text: mainItem.label
textItem.color: DefaultStyle.formItemLabelColor color: combobox.activeFocus ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
textItem.font { font {
pointSize: DefaultStyle.formItemLabelSize pointSize: DefaultStyle.formItemLabelSize
bold: true bold: true
} }
@ -33,28 +34,35 @@ ColumnLayout {
implicitWidth: mainItem.backgroundWidth implicitWidth: mainItem.backgroundWidth
implicitHeight: 30 implicitHeight: 30
radius: 15 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 { contentItem: Item {
anchors.fill: parent anchors.fill: parent
readonly property var currentItem: combobox.model.getAt(combobox.currentIndex) readonly property var currentItem: combobox.model.getAt(combobox.currentIndex)
anchors.leftMargin: 15 anchors.leftMargin: 15
Text { Text {
visible: text.length > 0
id: selectedItemFlag id: selectedItemFlag
textItem.text: parent.currentItem ? parent.currentItem.flag : "" visible: text.length > 0
textItem.font.family: DefaultStyle.emojiFont text: parent.currentItem ? parent.currentItem.flag : ""
font.family: DefaultStyle.emojiFont
anchors.rightMargin: 5 anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
Text { Text {
textItem.leftPadding: 5 leftPadding: 5
textItem.text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : "" text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : ""
textItem.color: DefaultStyle.formItemLabelColor color: DefaultStyle.formItemLabelColor
anchors.right: parent.right anchors.right: parent.right
anchors.left: selectedItemFlag.right anchors.left: selectedItemFlag.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
textItem.elide: Text.ElideRight elide: Text.ElideRight
} }
} }
@ -95,8 +103,8 @@ ColumnLayout {
Text { Text {
id: delegateImg; id: delegateImg;
visible: text.length > 0 visible: text.length > 0
textItem.text: $modelData.flag text: $modelData.flag
textItem.font.family: DefaultStyle.emojiFont font.family: DefaultStyle.emojiFont
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 15 anchors.leftMargin: 15
@ -104,13 +112,13 @@ ColumnLayout {
} }
Text { Text {
textItem.text: "+" + $modelData.countryCallingCode text: "+" + $modelData.countryCallingCode
textItem.elide: Text.ElideRight elide: Text.ElideRight
textItem.leftPadding: 5 leftPadding: 5
anchors.left: delegateImg.right anchors.left: delegateImg.right
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
textItem.color: DefaultStyle.formItemLabelColor color: DefaultStyle.formItemLabelColor
} }
MouseArea { MouseArea {

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

@ -7,7 +7,8 @@ ColumnLayout {
id: mainItem id: mainItem
property string label: "" property string label: ""
property string defaultText : "" property string errorMessage: ""
property string placeholderText : ""
property bool mandatory: false property bool mandatory: false
property int textInputWidth: 200 property int textInputWidth: 200
readonly property string phoneNumber: textField.inputText readonly property string phoneNumber: textField.inputText
@ -15,10 +16,10 @@ ColumnLayout {
Text { Text {
visible: label.length > 0 visible: label.length > 0
textItem.verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "") text: mainItem.label + (mainItem.mandatory ? "*" : "")
textItem.color: DefaultStyle.formItemLabelColor color: (combobox.hasActiveFocus || textField.hasActiveFocus) ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
textItem.font { font {
pointSize: DefaultStyle.formItemLabelSize pointSize: DefaultStyle.formItemLabelSize
bold: true bold: true
} }
@ -29,6 +30,11 @@ ColumnLayout {
implicitHeight: 30 implicitHeight: 30
radius: 20 radius: 20
color: DefaultStyle.formItemBackgroundColor color: DefaultStyle.formItemBackgroundColor
border.color: mainItem.errorMessage.length > 0
? DefaultStyle.errorMessageColor
: (textField.hasActiveFocus || combobox.hasActiveFocus)
? DefaultStyle.formItemFocusBorderColor
: DefaultStyle.formItemBorderColor
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
PhoneNumberComboBox { PhoneNumberComboBox {
@ -45,11 +51,27 @@ ColumnLayout {
TextInput { TextInput {
id: textField id: textField
Layout.fillWidth: true Layout.fillWidth: true
defaultText: mainItem.defaultText placeholderText: mainItem.placeholderText
inputMethodHints: Qt.ImhDigitsOnly enableBackgroundColors: false
fillWidth: true fillWidth: true
validator: IntValidator{} 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
}
} }

29
Linphone/view/Item/TabBar.qml
View file

@ -1,4 +1,4 @@
import QtQuick 2.7 as QT import QtQuick 2.7 as Quick
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2 as Control import QtQuick.Controls 2.2 as Control
import Linphone import Linphone
@ -11,11 +11,11 @@ Control.TabBar {
: 0 : 0
spacing: 40 spacing: 40
wheelEnabled: true wheelEnabled: true
background: QT.Item { background: Quick.Item {
id: tabBarBackground id: tabBarBackground
anchors.fill: parent anchors.fill: parent
QT.Rectangle { Quick.Rectangle {
id: barBG id: barBG
height: 4 height: 4
color: DefaultStyle.lightGrayColor color: DefaultStyle.lightGrayColor
@ -23,7 +23,7 @@ Control.TabBar {
width: parent.width width: parent.width
} }
// QT.Rectangle { // Quick.Rectangle {
// height: 4 // height: 4
// color: DefaultStyle.orangeColor // color: DefaultStyle.orangeColor
// anchors.bottom: parent.bottom // anchors.bottom: parent.bottom
@ -34,17 +34,18 @@ Control.TabBar {
// : 0 // : 0
// width: mainItem.currentItem ? mainItem.currentItem.width : 0 // width: mainItem.currentItem ? mainItem.currentItem.width : 0
// // clip: true // // clip: true
// QT.Behavior on x { QT.NumberAnimation {duration: 100}} // Quick.Behavior on x { Quick.NumberAnimation {duration: 100}}
// QT.Behavior on width {QT.NumberAnimation {duration: 100}} // Quick.Behavior on width {Quick.NumberAnimation {duration: 100}}
// } // }
} }
QT.Repeater { Quick.Repeater {
model: mainItem.model model: mainItem.model
Control.TabButton { Control.TabButton {
required property string modelData required property string modelData
required property int index 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 hoverEnabled: true
ToolTip { ToolTip {
visible: tabText.truncated && hovered visible: tabText.truncated && hovered
@ -52,10 +53,10 @@ Control.TabBar {
text: modelData text: modelData
} }
background: QT.Item { background: Quick.Item {
anchors.fill: parent anchors.fill: parent
QT.Rectangle { Quick.Rectangle {
visible: mainItem.currentIndex === index visible: mainItem.currentIndex === index
height: 4 height: 4
color: DefaultStyle.orangeColor color: DefaultStyle.orangeColor
@ -65,21 +66,21 @@ Control.TabBar {
} }
} }
contentItem: QT.Text { contentItem: Quick.Text {
id: tabText id: tabText
anchors.fill: parent anchors.fill: parent
font.bold: true font.bold: true
color: DefaultStyle.defaultTextColor color: mainItem.currentIndex === index ? DefaultStyle.defaultTextColor : DefaultStyle.disableTextColor
font.family: DefaultStyle.defaultFont font.family: DefaultStyle.defaultFont
font.pointSize: DefaultStyle.tabButtonTextSize font.pointSize: DefaultStyle.tabButtonTextSize
elide: QT.Text.ElideRight elide: Quick.Text.ElideRight
maximumLineCount: 1 maximumLineCount: 1
text: txtMeter.elidedText text: txtMeter.elidedText
// 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)))
bottomPadding: 5 bottomPadding: 5
} }
QT.TextMetrics { Quick.TextMetrics {
id: txtMeter id: txtMeter
font: tabText.font font: tabText.font
text: modelData text: modelData

28
Linphone/view/Item/Test/ItemsTest.qml
View file

@ -12,7 +12,7 @@ Window {
RowLayout { RowLayout {
ColumnLayout { ColumnLayout {
Text { Text {
textItem.text: "Combobox with image" text: "Combobox with image"
} }
ComboBox { ComboBox {
modelList: [ modelList: [
@ -24,7 +24,7 @@ Window {
} }
ColumnLayout { ColumnLayout {
Text { Text {
textItem.text: "Combobox without image" text: "Combobox without image"
} }
ComboBox { ComboBox {
modelList: [ modelList: [
@ -63,59 +63,59 @@ Window {
Component { Component {
ColumnLayout { ColumnLayout {
Text { Text {
textItem.text: "item 1" text: "item 1"
} }
Text { Text {
textItem.text: "item 1" text: "item 1"
} }
} }
}, },
Component { Component {
RowLayout { RowLayout {
Text { Text {
textItem.text: "item 2" text: "item 2"
} }
Text { Text {
textItem.text: "item 2" text: "item 2"
} }
} }
}, },
Component { Component {
Text { Text {
textItem.text: "item 3" text: "item 3"
} }
}, },
Component { Component {
Text { Text {
textItem.text: "item 4" text: "item 4"
} }
} }
] ]
} }
Text { Text {
textItem.text: "default text" text: "default text"
} }
Text { Text {
id: testText id: testText
scaleLettersFactor: 2 scaleLettersFactor: 2
textItem.text: "scaled text" text: "scaled text"
} }
RowLayout { RowLayout {
TextInput { TextInput {
label: "mandatory text input" label: "mandatory text input"
defaultText: "default text" placeholderText: "default text"
mandatory: true mandatory: true
} }
TextInput { TextInput {
label: "password text input" label: "password text input"
defaultText: "default text" placeholderText: "default text"
hidden: true hidden: true
} }
TextInput { TextInput {
id: next id: next
label: "text input with long long looooooooooooooooooooooooooooooooooooooooooooooooooooooooong label" label: "text input with long long looooooooooooooooooooooooooooooooooooooooooooooooooooooooong label"
defaultText: "long long long default text" placeholderText: "long long long default text"
} }
TextInput { TextInput {
label: "number text input" label: "number text input"
@ -125,7 +125,7 @@ Window {
ColumnLayout { ColumnLayout {
Text { Text {
textItem.text: "4 digit inputs" text: "4 digit inputs"
} }
RowLayout { RowLayout {
Repeater { Repeater {

35
Linphone/view/Item/Text.qml
View file

@ -1,21 +1,26 @@
import QtQuick 2.7 import QtQuick 2.7 as Quick
import QtQuick.Layouts import QtQuick.Layouts
import Linphone import Linphone
RowLayout { Quick.Text {
id: mainItem
property alias textItem: innerItem
property double scaleLettersFactor: 1. property double scaleLettersFactor: 1.
Text { width: txtMeter.advanceWidth
id: innerItem id: innerItem
font.family: DefaultStyle.defaultFont // Layout.preferredWidth: mainItem.width
font.pointSize: DefaultStyle.defaultFontPointSize // width: mainItem.width
color: DefaultStyle.defaultTextColor font.family: DefaultStyle.defaultFont
wrapMode: Text.Wrap font.pointSize: DefaultStyle.defaultFontPointSize
elide: Text.ElideRight color: DefaultStyle.defaultTextColor
transformOrigin: Item.TopLeft wrapMode: Quick.Text.Wrap
transform: Scale { elide: Quick.Text.ElideRight
yScale: mainItem.scaleLettersFactor transformOrigin: Quick.Item.TopLeft
} transform: Quick.Scale {
yScale: scaleLettersFactor//mainItem.scaleLettersFactor
}
Quick.TextMetrics {
id: txtMeter
text: innerItem.text
font: innerItem.font
} }
} }

71
Linphone/view/Item/TextInput.qml
View file

@ -1,5 +1,5 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls as Control
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import Linphone import Linphone
@ -7,24 +7,26 @@ ColumnLayout {
id: mainItem id: mainItem
property string label: "" property string label: ""
property string defaultText : "" property string errorMessage: ""
property string placeholderText: ""
property bool mandatory: false property bool mandatory: false
property bool hidden: false property bool hidden: false
property int textInputWidth: 200 property int textInputWidth: 200
property var inputMethodHints: Qt.ImhNone
property var validator: RegularExpressionValidator{} property var validator: RegularExpressionValidator{}
readonly property string inputText: textField.text
property bool fillWidth: false property bool fillWidth: false
property bool enableBackgroundColors: true
property string inputText: textField.text
readonly property bool hasActiveFocus: textField.activeFocus
Text { Text {
visible: label.length > 0 visible: mainItem.label.length > 0
textItem.verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "") text: mainItem.label + (mainItem.mandatory ? "*" : "")
textItem.color: DefaultStyle.formItemLabelColor color: textField.activeFocus ? DefaultStyle.formItemFocusBorderColor : DefaultStyle.formItemLabelColor
textItem.elide: Text.ElideRight elide: Text.ElideRight
textItem.wrapMode: Text.Wrap wrapMode: Text.Wrap
textItem.maximumLineCount: 1 maximumLineCount: 1
textItem.font { font {
pointSize: DefaultStyle.formItemLabelSize pointSize: DefaultStyle.formItemLabelSize
family: DefaultStyle.defaultFont family: DefaultStyle.defaultFont
bold: true bold: true
@ -41,37 +43,64 @@ ColumnLayout {
implicitWidth: mainItem.textInputWidth implicitWidth: mainItem.textInputWidth
implicitHeight: 30 implicitHeight: 30
radius: 20 radius: 20
color: DefaultStyle.formItemBackgroundColor color: mainItem.enableBackgroundColors ? DefaultStyle.formItemBackgroundColor : "transparent"
opacity: 0.7 border.color: mainItem.enableBackgroundColors
TextField { ? (mainItem.errorMessage.length > 0
? DefaultStyle.errorMessageColor
: textField.activeFocus
? DefaultStyle.formItemFocusBorderColor
: DefaultStyle.formItemBorderColor)
: "transparent"
Control.TextField {
id: textField id: textField
anchors.left: parent.left anchors.left: parent.left
anchors.right: eyeButton.visible ? eyeButton.left : parent.right anchors.right: eyeButton.visible ? eyeButton.left : parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
placeholderText: mainItem.defaultText placeholderText: mainItem.placeholderText
echoMode: (mainItem.hidden && !eyeButton.checked) ? TextInput.Password : TextInput.Normal echoMode: (mainItem.hidden && !eyeButton.checked) ? TextInput.Password : TextInput.Normal
font.family: DefaultStyle.defaultFont font.family: DefaultStyle.defaultFont
font.pointSize: DefaultStyle.formTextInputSize font.pointSize: DefaultStyle.defaultFontPointSize
color: DefaultStyle.formItemLabelColor color: DefaultStyle.formItemLabelColor
inputMethodHints: mainItem.inputMethodHints
selectByMouse: true selectByMouse: true
validator: mainItem.validator validator: mainItem.validator
background: Item { background: Item {
opacity: 0. opacity: 0.
} }
cursorDelegate: Rectangle {
visible: textField.activeFocus
color: DefaultStyle.formItemFocusBorderColor
width: 2
}
} }
Button { Control.Button {
id: eyeButton id: eyeButton
visible: mainItem.hidden visible: mainItem.hidden
checkable: true checkable: true
background: Rectangle { background: Rectangle {
color: "transparent" color: "transparent"
} }
anchors.right: parent.right
contentItem: Image { contentItem: Image {
fillMode: Image.PreserveAspectFit 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
}
} }

10
Linphone/view/Item/ToolTip.qml
View file

@ -13,10 +13,10 @@ Control.ToolTip {
radius: 15 radius: 15
} }
contentItem: Text { contentItem: Text {
textItem.text: mainItem.text text: mainItem.text
textItem.color: DefaultStyle.defaultTextColor color: DefaultStyle.defaultTextColor
textItem.width: tooltipBackground.width width: tooltipBackground.width
textItem.wrapMode: Text.Wrap wrapMode: Text.Wrap
textItem.elide: Text.ElideRight elide: Text.ElideRight
} }
} }

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

@ -14,9 +14,9 @@ LoginLayout {
source: AppIcons.profile source: AppIcons.profile
} }
Text { Text {
textItem.text: "Login" text: "Login"
textItem.font.pointSize: DefaultStyle.title2FontPointSize font.pointSize: DefaultStyle.title2FontPointSize
textItem.font.bold: true font.bold: true
scaleLettersFactor: 1.1 scaleLettersFactor: 1.1
} }
Item { Item {
@ -24,8 +24,8 @@ LoginLayout {
} }
Text { Text {
Layout.rightMargin: 15 Layout.rightMargin: 15
textItem.text: "No account yet ?" text: "No account yet ?"
textItem.font.pointSize: DefaultStyle.defaultTextSize font.pointSize: DefaultStyle.defaultTextSize
} }
Button { Button {
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
@ -38,8 +38,37 @@ LoginLayout {
} }
} }
centerContent: LoginForm { centerContent: ColumnLayout {
onUseSIPButtonClicked: mainItem.useSIPButtonClicked() 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
}
} }
} }

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

@ -29,12 +29,13 @@ LoginLayout {
source: AppIcons.profile source: AppIcons.profile
} }
Text { Text {
textItem.text: { wrapMode: Text.NoWrap
text: {
var completeString = (mainItem.email.length > 0) ? "email" : "phone number" var completeString = (mainItem.email.length > 0) ? "email" : "phone number"
text = "Register | Register with your " + completeString text = "Register | Register with your " + completeString
} }
textItem.font.pointSize: DefaultStyle.title2FontPointSize font.pointSize: DefaultStyle.title2FontPointSize
textItem.font.bold: true font.bold: true
scaleLettersFactor: 1.1 scaleLettersFactor: 1.1
} }
Item { Item {
@ -43,13 +44,14 @@ LoginLayout {
} }
centerContent: ColumnLayout { centerContent: ColumnLayout {
Layout.fillWidth: true spacing: 2
Layout.fillHeight: true
Text { Text {
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
textItem.font.bold: true font.bold: true
textItem.text: { font.pointSize: DefaultStyle.defaultFontPointSize
var completeString = (mainItem.email.length > 0) ? ("email" + mainItem.email) : ("phone number" + mainItem.phoneNumber) 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:" 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.fillWidth: true
Layout.margins: 10 Layout.margins: 10
ColumnLayout { ColumnLayout {
spacing: 70
RowLayout { RowLayout {
Repeater { Repeater {
model: 4 model: 4
DigitInput { DigitInput {
required property int index required property int index
onTextEdited: if (text.length > 0 ) { onTextEdited: if (text.length > 0 ) {
console.log("next", nextItemInFocusChain(true))
if (index < 3) if (index < 3)
nextItemInFocusChain(true).forceActiveFocus() nextItemInFocusChain(true).forceActiveFocus()
else { else {
// validate() // validate()
} }
} else {
if (index > 0)
nextItemInFocusChain(false).forceActiveFocus()
} }
Layout.margins: 10 Layout.margins: 10
} }
} }
} }
RowLayout { RowLayout {
Layout.alignment: Qt.AlignBottom
Text { Text {
Layout.rightMargin: 15 Layout.rightMargin: 15
textItem.text: "Didn't receive the code ?" text: "Didn't receive the code ?"
textItem.font.pointSize: DefaultStyle.defaultTextSize color: DefaultStyle.questionTextColor
font.pointSize: DefaultStyle.defaultTextSize
} }
Button { Button {
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
@ -100,6 +107,9 @@ LoginLayout {
source: AppIcons.verif_page_image source: AppIcons.verif_page_image
} }
} }
Item {
Layout.fillHeight: true
}
} }
} }

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

@ -6,7 +6,7 @@ import Linphone
LoginLayout { LoginLayout {
id: mainItem id: mainItem
signal returnToLogin() signal returnToLogin()
signal registerCalled() signal registerCalled(countryCode: string, phoneNumber: string, email: string)
readonly property string countryCode: phoneNumberInput.countryCode readonly property string countryCode: phoneNumberInput.countryCode
readonly property string phoneNumber: phoneNumberInput.phoneNumber readonly property string phoneNumber: phoneNumberInput.phoneNumber
readonly property string email: emailInput.inputText readonly property string email: emailInput.inputText
@ -17,9 +17,11 @@ LoginLayout {
source: AppIcons.profile source: AppIcons.profile
} }
Text { Text {
textItem.text: "Register" Layout.preferredWidth: width
textItem.font.pointSize: DefaultStyle.title2FontPointSize text: "Register"
textItem.font.bold: true font.pointSize: DefaultStyle.title2FontPointSize
font.bold: true
wrapMode: Text.NoWrap
scaleLettersFactor: 1.1 scaleLettersFactor: 1.1
} }
Item { Item {
@ -27,11 +29,12 @@ LoginLayout {
} }
Text { Text {
Layout.rightMargin: 15 Layout.rightMargin: 15
textItem.text: "Already have an account ?" color: DefaultStyle.questionTextColor
textItem.font.pointSize: DefaultStyle.defaultTextSize text: "Already have an account ?"
font.pointSize: DefaultStyle.defaultTextSize
} }
Button { Button {
Layout.alignment: Qt.AlignRight // Layout.alignment: Qt.AlignRight
inversedColors: true inversedColors: true
text: "Log in" text: "Log in"
onClicked: { onClicked: {
@ -53,6 +56,7 @@ LoginLayout {
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
spacing: 15
RowLayout { RowLayout {
TextInput { TextInput {
label: "Username" label: "Username"
@ -61,6 +65,7 @@ LoginLayout {
} }
ComboBox { ComboBox {
label: " " label: " "
enabled: false
modelList: [{text:"@sip.linphone.org"}] modelList: [{text:"@sip.linphone.org"}]
} }
} }
@ -68,42 +73,59 @@ LoginLayout {
id: phoneNumberInput id: phoneNumberInput
label: "Phone number" label: "Phone number"
mandatory: true mandatory: true
defaultText: "Phone number" placeholderText: "Phone number"
textInputWidth: 250 textInputWidth: 250
} }
RowLayout { RowLayout {
TextInput { ColumnLayout {
label: "Password" TextInput {
mandatory: true label: "Password"
hidden: true mandatory: true
textInputWidth: 250 hidden: true
textInputWidth: 250
}
Text {
text: "The password must contain 6 characters minimum"
font {
pointSize: DefaultStyle.defaultTextSize
}
}
} }
TextInput { ColumnLayout {
label: "Confirm password" TextInput {
mandatory: true label: "Confirm password"
hidden: true mandatory: true
textInputWidth: 250 hidden: true
textInputWidth: 250
}
Text {
text: "The password must contain 6 characters minimum"
font {
pointSize: DefaultStyle.defaultTextSize
}
}
} }
} }
RowLayout { RowLayout {
CheckBox { CheckBox {
} }
Text { Text {
textItem.text: "I would like to suscribe to the newsletter" text: "I would like to suscribe to the newsletter"
} }
} }
RowLayout { RowLayout {
CheckBox { CheckBox {
} }
Text { 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 { Button {
text: "Register" text: "Register"
onClicked:{ onClicked:{
console.log("[RegisterPage] User: Call register") console.log("[RegisterPage] User: Call register with phone number", phoneNumberInput.phoneNumber)
mainItem.registerCalled() mainItem.registerCalled(phoneNumberInput.countryCode, phoneNumberInput.phoneNumber, "")
} }
} }
} }
@ -121,6 +143,7 @@ LoginLayout {
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
spacing: 15
RowLayout { RowLayout {
TextInput { TextInput {
label: "Username" label: "Username"
@ -131,6 +154,7 @@ LoginLayout {
// if we don't set a label this item is offset // if we don't set a label this item is offset
// due to the invisibility of the upper label // due to the invisibility of the upper label
label: " " label: " "
enabled: false
modelList: [{text:"@sip.linphone.org"}] modelList: [{text:"@sip.linphone.org"}]
} }
} }
@ -141,39 +165,62 @@ LoginLayout {
textInputWidth: 250 textInputWidth: 250
} }
RowLayout { RowLayout {
TextInput { ColumnLayout {
label: "Password" TextInput {
mandatory: true id: pwdInput
hidden: true label: "Password"
textInputWidth: 250 mandatory: true
hidden: true
textInputWidth: 250
}
Text {
text: "The password must contain 6 characters minimum"
font {
pointSize: DefaultStyle.defaultTextSize
}
}
} }
TextInput { ColumnLayout {
label: "Confirm password" TextInput {
mandatory: true id: confirmPwdInput
hidden: true label: "Confirm password"
textInputWidth: 250 mandatory: true
hidden: true
textInputWidth: 250
}
Text {
text: "The password must contain 6 characters minimum"
font {
pointSize: DefaultStyle.defaultTextSize
}
}
} }
} }
RowLayout { RowLayout {
CheckBox { CheckBox {
} }
Text { Text {
textItem.text: "I would like to suscribe to the newsletter" text: "I would like to suscribe to the newsletter"
} }
} }
RowLayout { RowLayout {
CheckBox { CheckBox {
} }
Text { 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 { Button {
text: "Register" text: "Register"
onClicked:{ onClicked:{
console.log("[RegisterPage] User: Call register") console.log("[RegisterPage] User: Call register with email", emailInput.inputText)
mainItem.registerCalled() if (emailInput.inputText.length == 0) {
emailInput.errorMessage = "You must enter an email"
return
} }
mainItem.registerCalled("", "", emailInput.inputText)
}
} }
} }
Item { Item {

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

@ -28,9 +28,9 @@ LoginLayout {
source: AppIcons.profile source: AppIcons.profile
} }
Text { Text {
textItem.text: "Use a SIP Account" text: "Use a SIP Account"
textItem.font.pointSize: DefaultStyle.title2FontPointSize font.pointSize: DefaultStyle.title2FontPointSize
textItem.font.bold: true font.bold: true
scaleLettersFactor: 1.1 scaleLettersFactor: 1.1
} }
Item { Item {
@ -38,8 +38,8 @@ LoginLayout {
} }
Text { Text {
Layout.rightMargin: 15 Layout.rightMargin: 15
textItem.text: "No account yet ?" text: "No account yet ?"
textItem.font.pointSize: DefaultStyle.defaultTextSize font.pointSize: DefaultStyle.defaultTextSize
} }
Button { Button {
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
@ -52,128 +52,139 @@ LoginLayout {
} }
} }
centerContent: RowLayout { centerContent: ColumnLayout {
Layout.alignment: Qt.AlignBottom signal useSIPButtonClicked()
ColumnLayout { RowLayout {
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
Control.StackView { ColumnLayout {
id: rootStackView Layout.preferredWidth: 330
initialItem: firstItem Layout.maximumWidth: 340
Layout.fillWidth: true Control.StackView {
Layout.fillHeight: true id: rootStackView
initialItem: firstItem
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height
Component { Component {
id: firstItem id: firstItem
ColumnLayout { ColumnLayout {
Layout.alignment: Qt.AlignTop
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 {
Layout.fillHeight: true Layout.fillHeight: true
} Layout.maximumWidth: rootStackView.width
clip: true
Button { ColumnLayout {
Layout.fillWidth: true Text {
text: 'I prefere create an account' Layout.preferredWidth: rootStackView.width
inversedColors: true width: rootStackView.width
onClicked: {
console.debug("[LoginItem] User: click register") wrapMode: Text.WordWrap
mainItem.goToRegister() 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 { ColumnLayout {
Layout.fillWidth: true spacing: 10
Layout.bottomMargin: 40 Layout.bottomMargin: 20
text: 'I understand' Button {
onClicked: { Layout.fillWidth: true
rootStackView.replace(secondItem) 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
Component { ColumnLayout {
id: secondItem spacing: 10
ColumnLayout { TextInput {
TextInput { id: username
id: username label: "Username"
label: "Username" mandatory: true
mandatory: true textInputWidth: 250
textInputWidth: 250 }
} TextInput {
TextInput { id: password
id: password label: "Password"
label: "Password" mandatory: true
mandatory: true hidden: true
hidden: true textInputWidth: 250
textInputWidth: 250 }
} TextInput {
TextInput { id: domain
id: domain label: "Domain"
label: "Domain" mandatory: true
mandatory: true textInputWidth: 250
textInputWidth: 250 }
} TextInput {
TextInput { id: displayName
id: displayName label: "Display Name"
label: "Display Name" textInputWidth: 250
textInputWidth: 250 }
} ComboBox {
ComboBox { label: "Transport"
label: "Transport" backgroundWidth: 250
backgroundWidth: 250 modelList:[
modelList:[ {text:"TCP"},
{text:"TCP"}, {text:"UDP"},
{text:"UDP"}, {text:"TLS"}
{text:"TLS"} ]
] }
}
Button {
Button { Layout.topMargin: 20
Layout.bottomMargin: 20 Layout.bottomMargin: 20
text: 'Log in' text: "Log in"
onClicked: { onClicked: {
console.debug("[SIPLoginPage] User: Log in") console.debug("[SIPLoginPage] User: Log in")
LoginPageCpp.login(username.inputText, password.inputText); 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 { Item {
Layout.fillWidth: true Layout.fillHeight: true
}
Image {
Layout.rightMargin: 40
Layout.preferredWidth: 300
fillMode: Image.PreserveAspectFit
source: AppIcons.loginImage
} }
} }
} }

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

@ -11,39 +11,34 @@ LoginLayout {
titleContent: RowLayout { titleContent: RowLayout {
Text { Text {
id: welcome id: welcome
textItem.text: "Welcome" text: "Welcome"
textItem.color: DefaultStyle.titleColor color: DefaultStyle.titleColor
textItem.font.pointSize: DefaultStyle.title1FontPointSize font.pointSize: DefaultStyle.title1FontPointSize
textItem.font.bold: true font.bold: true
scaleLettersFactor: 1.1 scaleLettersFactor: 1.1
} }
Text { Text {
Layout.alignment: Qt.AlignBottom Layout.alignment: Qt.AlignBottom
Layout.leftMargin: 10 Layout.leftMargin: 10
Layout.bottomMargin: 5 Layout.bottomMargin: 5
textItem.color: DefaultStyle.titleColor color: DefaultStyle.titleColor
textItem.text: "in Linphone" text: "in Linphone"
textItem.font.pointSize: 18 font.pointSize: DefaultStyle.title2FontPointSize
textItem.font.bold: true font.bold: true
scaleLettersFactor: 1.1 scaleLettersFactor: 1.1
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
Control.Button { Button {
leftPadding: 13 visible: carousel.currentIndex < (carousel.itemsCount - 1)
rightPadding: 13
topPadding: 20
bottomPadding: 20
flat: true flat: true
checkable: false background: Item {
background: Rectangle { visible: false
color: "transparent"
radius: 48
} }
contentItem: Text { contentItem: Text {
textItem.text: "Skip" text: "Skip"
textItem.font.underline: true font.underline: true
} }
onClicked: { onClicked: {
console.debug("[LoginItem] User: Click skip") console.debug("[LoginItem] User: Click skip")
@ -71,22 +66,23 @@ LoginLayout {
model: [ model: [
{title: "Linphone", text: "Une application de communication <b>sécurisée</b>,<br> <b>open source</b> et <b>française</b>."}, {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: "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 { Item {
ColumnLayout { ColumnLayout {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 15
Text { Text {
textItem.text: modelData.title text: modelData.title
textItem.font.bold: true font.bold: true
textItem.font.pixelSize: 20 font.pixelSize: 20
scaleLettersFactor: 1.1 scaleLettersFactor: 1.1
} }
Text { Text {
Layout.maximumWidth: 361 Layout.maximumWidth: 361
textItem.wrapMode: Text.WordWrap wrapMode: Text.WordWrap
textItem.font.pixelSize: 11 font.pixelSize: 11
textItem.text: modelData.text text: modelData.text
} }
} }
} }

28
Linphone/view/Style/DefaultStyle.qml
View file

@ -3,28 +3,35 @@ import QtQuick 2.15
QtObject { QtObject {
property string defaultFont: "Noto Sans"
property string emojiFont: "Noto Color Emoji" property string emojiFont: "Noto Color Emoji"
property color orangeColor: "#FE5E00" property color orangeColor: "#FE5E00"
property color buttonBackground: "#FE5E00" property color buttonBackground: "#FE5E00"
property color buttonPressedBackground: "#c74b02"
property color buttonInversedBackground: "white" property color buttonInversedBackground: "white"
property color buttonPressedInversedBackground: "#fff1e8"
property color buttonTextColor: "white" property color buttonTextColor: "white"
property color buttonInversedTextColor: "#FE5E00" property color buttonInversedTextColor: "#FE5E00"
property color checkboxBorderColor: "#FE5E00" property color checkboxBorderColor: "#FE5E00"
property double checkboxBorderWidth: 2 property double checkboxBorderWidth: 2
property int buttonTextSize: 10 property int buttonTextSize: 10
property int tabButtonTextSize: 11 property int tabButtonTextSize: 11
property color titleColor: "#22334D" property color carouselLightGrayColor: "#DFECF2"
property color defaultTextColor: "#4E6074"
property int defaultTextSize: 8
property color formItemLabelColor: "#4E6074" property color formItemLabelColor: "#4E6074"
property int formItemLabelSize: 8 property int formItemLabelSize: 8
property int formTextInputSize: 10 property color formItemDisableColor: "#949494"
property color carouselLightGrayColor: "#DFECF2" property color formItemDisableBackgroundColor: "#EDEDED"
property color formItemBackgroundColor: "#EDEDED" property color formItemBackgroundColor: "#F9F9F9"
property color formItemBorderColor: "#EDEDED"
property color formItemFocusBorderColor: "#FE5E00"
property color comboBoxHighlightColor: "#C0D1D9" property color comboBoxHighlightColor: "#C0D1D9"
property color comboBoxHoverColor: "#6C7A87" property color comboBoxHoverColor: "#6C7A87"
property color aboutButtonTextColor: "#6C7A87"
property color questionTextColor: "#364860"
property color errorMessageColor: "#DD5F5F"
property color tooltipBackgroundColor: "#DFECF2" property color tooltipBackgroundColor: "#DFECF2"
property color digitInputFocusedColor: "#FE5E00" property color digitInputFocusedColor: "#FE5E00"
@ -35,7 +42,12 @@ QtObject {
property color grayColor: "#6C7A87" property color grayColor: "#6C7A87"
property color lightGrayColor: "#EDEDED" 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 defaultFontPointSize: 10
property int title1FontPointSize: 40 property int title1FontPointSize: 50
property int title2FontPointSize: 20 property int title2FontPointSize: 20
property color titleColor: "#22334D"
} }