Test file for qml items :

Text
ComboBox
TextInput
Button
TabBar
Tooltip
Carousel
+ fixes on this items

Linphone/view/App/Layout/LoginLayout.qml

@@ -37,9 +37,9 @@ Item {
 
 				Text {
 					Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-					text: "About"
+					textItem.text: "About"
-					font.pixelSize: 12
+					textItem.font.pixelSize: 12
-					color: DefaultStyle.grayColor
+					textItem.color: DefaultStyle.grayColor
 				}
 			}
 			RowLayout {

Linphone/view/CMakeLists.txt

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

Linphone/view/Item/Button.qml

@@ -15,19 +15,20 @@ Control.Button {
 	}
 	
 	contentItem: Text {
-		horizontalAlignment: Text.AlignHCenter
+		textItem.horizontalAlignment: Text.AlignHCenter
-		verticalAlignment: Text.AlignVCenter
+		textItem.verticalAlignment: Text.AlignVCenter
-		leftPadding: 11
+		textItem.leftPadding: 11
-		rightPadding: 11
+		textItem.rightPadding: 11
-		topPadding: 6
+		textItem.topPadding: 6
-		bottomPadding: 6
+		textItem.bottomPadding: 6
 
-		wrapMode: Text.WordWrap
+		textItem.wrapMode: Text.WordWrap
-		text: mainItem.text
+		textItem.text: mainItem.text
-		color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor
+		textItem.color: inversedColors ? DefaultStyle.buttonInversedTextColor : DefaultStyle.buttonTextColor
-		font {
+		textItem.font {
 			bold: true
 			pointSize: mainItem.textSize
+			family: DefaultStyle.defaultFont
 			capitalization: mainItem.capitalization
 		}
 	}

Linphone/view/Item/Carousel.qml

@@ -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
-
+		children: mainItem.itemsList
-		property var items: children
 		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

Linphone/view/Item/CheckBox.qml

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

Linphone/view/Item/ComboBox.qml

@@ -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
+		textItem.verticalAlignment: Text.AlignVCenter
-		text: mainItem.label
+		textItem.text: mainItem.label
-		color: DefaultStyle.formItemLabelColor
+		textItem.color: DefaultStyle.formItemLabelColor
-		font {
+		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

Linphone/view/Item/Form/LoginForm.qml

@@ -38,10 +38,10 @@ ColumnLayout {
 						}
 					}
 					Text {
-						color: DefaultStyle.grayColor
+						textItem.color: DefaultStyle.grayColor
-						text: "Forgotten password?"
+						textItem.text: "Forgotten password?"
-						font.underline: true
+						textItem.font.underline: true
-						font.pointSize: DefaultStyle.defaultTextSize
+						textItem.font.pointSize: DefaultStyle.defaultTextSize
 					}
 				
 				}

Linphone/view/Item/PhoneNumberComboBox.qml

@@ -12,10 +12,10 @@ ColumnLayout {
 
 	Text {
 		visible: label.length > 0
-		verticalAlignment: Text.AlignVCenter
+		textItem.verticalAlignment: Text.AlignVCenter
-		text: mainItem.label
+		textItem.text: mainItem.label
-		color: DefaultStyle.formItemLabelColor
+		textItem.color: DefaultStyle.formItemLabelColor
-		font {
+		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 : ""
+				textItem.text: parent.currentItem ? parent.currentItem.flag : ""
-				font.family: DefaultStyle.emojiFont
+				textItem.font.family: DefaultStyle.emojiFont
 				anchors.rightMargin: 5
 				anchors.verticalCenter: parent.verticalCenter
 			}
 			Text {
-				leftPadding: 5
+				textItem.leftPadding: 5
-				text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : ""
+				textItem.text: parent.currentItem ? "+" + parent.currentItem.countryCallingCode : ""
-				color: DefaultStyle.formItemLabelColor
+				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
+						textItem.text: $modelData.flag
-						font.family: DefaultStyle.emojiFont
+						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
+						textItem.text: "+" + $modelData.countryCallingCode
-						elide: Text.ElideRight
+						textItem.elide: Text.ElideRight
-						leftPadding: 5
+						textItem.leftPadding: 5
 						anchors.left: delegateImg.right
 						anchors.right: parent.right
 						anchors.verticalCenter: parent.verticalCenter 
-						color: DefaultStyle.formItemLabelColor
+						textItem.color: DefaultStyle.formItemLabelColor
 					}
 
 					MouseArea {

Linphone/view/Item/PhoneNumberInput.qml

@@ -15,10 +15,10 @@ ColumnLayout {
 
 	Text {
 		visible: label.length > 0
-		verticalAlignment: Text.AlignVCenter
+		textItem.verticalAlignment: Text.AlignVCenter
-		text: mainItem.label + (mainItem.mandatory ? "*" : "")
+		textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "")
-		color: DefaultStyle.formItemLabelColor
+		textItem.color: DefaultStyle.formItemLabelColor
-		font {
+		textItem.font {
 			pointSize: DefaultStyle.formItemLabelSize
 			bold: true
 		}

Linphone/view/Item/TabBar.qml

@@ -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
-
+	wheelEnabled: true
-	background: Item {
+	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 {
+		// QT.Rectangle {
-			height: 4
+		// 	height: 4
-			color: DefaultStyle.orangeColor
+		// 	color: DefaultStyle.orangeColor
-			anchors.bottom: parent.bottom
+		// 	anchors.bottom: parent.bottom
-			x: mainItem.currentItem 
+		// 	// anchors.left: mainItem.currentItem.left
-					? mainItem.currentItem.x - mainItem.originX
+		// 	// anchors.right: mainItem.currentItem.right
-					: 0
+		// 	x: mainItem.currentItem 
-			width: mainItem.currentItem ? mainItem.currentItem.width : 0
+		// 		? mainItem.currentItem.x - mainItem.originX
-			clip: true
+		// 		: 0
-			Behavior on x { NumberAnimation {duration: 100}}
+		// 	width: mainItem.currentItem ? mainItem.currentItem.width : 0
-			Behavior on width {NumberAnimation {duration: 100}}
+		// 	// 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
+			required property int index
-
+			width: Math.min(txtMeter.advanceWidth, Math.max(50, mainItem.width - (x - mainItem.x)))
-			background: Item {
+			hoverEnabled: true
-				visible: false
+			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

Linphone/view/Item/Test/ItemsTest.qml

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

Linphone/view/Item/Text.qml

@@ -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.
+	Text {
+		id: innerItem
 		font.family: DefaultStyle.defaultFont
 		font.pointSize: DefaultStyle.defaultFontPointSize
 		color: DefaultStyle.defaultTextColor
-	transform: Scale { yScale: scaleLettersFactor}
+		wrapMode: Text.Wrap
+		elide: Text.ElideRight
+		transformOrigin: Item.TopLeft
+		transform: Scale { 
+			yScale: mainItem.scaleLettersFactor
+		}
+	}
 }

Linphone/view/Item/TextInput.qml

@@ -18,16 +18,22 @@ ColumnLayout {
 
 	Text {
 		visible: label.length > 0
-		verticalAlignment: Text.AlignVCenter
+		textItem.verticalAlignment: Text.AlignVCenter
-		text: mainItem.label + (mainItem.mandatory ? "*" : "")
+		textItem.text: mainItem.label + (mainItem.mandatory ? "*" : "")
-		color: DefaultStyle.formItemLabelColor
+		textItem.color: DefaultStyle.formItemLabelColor
-		font {
+		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.
 			}

Linphone/view/Item/ToolTip.qml

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

Linphone/view/Page/Login/LoginPage.qml

@@ -14,9 +14,9 @@ LoginLayout {
 			source: AppIcons.profile
 		}
 		Text {
-			text: "Login"
+			textItem.text: "Login"
-			font.pointSize: DefaultStyle.title2FontPointSize
+			textItem.font.pointSize: DefaultStyle.title2FontPointSize
-			font.bold: true
+			textItem.font.bold: true
 			scaleLettersFactor: 1.1
 		}
 		Item {
@@ -24,8 +24,8 @@ LoginLayout {
 		}
 		Text {
 			Layout.rightMargin: 15
-			text: "No account yet ?"
+			textItem.text: "No account yet ?"
-			font.pointSize: DefaultStyle.defaultTextSize
+			textItem.font.pointSize: DefaultStyle.defaultTextSize
 		}
 		Button {
 			Layout.alignment: Qt.AlignRight

Linphone/view/Page/Login/RegisterCheckingPage.qml

@@ -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
+			textItem.font.pointSize: DefaultStyle.title2FontPointSize
-			font.bold: true
+			textItem.font.bold: true
 			scaleLettersFactor: 1.1
 		}
 		Item {
@@ -47,8 +47,8 @@ LoginLayout {
 		Layout.fillHeight: true
 		Text {
 			Layout.alignment: Qt.AlignTop
-			font.bold: true
+			textItem.font.bold: true
-			text: {
+			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 ?"
+						textItem.text: "Didn't receive the code ?"
-						font.pointSize: DefaultStyle.defaultTextSize
+						textItem.font.pointSize: DefaultStyle.defaultTextSize
 					}
 					Button {
 						Layout.alignment: Qt.AlignRight

Linphone/view/Page/Login/RegisterPage.qml

@@ -17,9 +17,9 @@ LoginLayout {
 			source: AppIcons.profile
 		}
 		Text {
-			text: "Register"
+			textItem.text: "Register"
-			font.pointSize: DefaultStyle.title2FontPointSize
+			textItem.font.pointSize: DefaultStyle.title2FontPointSize
-			font.bold: true
+			textItem.font.bold: true
 			scaleLettersFactor: 1.1
 		}
 		Item {
@@ -27,8 +27,8 @@ LoginLayout {
 		}
 		Text {
 			Layout.rightMargin: 15
-			text: "Already have an account ?"
+			textItem.text: "Already have an account ?"
-			font.pointSize: DefaultStyle.defaultTextSize
+			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 {

Linphone/view/Page/Login/SIPLoginPage.qml

@@ -28,9 +28,9 @@ LoginLayout {
 			source: AppIcons.profile
 		}
 		Text {
-			text: "Use a SIP Account"
+			textItem.text: "Use a SIP Account"
-			font.pointSize: DefaultStyle.title2FontPointSize
+			textItem.font.pointSize: DefaultStyle.title2FontPointSize
-			font.bold: true
+			textItem.font.bold: true
 			scaleLettersFactor: 1.1
 		}
 		Item {
@@ -38,8 +38,8 @@ LoginLayout {
 		}
 		Text {
 			Layout.rightMargin: 15
-			text: "No account yet ?"
+			textItem.text: "No account yet ?"
-			font.pointSize: DefaultStyle.defaultTextSize
+			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
+							textItem.wrapMode: Text.WordWrap
-							color: DefaultStyle.darkGrayColor
+							textItem.color: DefaultStyle.darkGrayColor
-							font.pointSize: DefaultStyle.defaultTextSize
+							textItem.font.pointSize: DefaultStyle.defaultTextSize
-							text: "<p>Some features require a Linphone account, such as group messaging, video conferences...</p> 
+							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>"
 						}

Linphone/view/Page/Login/WelcomePage.qml

@@ -11,20 +11,20 @@ LoginLayout {
 	titleContent: RowLayout {
 		Text {
 			id: welcome
-			text: "Welcome"
+			textItem.text: "Welcome"
-			color: DefaultStyle.titleColor
+			textItem.color: DefaultStyle.titleColor
-			font.pointSize: DefaultStyle.title1FontPointSize
+			textItem.font.pointSize: DefaultStyle.title1FontPointSize
-			font.bold: true
+			textItem.font.bold: true
 			scaleLettersFactor: 1.1
 		}
 		Text {
 			Layout.alignment: Qt.AlignBottom
 			Layout.leftMargin: 10
 			Layout.bottomMargin: 5
-			color: DefaultStyle.titleColor
+			textItem.color: DefaultStyle.titleColor
-			text: "in Linphone"
+			textItem.text: "in Linphone"
-			font.pointSize: 18
+			textItem.font.pointSize: 18
-			font.bold: true
+			textItem.font.bold: true
 			scaleLettersFactor: 1.1
 		}
 		Item {
@@ -42,8 +42,8 @@ LoginLayout {
 				radius: 48
 			}
 			contentItem: Text {
-				text: "Skip"
+				textItem.text: "Skip"
-				font.underline: true
+				textItem.font.underline: true
 			}
 			onClicked: {
 				console.debug("[LoginItem] User: Click skip")
@@ -65,61 +65,28 @@ LoginLayout {
 			}
 			Carousel {
 				id: carousel
-				itemsList: [carousel0, carousel1, carousel2]
+				itemsCount: slideRepeater.count
-				Component {
+				itemsList: Repeater {
-					id: carousel0
+					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"
+								textItem.text: modelData.title
-								font.bold: true
+								textItem.font.bold: true
-								font.pixelSize: 20
+								textItem.font.pixelSize: 20
 								scaleLettersFactor: 1.1
 							}
 							Text {
 								Layout.maximumWidth: 361
-								wrapMode: Text.WordWrap
+								textItem.wrapMode: Text.WordWrap
-								font.pixelSize: 11
+								textItem.font.pixelSize: 11
-								text: "Une application de communication <b>sécurisée</b>,<br> <b>open source</b> et <b>française</b>. "
+								textItem.text: modelData.text
-							}
-						}
-					}
-				}
-				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>"
 							}
 						}
 					}
@@ -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();

Linphone/view/Style/DefaultStyle.qml

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