mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-17 11:28:07 +00:00
Test file for qml items :
Text ComboBox TextInput Button TabBar Tooltip Carousel + fixes on this items
This commit is contained in:
Gaelle Braud
parent
440b3991f1
commit
99b1fb9bde
20 changed files with 373 additions and 195 deletions
|
|
@ -37,9 +37,9 @@ Item {
|
|||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
|
||||
text: "About"
|
||||
font.pixelSize: 12
|
||||
color: DefaultStyle.grayColor
|
||||
textItem.text: "About"
|
||||
textItem.font.pixelSize: 12
|
||||
textItem.color: DefaultStyle.grayColor
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
|
|
|
|||
|
|
@ -14,9 +14,12 @@ list(APPEND _LINPHONEAPP_QML_FILES
|
|||
view/Item/TabBar.qml
|
||||
view/Item/Text.qml
|
||||
view/Item/TextInput.qml
|
||||
view/Item/ToolTip.qml
|
||||
|
||||
view/Item/Form/LoginForm.qml
|
||||
|
||||
view/Item/Test/ItemsTest.qml
|
||||
|
||||
view/Page/Login/LoginPage.qml
|
||||
view/Page/Login/RegisterPage.qml
|
||||
view/Page/Login/SIPLoginPage.qml
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Control.Button {
|
|||
property int capitalization
|
||||
property bool inversedColors: false
|
||||
property int textSize: DefaultStyle.buttonTextSize
|
||||
|
||||
|
||||
background: Rectangle {
|
||||
color: inversedColors ? DefaultStyle.buttonInversedBackground : DefaultStyle.buttonBackground
|
||||
radius: 24
|
||||
|
|
@ -15,19 +15,20 @@ Control.Button {
|
|||
}
|
||||
|
||||
contentItem: Text {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
leftPadding: 11
|
||||
rightPadding: 11
|
||||
topPadding: 6
|
||||
bottomPadding: 6
|
||||
textItem.horizontalAlignment: Text.AlignHCenter
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.leftPadding: 11
|
||||
textItem.rightPadding: 11
|
||||
textItem.topPadding: 6
|
||||
textItem.bottomPadding: 6
|
||||
|
||||
wrapMode: Text.WordWrap
|
||||
text: mainItem.text
|
||||
color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor
|
||||
font {
|
||||
textItem.wrapMode: Text.WordWrap
|
||||
textItem.text: mainItem.text
|
||||
textItem.color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor
|
||||
textItem.font {
|
||||
bold: true
|
||||
pointSize: mainItem.textSize
|
||||
family: DefaultStyle.defaultFont
|
||||
capitalization: mainItem.capitalization
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ import Linphone
|
|||
ColumnLayout {
|
||||
id: mainItem
|
||||
|
||||
property list<Component> itemsList
|
||||
required property list<Item> itemsList
|
||||
// Items count is needed when using a repeater for itemsList
|
||||
// which is part of the carouselStackLayout children list
|
||||
required property int itemsCount
|
||||
property int currentIndex: carouselStackLayout.currentIndex
|
||||
property bool prevButtonVisible: true
|
||||
property bool nextButtonVisible: true
|
||||
|
|
@ -18,8 +21,7 @@ ColumnLayout {
|
|||
|
||||
StackLayout {
|
||||
id: carouselStackLayout
|
||||
|
||||
property var items: children
|
||||
children: mainItem.itemsList
|
||||
property int previousIndex: currentIndex
|
||||
|
||||
function goToSlideAtIndex(index) {
|
||||
|
|
@ -30,16 +32,23 @@ ColumnLayout {
|
|||
Component.onCompleted: {
|
||||
// The animation is not working until the slide
|
||||
// has been displayed once
|
||||
for (var i = 0; i < mainItem.itemsList.length; ++i) {
|
||||
for (var i = 0; i < mainItem.itemsCount; ++i) {
|
||||
// const newObject = Qt.createQmlObject(mainItem.itemsList[i], carouselStackLayout);
|
||||
mainItem.itemsList[i].createObject(carouselStackLayout)
|
||||
// mainItem.itemsList[i].createObject(carouselStackLayout)
|
||||
// carouselStackLayout.append(itemsList[i])
|
||||
var button = carouselButton.createObject(carouselButtonsLayout, {slideIndex: i, stackLayout: carouselStackLayout})
|
||||
button.buttonClicked.connect(goToSlideAtIndex)
|
||||
currentIndex = i
|
||||
}
|
||||
currentIndex = 0
|
||||
previousIndex = currentIndex
|
||||
items = children
|
||||
}
|
||||
|
||||
onCurrentIndexChanged: {
|
||||
var currentItem = children[currentIndex]
|
||||
var crossFaderAnim = crossFader.createObject(parent, {fadeInTarget: currentItem, mirrored: (previousIndex > currentIndex)})
|
||||
crossFaderAnim.restart()
|
||||
mainItem.currentIndex = currentIndex
|
||||
}
|
||||
|
||||
Component {
|
||||
|
|
@ -68,13 +77,6 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
onCurrentIndexChanged: {
|
||||
var currentItem = items[currentIndex]
|
||||
var crossFaderAnim = crossFader.createObject(parent, {fadeInTarget: currentItem, mirrored: (previousIndex > currentIndex)})
|
||||
crossFaderAnim.restart()
|
||||
mainItem.currentIndex = currentIndex
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
id: carouselButtonsLayout
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ Control.CheckBox {
|
|||
// color: checkbox.checked ? DefaultStyle.checkboxBorderColor : "transparent"
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "\u2714"
|
||||
font.pointSize: 18
|
||||
color: DefaultStyle.checkboxBorderColor
|
||||
visible: mainItem.checked
|
||||
textItem.text: "\u2714"
|
||||
textItem.font.pointSize: 18
|
||||
textItem.color: DefaultStyle.checkboxBorderColor
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ ColumnLayout {
|
|||
property int backgroundWidth: 200
|
||||
// Usage : each item of the model list must be {text: ..., img: ...}
|
||||
property var modelList: []
|
||||
readonly property string currentText: selectedItemText.text
|
||||
readonly property string currentText: selectedItemText.textItem.text
|
||||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
font {
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.text: mainItem.label
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
textItem.font {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
bold: true
|
||||
}
|
||||
|
|
@ -42,14 +42,15 @@ ColumnLayout {
|
|||
width: visible ? 20 : 0
|
||||
fillMode: Image.PreserveAspectFit
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: visible ? 10 : 0
|
||||
}
|
||||
|
||||
Text {
|
||||
id: selectedItemText
|
||||
elide: Text.ElideRight
|
||||
textItem.elide: Text.ElideRight
|
||||
anchors.left: selectedItemImg.right
|
||||
anchors.leftMargin: selectedItemImg.visible ? 15 : 10
|
||||
anchors.leftMargin: selectedItemImg.visible ? 5 : 10
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 20
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
|
@ -61,9 +62,9 @@ ColumnLayout {
|
|||
selectedItemImg.source = mainItem.modelList[0].img
|
||||
}
|
||||
if (mainItem.modelList[index].text)
|
||||
selectedItemText.text = mainItem.modelList[0].text
|
||||
selectedItemText.textItem.text = mainItem.modelList[0].text
|
||||
else if (mainItem.modelList[index])
|
||||
selectedItemText.text = mainItem.modelList[0]
|
||||
selectedItemText.textItem.text = mainItem.modelList[0]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,12 +117,12 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
Text {
|
||||
text: modelData.text
|
||||
textItem.text: modelData.text
|
||||
? modelData.text
|
||||
: modelData
|
||||
? modelData
|
||||
: ""
|
||||
elide: Text.ElideRight
|
||||
textItem.elide: Text.ElideRight
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: delegateImg.right
|
||||
anchors.leftMargin: delegateImg.visible ? 5 : 10
|
||||
|
|
@ -141,7 +142,7 @@ ColumnLayout {
|
|||
}
|
||||
onPressed: {
|
||||
combobox.state = ""
|
||||
selectedItemText.text = modelData.text
|
||||
selectedItemText.textItem.text = modelData.text
|
||||
? modelData.text
|
||||
: modelData
|
||||
? modelData
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
Text {
|
||||
color: DefaultStyle.grayColor
|
||||
text: "Forgotten password?"
|
||||
font.underline: true
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
textItem.color: DefaultStyle.grayColor
|
||||
textItem.text: "Forgotten password?"
|
||||
textItem.font.underline: true
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ ColumnLayout {
|
|||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
font {
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.text: mainItem.label
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
textItem.font {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
bold: true
|
||||
}
|
||||
|
|
@ -42,19 +42,19 @@ ColumnLayout {
|
|||
Text {
|
||||
visible: text.length > 0
|
||||
id: selectedItemFlag
|
||||
text: parent.currentItem ? parent.currentItem.flag : ""
|
||||
font.family: DefaultStyle.emojiFont
|
||||
textItem.text: parent.currentItem ? parent.currentItem.flag : ""
|
||||
textItem.font.family: DefaultStyle.emojiFont
|
||||
anchors.rightMargin: 5
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
Text {
|
||||
leftPadding: 5
|
||||
text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : ""
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
textItem.leftPadding: 5
|
||||
textItem.text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : ""
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
anchors.right: parent.right
|
||||
anchors.left: selectedItemFlag.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
elide: Text.ElideRight
|
||||
textItem.elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,8 +95,8 @@ ColumnLayout {
|
|||
Text {
|
||||
id: delegateImg;
|
||||
visible: text.length > 0
|
||||
text: $modelData.flag
|
||||
font.family: DefaultStyle.emojiFont
|
||||
textItem.text: $modelData.flag
|
||||
textItem.font.family: DefaultStyle.emojiFont
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: 15
|
||||
|
|
@ -104,13 +104,13 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
Text {
|
||||
text: "+" + $modelData.countryCallingCode
|
||||
elide: Text.ElideRight
|
||||
leftPadding: 5
|
||||
textItem.text: "+" + $modelData.countryCallingCode
|
||||
textItem.elide: Text.ElideRight
|
||||
textItem.leftPadding: 5
|
||||
anchors.left: delegateImg.right
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ ColumnLayout {
|
|||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label + (mainItem.mandatory ? "*" : "")
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
font {
|
||||
textItem.verticalAlignment: Text.AlignVCenter
|
||||
textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "")
|
||||
textItem.color: DefaultStyle.formItemLabelColor
|
||||
textItem.font {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
bold: true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick 2.7 as QT
|
||||
import QtQuick.Layouts 1.3
|
||||
import QtQuick.Controls 2.2 as Control
|
||||
import Linphone
|
||||
|
|
@ -10,11 +10,12 @@ Control.TabBar {
|
|||
? itemAt(0).x
|
||||
: 0
|
||||
spacing: 40
|
||||
|
||||
background: Item {
|
||||
wheelEnabled: true
|
||||
background: QT.Item {
|
||||
id: tabBarBackground
|
||||
anchors.fill: parent
|
||||
|
||||
Rectangle {
|
||||
QT.Rectangle {
|
||||
id: barBG
|
||||
height: 4
|
||||
color: DefaultStyle.lightGrayColor
|
||||
|
|
@ -22,41 +23,63 @@ Control.TabBar {
|
|||
width: parent.width
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 4
|
||||
color: DefaultStyle.orangeColor
|
||||
anchors.bottom: parent.bottom
|
||||
x: mainItem.currentItem
|
||||
? mainItem.currentItem.x - mainItem.originX
|
||||
: 0
|
||||
width: mainItem.currentItem ? mainItem.currentItem.width : 0
|
||||
clip: true
|
||||
Behavior on x { NumberAnimation {duration: 100}}
|
||||
Behavior on width {NumberAnimation {duration: 100}}
|
||||
}
|
||||
// QT.Rectangle {
|
||||
// height: 4
|
||||
// color: DefaultStyle.orangeColor
|
||||
// anchors.bottom: parent.bottom
|
||||
// // anchors.left: mainItem.currentItem.left
|
||||
// // anchors.right: mainItem.currentItem.right
|
||||
// x: mainItem.currentItem
|
||||
// ? mainItem.currentItem.x - mainItem.originX
|
||||
// : 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}}
|
||||
// }
|
||||
}
|
||||
|
||||
Repeater {
|
||||
QT.Repeater {
|
||||
model: mainItem.model
|
||||
Control.TabButton {
|
||||
required property string modelData
|
||||
width: txtMeter. advanceWidth
|
||||
|
||||
background: Item {
|
||||
visible: false
|
||||
required property int index
|
||||
width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x)))
|
||||
hoverEnabled: true
|
||||
ToolTip {
|
||||
visible: tabText.truncated && hovered
|
||||
delay: 1000
|
||||
text: modelData
|
||||
}
|
||||
|
||||
contentItem: Text {
|
||||
background: QT.Item {
|
||||
anchors.fill: parent
|
||||
|
||||
QT.Rectangle {
|
||||
visible: mainItem.currentIndex === index
|
||||
height: 4
|
||||
color: DefaultStyle.orangeColor
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: QT.Text {
|
||||
id: tabText
|
||||
anchors.fill: parent
|
||||
font.bold: true
|
||||
color: DefaultStyle.defaultTextColor
|
||||
font.family: DefaultStyle.defaultFont
|
||||
font.pointSize: DefaultStyle.tabButtonTextSize
|
||||
text: txtMeter.text
|
||||
elide: QT.Text.ElideRight
|
||||
maximumLineCount: 1
|
||||
text: txtMeter.elidedText
|
||||
// width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x)))
|
||||
bottomPadding: 5
|
||||
width: txtMeter.advanceWidth
|
||||
}
|
||||
|
||||
TextMetrics {
|
||||
QT.TextMetrics {
|
||||
id: txtMeter
|
||||
font: tabText.font
|
||||
text: modelData
|
||||
|
|
|
|||
145
Linphone/view/Item/Test/ItemsTest.qml
Normal file
145
Linphone/view/Item/Test/ItemsTest.qml
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.2 as Control
|
||||
import QtQuick.Layouts
|
||||
import Linphone
|
||||
|
||||
Window {
|
||||
width: 960
|
||||
height: 600
|
||||
visible: true
|
||||
title: qsTr("Test")
|
||||
ColumnLayout {
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "Combobox with image"
|
||||
}
|
||||
ComboBox {
|
||||
modelList: [
|
||||
{text: "item 1", img: AppIcons.info},
|
||||
{text: "item 2", img: AppIcons.info},
|
||||
{text: "item 3", img: AppIcons.info}
|
||||
]
|
||||
}
|
||||
}
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "Combobox without image"
|
||||
}
|
||||
ComboBox {
|
||||
modelList: [
|
||||
{text: "item 1"},
|
||||
{text: "item 2"},
|
||||
{text: "item 3"}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
Button {
|
||||
text: "button"
|
||||
}
|
||||
Button {
|
||||
capitalization: Font.AllUppercase
|
||||
text: "capital button"
|
||||
}
|
||||
Button {
|
||||
text: "inversed colors button"
|
||||
inversedColors: true
|
||||
}
|
||||
Button {
|
||||
text: "button with long tooltip"
|
||||
hoverEnabled: true
|
||||
ToolTip {
|
||||
visible: parent.hovered
|
||||
delay: 1000
|
||||
text: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices, arcu ut egestas tincidunt, nisi velit hendrerit nunc, malesuada feugiat enim ipsum eu tortor. Nam a nibh posuere, hendrerit lacus non, blandit nisi. Aliquam quis ipsum sed elit euismod consequat. Donec vitae bibendum justo. Vestibulum ornare quam sit amet velit vestibulum maximus. Curabitur venenatis convallis eros, vitae pulvinar turpis. Pellentesque consequat sodales massa, dapibus sollicitudin nunc ultricies consectetur. Cras id quam luctus, rhoncus neque vitae, aliquet nibh. Quisque placerat, ipsum eu tincidunt elementum, mauris augue rutrum sem, ac accumsan turpis tellus at turpis. Quisque sollicitudin velit vel libero rhoncus tempor. Maecenas ut turpis aliquet, auctor ante sit amet, volutpat orci. Donec purus quam, venenatis a massa in, placerat finibus nulla. Vestibulum ac nunc eu sapien sollicitudin convallis. Aliquam elit quam, scelerisque at diam sed, vestibulum dapibus ligula. Suspendisse lobortis, neque eget iaculis efficitur, lorem ligula posuere urna, id tempor ipsum mi sed lacus. Mauris faucibus fringilla dapibus. Pellentesque quis vulputate odio. Integer pretium, est non fermentum tristique, eros metus vulputate ante, eu laoreet nulla odio in justo. Mauris mollis nulla sit amet erat malesuada interdum. Donec pretium risus ut justo sodales, sed sollicitudin felis consequat. Praesent semper porta leo, nec finibus urna molestie porttitor. Etiam sagittis odio nec turpis consequat dignissim. Sed pellentesque sodales rutrum. Donec varius neque nec ex imperdiet interdum. Suspendisse dignissim elit et dignissim blandit. "
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Carousel {
|
||||
itemsList: [
|
||||
Component {
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "item 1"
|
||||
}
|
||||
Text {
|
||||
textItem.text: "item 1"
|
||||
}
|
||||
}
|
||||
},
|
||||
Component {
|
||||
RowLayout {
|
||||
Text {
|
||||
textItem.text: "item 2"
|
||||
}
|
||||
Text {
|
||||
textItem.text: "item 2"
|
||||
}
|
||||
}
|
||||
},
|
||||
Component {
|
||||
Text {
|
||||
textItem.text: "item 3"
|
||||
}
|
||||
},
|
||||
Component {
|
||||
Text {
|
||||
textItem.text: "item 4"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Text {
|
||||
textItem.text: "default text"
|
||||
}
|
||||
Text {
|
||||
id: testText
|
||||
scaleLettersFactor: 2
|
||||
textItem.text: "scaled text"
|
||||
}
|
||||
RowLayout {
|
||||
TextInput {
|
||||
label: "mandatory text input"
|
||||
defaultText: "default text"
|
||||
mandatory: true
|
||||
}
|
||||
TextInput {
|
||||
label: "password text input"
|
||||
defaultText: "default text"
|
||||
hidden: true
|
||||
}
|
||||
TextInput {
|
||||
id: next
|
||||
label: "text input with long long looooooooooooooooooooooooooooooooooooooooooooooooooooooooong label"
|
||||
defaultText: "long long long default text"
|
||||
}
|
||||
TextInput {
|
||||
label: "number text input"
|
||||
validator: IntValidator{}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Text {
|
||||
textItem.text: "4 digit inputs"
|
||||
}
|
||||
RowLayout {
|
||||
Repeater {
|
||||
model: 4
|
||||
DigitInput {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
TabBar {
|
||||
spacing: 10
|
||||
contentWidth: 400
|
||||
model: [qsTr("A"), qsTr("Lot"), qsTr("Of"), qsTr("Tab"), qsTr("Buttons (which one has a very long label)"), qsTr("For"), qsTr("The"), qsTr("Tab"), qsTr("Bar"), qsTr("To"), qsTr("Not"), qsTr("Have"), qsTr("Enough"), qsTr("Space"), qsTr("To"), qsTr("Display"), qsTr("Them"), qsTr("All")]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,21 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.2 as Control
|
||||
import QtQuick.Layouts
|
||||
import Linphone
|
||||
|
||||
Text {
|
||||
RowLayout {
|
||||
id: mainItem
|
||||
property alias textItem: innerItem
|
||||
property double scaleLettersFactor: 1.
|
||||
font.family: DefaultStyle.defaultFont
|
||||
font.pointSize: DefaultStyle.defaultFontPointSize
|
||||
color: DefaultStyle.defaultTextColor
|
||||
transform: Scale { yScale: scaleLettersFactor}
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,16 +18,22 @@ ColumnLayout {
|
|||
|
||||
Text {
|
||||
visible: label.length > 0
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: mainItem.label + (mainItem.mandatory ? "*" : "")
|
||||
color: DefaultStyle.formItemLabelColor
|
||||
font {
|
||||
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 {
|
||||
pointSize: DefaultStyle.formItemLabelSize
|
||||
family: DefaultStyle.defaultFont
|
||||
bold: true
|
||||
}
|
||||
Layout.preferredWidth: mainItem.textInputWidth
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: input
|
||||
Component.onCompleted: {
|
||||
if (mainItem.fillWidth)
|
||||
Layout.fillWidth = true
|
||||
|
|
@ -50,10 +56,6 @@ ColumnLayout {
|
|||
inputMethodHints: mainItem.inputMethodHints
|
||||
selectByMouse: true
|
||||
validator: mainItem.validator
|
||||
// MouseArea {
|
||||
// anchors.fill: parent
|
||||
// // acceptedButtons: Qt.NoButton
|
||||
// }
|
||||
background: Item {
|
||||
opacity: 0.
|
||||
}
|
||||
|
|
|
|||
22
Linphone/view/Item/ToolTip.qml
Normal file
22
Linphone/view/Item/ToolTip.qml
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls as Control
|
||||
import Linphone
|
||||
|
||||
Control.ToolTip {
|
||||
id: mainItem
|
||||
delay: 1000
|
||||
clip: true
|
||||
background: Rectangle {
|
||||
id: tooltipBackground
|
||||
opacity: 0.7
|
||||
color: DefaultStyle.tooltipBackgroundColor
|
||||
radius: 15
|
||||
}
|
||||
contentItem: Text {
|
||||
textItem.text: mainItem.text
|
||||
textItem.color: DefaultStyle.defaultTextColor
|
||||
textItem.width: tooltipBackground.width
|
||||
textItem.wrapMode: Text.Wrap
|
||||
textItem.elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
|
@ -14,9 +14,9 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
text: "Login"
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
textItem.text: "Login"
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -24,8 +24,8 @@ LoginLayout {
|
|||
}
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
text: "No account yet ?"
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
textItem.text: "No account yet ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
text: {
|
||||
textItem.text: {
|
||||
var completeString = (mainItem.email.length > 0) ? "email" : "phone number"
|
||||
text = "Register | Register with your " + completeString
|
||||
}
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -47,8 +47,8 @@ LoginLayout {
|
|||
Layout.fillHeight: true
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
font.bold: true
|
||||
text: {
|
||||
textItem.font.bold: true
|
||||
textItem.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:"
|
||||
}
|
||||
|
|
@ -77,8 +77,8 @@ LoginLayout {
|
|||
RowLayout {
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
text: "Didn't receive the code ?"
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
textItem.text: "Didn't receive the code ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
text: "Register"
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
textItem.text: "Register"
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -27,8 +27,8 @@ LoginLayout {
|
|||
}
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
text: "Already have an account ?"
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
textItem.text: "Already have an account ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
|
@ -89,14 +89,14 @@ LoginLayout {
|
|||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
text: "I would like to suscribe to the newsletter"
|
||||
textItem.text: "I would like to suscribe to the newsletter"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
textItem.text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
}
|
||||
}
|
||||
Button {
|
||||
|
|
@ -158,14 +158,14 @@ LoginLayout {
|
|||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
text: "I would like to suscribe to the newsletter"
|
||||
textItem.text: "I would like to suscribe to the newsletter"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
CheckBox {
|
||||
}
|
||||
Text {
|
||||
text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
textItem.text: "I accept the Terms and Conditions : Read the Terms and Conditions. <br>I accept the Privacy policy : Read the Privacy policy."
|
||||
}
|
||||
}
|
||||
Button {
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ LoginLayout {
|
|||
source: AppIcons.profile
|
||||
}
|
||||
Text {
|
||||
text: "Use a SIP Account"
|
||||
font.pointSize: DefaultStyle.title2FontPointSize
|
||||
font.bold: true
|
||||
textItem.text: "Use a SIP Account"
|
||||
textItem.font.pointSize: DefaultStyle.title2FontPointSize
|
||||
textItem.font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -38,8 +38,8 @@ LoginLayout {
|
|||
}
|
||||
Text {
|
||||
Layout.rightMargin: 15
|
||||
text: "No account yet ?"
|
||||
font.pointSize: DefaultStyle.defaultTextSize
|
||||
textItem.text: "No account yet ?"
|
||||
textItem.font.pointSize: DefaultStyle.defaultTextSize
|
||||
}
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
|
@ -72,10 +72,10 @@ LoginLayout {
|
|||
Text {
|
||||
Layout.preferredWidth: 361
|
||||
Layout.fillWidth: true
|
||||
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>
|
||||
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>"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,20 +11,20 @@ LoginLayout {
|
|||
titleContent: RowLayout {
|
||||
Text {
|
||||
id: welcome
|
||||
text: "Welcome"
|
||||
color: DefaultStyle.titleColor
|
||||
font.pointSize: DefaultStyle.title1FontPointSize
|
||||
font.bold: true
|
||||
textItem.text: "Welcome"
|
||||
textItem.color: DefaultStyle.titleColor
|
||||
textItem.font.pointSize: DefaultStyle.title1FontPointSize
|
||||
textItem.font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
Layout.leftMargin: 10
|
||||
Layout.bottomMargin: 5
|
||||
color: DefaultStyle.titleColor
|
||||
text: "in Linphone"
|
||||
font.pointSize: 18
|
||||
font.bold: true
|
||||
textItem.color: DefaultStyle.titleColor
|
||||
textItem.text: "in Linphone"
|
||||
textItem.font.pointSize: 18
|
||||
textItem.font.bold: true
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Item {
|
||||
|
|
@ -42,8 +42,8 @@ LoginLayout {
|
|||
radius: 48
|
||||
}
|
||||
contentItem: Text {
|
||||
text: "Skip"
|
||||
font.underline: true
|
||||
textItem.text: "Skip"
|
||||
textItem.font.underline: true
|
||||
}
|
||||
onClicked: {
|
||||
console.debug("[LoginItem] User: Click skip")
|
||||
|
|
@ -65,61 +65,28 @@ LoginLayout {
|
|||
}
|
||||
Carousel {
|
||||
id: carousel
|
||||
itemsList: [carousel0, carousel1, carousel2]
|
||||
Component {
|
||||
id: carousel0
|
||||
itemsCount: slideRepeater.count
|
||||
itemsList: Repeater {
|
||||
id: slideRepeater
|
||||
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>"},
|
||||
]
|
||||
Item {
|
||||
ColumnLayout {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Text {
|
||||
text: "Linphone"
|
||||
font.bold: true
|
||||
font.pixelSize: 20
|
||||
textItem.text: modelData.title
|
||||
textItem.font.bold: true
|
||||
textItem.font.pixelSize: 20
|
||||
scaleLettersFactor: 1.1
|
||||
}
|
||||
Text {
|
||||
Layout.maximumWidth: 361
|
||||
wrapMode: Text.WordWrap
|
||||
font.pixelSize: 11
|
||||
text: "Une application de communication <b>sécurisée</b>,<br> <b>open source</b> et <b>française</b>. "
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: carousel1
|
||||
Item {
|
||||
ColumnLayout {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Text {
|
||||
text: "Sécurisé"
|
||||
font.bold: true
|
||||
font.pixelSize: 20
|
||||
}
|
||||
Text {
|
||||
Layout.maximumWidth: 361
|
||||
wrapMode: Text.WordWrap
|
||||
font.pixelSize: 11
|
||||
text: "Vos communications sont en sécurité grâce aux <br><b>Chiffrement de bout en bout</b>."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: carousel2
|
||||
Item {
|
||||
ColumnLayout {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Text {
|
||||
text: "Open Source"
|
||||
font.bold: true
|
||||
font.pixelSize: 20
|
||||
}
|
||||
Text {
|
||||
Layout.maximumWidth: 361
|
||||
wrapMode: Text.WordWrap
|
||||
font.pixelSize: 11
|
||||
text: "Une application open source et un <b>service gratuit</b> depuis <b>2001</b>"
|
||||
textItem.wrapMode: Text.WordWrap
|
||||
textItem.font.pixelSize: 11
|
||||
textItem.text: modelData.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -132,7 +99,7 @@ LoginLayout {
|
|||
Layout.bottomMargin: 20
|
||||
Layout.leftMargin: 361 - width
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
text: carousel.currentIndex < (carousel.itemsList.length - 1) ? "Next" : "Start"
|
||||
text: carousel.currentIndex < (carousel.itemsCount - 1) ? "Next" : "Start"
|
||||
onClicked: {
|
||||
if (carousel.currentIndex < 2) carousel.goToSlide(carousel.currentIndex + 1);
|
||||
else mainItem.startButtonPressed();
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ QtObject {
|
|||
property color comboBoxHighlightColor: "#C0D1D9"
|
||||
property color comboBoxHoverColor: "#6C7A87"
|
||||
|
||||
property color tooltipBackgroundColor: "#DFECF2"
|
||||
|
||||
property color digitInputFocusedColor: "#FE5E00"
|
||||
property color digitInputColor: "#6C7A87"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue