Responsive settings views

Linphone/view/CMakeLists.txt

@@ -28,7 +28,7 @@ list(APPEND _LINPHONEAPP_QML_FILES
 	view/Control/Container/Call/ActiveSpeakerLayout.qml
 	view/Control/Container/Call/CallHistoryLayout.qml
 	view/Control/Container/Call/CallLayout.qml
-	view/Control/Container/Call/GridLayout.qml
+	view/Control/Container/Call/CallGridLayout.qml
 	view/Control/Container/Call/Mosaic.qml
 	view/Control/Container/Contact/ContactLayout.qml
 	view/Control/Container/Main/MainRightPanel.qml

Linphone/view/Control/Container/Call/CallLayout.qml

@@ -73,7 +73,7 @@ Item {
 	}
 	Component{
 		id: gridComponent
-		GridLayout{
+		CallGridLayout{
 			Layout.Layout.fillWidth: true
 			Layout.Layout.fillHeight: true
 			call: mainItem.call

Linphone/view/Page/Form/Settings/SettingsPage.qml

@@ -12,8 +12,8 @@ AbstractSettingsMenu {
 		//{title: qsTr("Sécurité"), layout: "SecuritySettingsLayout"},
 		{title: qsTr("Conversations"), layout: "ChatSettingsLayout", visible: !SettingsCpp.disableChatFeature},
 		{title: qsTr("Contacts"), layout: "ContactsSettingsLayout"},
-		{title: qsTr("Réunions"), layout: "MeetingsSettingsLayout", visible: !SettingsCpp.disableMeetingsFeature},
+		//{title: qsTr("Réunions"), layout: "MeetingsSettingsLayout", visible: !SettingsCpp.disableMeetingsFeature},
-		{title: qsTr("Affichage"), layout: "DisplaySettingsLayout"},
+		//{title: qsTr("Affichage"), layout: "DisplaySettingsLayout"},
 		{title: qsTr("Réseau"), layout: "NetworkSettingsLayout"},
 		{title: qsTr("Paramètres avancés"), layout: "AdvancedSettingsLayout"}
 	]

Linphone/view/Page/Layout/Settings/AbstractSettingsLayout.qml

@@ -10,21 +10,36 @@ Rectangle {
 	width: container.width
 	height: container.height
 	property string titleText
-	property var contentComponent
+	property var contentModel
 	property var topbarOptionalComponent
 	property var model
 	color: 'white'
 	property var container
-
+	property int contentHeight: contentRepeater.count > 0 ? contentRepeater.itemAt(0).height * contentRepeater.count : 0
+	property int minimumWidthForSwitchintToRowLayout: 981 * DefaultStyle.dp
+	property var useVerticalLayout
+	function setResponsivityFlags() {
+		var newValue = width < minimumWidthForSwitchintToRowLayout * DefaultStyle.dp
+		if (useVerticalLayout != newValue) {
+			useVerticalLayout = newValue
+		}
+	}
+	onWidthChanged: {
+		setResponsivityFlags()
+    }
+	Component.onCompleted: {
+			setResponsivityFlags()
+	}
 	Control.ScrollView {
 		id: scrollView
 		height: parent.height
 		width: parent.width - 2 * 45 * DefaultStyle.dp
 		anchors.centerIn: parent
-		contentHeight: content.height + 20 * DefaultStyle.dp
+		contentHeight: (contentRepeater.height + header.height) + 20 * DefaultStyle.dp
 		contentWidth: parent.width - 2 * 45 * DefaultStyle.dp
 		Control.ScrollBar.vertical: ScrollBar {
 			active: scrollView.contentHeight > container.height
+			visible: scrollView.contentHeight > container.height
 			interactive: true
 			policy: Control.ScrollBar.AsNeeded
 			anchors.top: parent.top
@@ -36,13 +51,14 @@ Rectangle {
 			active: false
 		}
 		ColumnLayout {
-			id: content
+			id: header
 			width: parent.width
 			spacing: 10 * DefaultStyle.dp
 			RowLayout {
 				Layout.fillWidth: true
 				Layout.topMargin: 20 * DefaultStyle.dp
 				spacing: 5 * DefaultStyle.dp
+				Layout.bottomMargin: 10 * DefaultStyle.dp
 				Button {
 					id: backButton
 					Layout.preferredHeight: 24 * DefaultStyle.dp
@@ -74,18 +90,64 @@ Rectangle {
 					Layout.rightMargin: 34 * DefaultStyle.dp
 				}
 			}
-			Rectangle {
+			Repeater {
-				Layout.fillWidth: true
+				id: contentRepeater
-				Layout.topMargin: 16 * DefaultStyle.dp
+				model: mainItem.contentModel
-				height: 1 * DefaultStyle.dp
+				delegate: ColumnLayout {
-				color: DefaultStyle.main2_500main
+					Rectangle {
-			}
+						Layout.topMargin: 16 * DefaultStyle.dp
-			Loader {
+						Layout.bottomMargin: 16 * DefaultStyle.dp
-				Layout.fillWidth: true
+						Layout.fillWidth: true
-				sourceComponent: mainItem.contentComponent
+						height: 1 * DefaultStyle.dp
-			}
+						color: DefaultStyle.main2_500main
-			Item {
+					}
-				Layout.fillHeight: true
+					GridLayout {
+						rows: 1
+						columns: mainItem.useVerticalLayout ? 1 : 2
+						Layout.fillWidth: true
+						Layout.preferredWidth: parent.width
+						rowSpacing: (modelData.title.length > 0 || modelData.subTitle.length > 0 ? 20 : 0) * DefaultStyle.dp
+						columnSpacing: 47 * DefaultStyle.dp
+						ColumnLayout {
+							Layout.preferredWidth: 341 * DefaultStyle.dp
+							Layout.maximumWidth: 341 * DefaultStyle.dp
+							spacing: 3 * DefaultStyle.dp
+							Text {
+								text: modelData.title
+								visible: modelData.title.length > 0
+								font: Typography.h4
+								wrapMode: Text.WordWrap
+								color: DefaultStyle.main2_600
+								Layout.preferredWidth: parent.width
+							}
+							Text {
+								text: modelData.subTitle
+								visible: modelData.subTitle.length > 0
+								font: Typography.p1s
+								wrapMode: Text.WordWrap
+								color: DefaultStyle.main2_600
+								Layout.preferredWidth: parent.width
+							}
+							Item {
+								Layout.fillHeight: true
+							}
+						}
+						RowLayout {
+							anchors.topMargin: 21 * DefaultStyle.dp
+							anchors.bottomMargin: 21 * DefaultStyle.dp
+							anchors.leftMargin: (mainItem.useVerticalLayout ? 0 : 17) * DefaultStyle.dp
+							Layout.preferredWidth: (modelData.customWidth > 0 ? modelData.customWidth : 545) * DefaultStyle.dp
+							Layout.alignment: Qt.AlignRight
+							Loader {
+								Layout.fillWidth: true
+								sourceComponent: modelData.contentComponent
+							}
+							Item {
+								Layout.preferredWidth: (modelData.customRightMargin > 0 ? modelData.customRightMargin : 17) * DefaultStyle.dp
+							}
+						}
+					}
+				}
 			}
 		}
 	}

Linphone/view/Page/Layout/Settings/AccountSettingsGeneralLayout.qml

@@ -9,377 +9,328 @@ import UtilsCpp
 
 AbstractSettingsLayout {
 	id: mainItem
-	contentComponent: content
+
+	width: parent?.width
+	contentModel: [
+		{
+			title: qsTr("Détails"),
+			subTitle: qsTr("Editer les informations de votre compte."),
+			contentComponent: accountParametersComponent
+		},
+		{
+			title: qsTr("Vos appareils"),
+			subTitle: qsTr("La liste des appareils connectés à votre compte. Vous pouvez retirer les appareils que vous n’utilisez plus."),
+			contentComponent: accountDevicesComponent
+		}
+	]
+
 	property alias account: mainItem.model
+
+	// Account parameters
+	//////////////////////////
+
 	Component {
-		id: content
+		id: accountParametersComponent
 		ColumnLayout {
-			width: parent.width
+			Layout.fillWidth: true
-			spacing: 5 * DefaultStyle.dp
+			spacing: 20 * DefaultStyle.dp
+			Avatar {
+				id: avatar
+				account: model
+				displayPresence: false
+				Layout.preferredWidth: 100 * DefaultStyle.dp
+				Layout.preferredHeight: 100 * DefaultStyle.dp
+				Layout.alignment: Qt.AlignHCenter
+			}
+			IconLabelButton {
+				visible: model.core.pictureUri.length === 0
+				Layout.preferredWidth: width
+				Layout.preferredHeight: 17 * DefaultStyle.dp
+				iconSource: AppIcons.camera
+				iconSize: 17 * DefaultStyle.dp
+				text: qsTr("Ajouter une image")
+				onClicked: fileDialog.open()
+				Layout.alignment: Qt.AlignHCenter
+				color: DefaultStyle.main2_600
+			}
 			RowLayout {
-				Layout.topMargin: 16 * DefaultStyle.dp
+				visible: model.core.pictureUri.length > 0
+				Layout.alignment: Qt.AlignHCenter
 				spacing: 5 * DefaultStyle.dp
-				ColumnLayout {
+				IconLabelButton {
-					Layout.fillWidth: true
+					Layout.preferredWidth: width
-					spacing: 5 * DefaultStyle.dp
+					Layout.preferredHeight: 17 * DefaultStyle.dp
-					ColumnLayout {
+					iconSource: AppIcons.pencil
-						Layout.preferredWidth: 341 * DefaultStyle.dp
+					iconSize: 17 * DefaultStyle.dp
-						Layout.maximumWidth: 341 * DefaultStyle.dp
+					text: qsTr("Modifier l'image")
-						Layout.minimumWidth: 341 * DefaultStyle.dp
+					color: DefaultStyle.main2_600
-						spacing: 5 * DefaultStyle.dp
+					onClicked: fileDialog.open()
-						Text {
+				}
-							Layout.fillWidth: true
+				IconLabelButton {
-							text: qsTr("Détails")
+					Layout.preferredWidth: width
-							font: Typography.h4
+					Layout.preferredHeight: 17 * DefaultStyle.dp
-							wrapMode: Text.WordWrap
+					iconSource: AppIcons.trashCan
-							color: DefaultStyle.main2_600
+					iconSize: 17 * DefaultStyle.dp
-						}
+					text: qsTr("Supprimer l'image")
-						Text {
+					color: DefaultStyle.main2_600
-							text: qsTr("Editer les informations de votre compte.")
+					onClicked: model.core.pictureUri = ""
-							font: Typography.p1s
+				}
-							wrapMode: Text.WordWrap
+			}
-							color: DefaultStyle.main2_600
+			FileDialog {
-							Layout.fillWidth: true
+				id: fileDialog
-						}
+				currentFolder: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
-					}
+				onAccepted: {
-					Item {
+					var avatarPath = UtilsCpp.createAvatar( selectedFile )
-						Layout.fillHeight: true
+					if(avatarPath){
+						model.core.pictureUri = avatarPath
+						avatar.model = model
 					}
 				}
-				ColumnLayout {
+			}
+			RowLayout {
+				Layout.fillWidth: true
+				spacing: 5 * DefaultStyle.dp
+				Text {
+					Layout.alignment: Qt.AlignLeft
+					text: qsTr("Adresse SIP :")
+					color: DefaultStyle.main2_600
+					font: Typography.p2l
+				}
+				Text {
+					Layout.alignment: Qt.AlignLeft
+					text: model.core.identityAddress
+					color: DefaultStyle.main2_600
+					font: Typography.p1
+				}
+				Item {
 					Layout.fillWidth: true
-					spacing: 20 * DefaultStyle.dp
+				}
-					Layout.rightMargin: 44 * DefaultStyle.dp
+				IconLabelButton {
-					Layout.topMargin: 20 * DefaultStyle.dp
+					Layout.alignment: Qt.AlignRight
-					Layout.leftMargin: 64 * DefaultStyle.dp
+					Layout.preferredWidth: 20 * DefaultStyle.dp
-					Avatar {
+					Layout.preferredHeight: 20 * DefaultStyle.dp
-						account: model
+					iconSize: 24 * DefaultStyle.dp
-						displayPresence: false
+					iconSource: AppIcons.copy
-						Layout.preferredWidth: 100 * DefaultStyle.dp
+					color: DefaultStyle.main2_600
-						Layout.preferredHeight: 100 * DefaultStyle.dp
+					onClicked: UtilsCpp.copyToClipboard(model.core.identityAddress)
-						Layout.alignment: Qt.AlignHCenter
+				}
-					}
+			}
-					IconLabelButton {
+			ColumnLayout {
-						visible: model.core.pictureUri.length === 0
+				spacing: 5 * DefaultStyle.dp
-						Layout.preferredWidth: width
+				Layout.alignment: Qt.AlignLeft
-						Layout.preferredHeight: 17 * DefaultStyle.dp
+				Text {
-						iconSource: AppIcons.camera
+					text: qsTr("Nom d’affichage")
-						iconSize: 17 * DefaultStyle.dp
+					color: DefaultStyle.main2_600
-						text: qsTr("Ajouter une image")
+					font: Typography.p2l
-						onClicked: fileDialog.open()
+				}
-						Layout.alignment: Qt.AlignHCenter
+				Text {
-						color: DefaultStyle.main2_600
+					text: qsTr("Le nom qui sera affiché à vos correspondants lors de vos échanges.")
-					}
+					color: DefaultStyle.main2_600
-					RowLayout {
+					font: Typography.p1
-						visible: model.core.pictureUri.length > 0
+				}
-						Layout.alignment: Qt.AlignHCenter
+			}
-						spacing: 5 * DefaultStyle.dp
+			TextField {
-						IconLabelButton {
+				Layout.alignment: Qt.AlignLeft
-							Layout.preferredWidth: width
+				Layout.fillWidth: true
-							Layout.preferredHeight: 17 * DefaultStyle.dp
+				Layout.preferredHeight: 49 * DefaultStyle.dp
-							iconSource: AppIcons.pencil
+				initialText: model.core.displayName
-							iconSize: 17 * DefaultStyle.dp
+				backgroundColor: DefaultStyle.grey_100
-							text: qsTr("Modifier l'image")
+				onEditingFinished: {
-							color: DefaultStyle.main2_600
+					if (text.length != 0) model.core.displayName = text
-							onClicked: fileDialog.open()
+				}
-						}
+				toValidate: true
-						IconLabelButton {
+			}
-							Layout.preferredWidth: width
+			Text {
-							Layout.preferredHeight: 17 * DefaultStyle.dp
+				text: qsTr("Indicatif international*")
-							iconSource: AppIcons.trashCan
+				color: DefaultStyle.main2_600
-							iconSize: 17 * DefaultStyle.dp
+				font: Typography.p2l
-							text: qsTr("Supprimer l'image")
+			}
-							color: DefaultStyle.main2_600
+			ComboSetting {
-							onClicked: model.core.pictureUri = ""
+				Layout.fillWidth: true
-						}
+				Layout.topMargin: -15 * DefaultStyle.dp
-					}
+				entries: account.core.dialPlans
-					FileDialog {
+				propertyName: "dialPlan"
-						id: fileDialog
+				propertyOwner: account.core
-						currentFolder: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
+			}
-						onAccepted: {
+			SwitchSetting {
-							var avatarPath = UtilsCpp.createAvatar( selectedFile )
+				titleText: account?.core.humaneReadableRegistrationState
-							if(avatarPath){
+				subTitleText: account?.core.humaneReadableRegistrationStateExplained
-								model.core.pictureUri = avatarPath
+				propertyName: "registerEnabled"
-							}
+				propertyOwner: account?.core
-						}
+			}
-					}
+			RowLayout {
-					RowLayout {
+				id:mainItem
+				spacing : 20 * DefaultStyle.dp
+				ColumnLayout {
+					spacing : 5 * DefaultStyle.dp
+					Text {
+						text: qsTr("Supprimer mon compte")
+						font: Typography.p2l
+						wrapMode: Text.WordWrap
+						color: DefaultStyle.danger_500main
 						Layout.fillWidth: true
-						spacing: 5 * DefaultStyle.dp
-						Text {
-							Layout.alignment: Qt.AlignLeft
-							text: qsTr("Adresse SIP :")
-							color: DefaultStyle.main2_600
-							font: Typography.p2l
-						}
-						Text {
-							Layout.alignment: Qt.AlignLeft
-							text: model.core.identityAddress
-							color: DefaultStyle.main2_600
-							font: Typography.p1
-						}
-						Item {
-							Layout.fillWidth: true
-						}
-						IconLabelButton {
-							Layout.alignment: Qt.AlignRight
-							Layout.preferredWidth: 20 * DefaultStyle.dp
-							Layout.preferredHeight: 20 * DefaultStyle.dp
-							iconSize: 24 * DefaultStyle.dp
-							iconSource: AppIcons.copy
-							color: DefaultStyle.main2_600
-							onClicked: UtilsCpp.copyToClipboard(model.core.identityAddress)
-						}
-					}
-					ColumnLayout {
-						spacing: 5 * DefaultStyle.dp
-						Layout.alignment: Qt.AlignLeft
-						Text {
-							text: qsTr("Nom d’affichage")
-							color: DefaultStyle.main2_600
-							font: Typography.p2l
-						}
-						Text {
-							text: qsTr("Le nom qui sera affiché à vos correspondants lors de vos échanges.")
-							color: DefaultStyle.main2_600
-							font: Typography.p1
-						}
-					}
-					TextField {
-						Layout.alignment: Qt.AlignLeft
-						Layout.fillWidth: true
-						Layout.preferredHeight: 49 * DefaultStyle.dp
-						initialText: model.core.displayName
-						backgroundColor: DefaultStyle.grey_100
-						onEditingFinished: {
-							if (text.length != 0) model.core.displayName = text
-						}
-						toValidate: true
 					}
 					Text {
-						text: qsTr("Indicatif international*")
+						text: qsTr("Votre compte sera retiré de ce client linphone, mais vous restez connecté sur vos autres clients")
-						color: DefaultStyle.main2_600
+						font: Typography.p1
-						font: Typography.p2l
+						wrapMode: Text.WordWrap
-					}
+						color: DefaultStyle.main2_500main
-					ComboSetting {
 						Layout.fillWidth: true
-						Layout.topMargin: -15 * DefaultStyle.dp
-						entries: account.core.dialPlans
-						propertyName: "dialPlan"
-						propertyOwner: account.core
 					}
-					SwitchSetting {
+				}
-						titleText: account?.core.humaneReadableRegistrationState
+				Item {
-						subTitleText: account?.core.humaneReadableRegistrationStateExplained
+					Layout.fillWidth: true
-						propertyName: "registerEnabled"
+				}
-						propertyOwner: account?.core
+				Button {
-					}
+					background: Item{}
-					RowLayout {
+					Layout.alignment: Qt.AlignRight
-						id:mainItem
+					Layout.rightMargin: 5 * DefaultStyle.dp
-						spacing : 20 * DefaultStyle.dp
+					Layout.preferredWidth: 24 * DefaultStyle.dp
-						ColumnLayout {
+					Layout.preferredHeight: 24 * DefaultStyle.dp
-							spacing : 5 * DefaultStyle.dp
+					contentItem: RowLayout {
-							Text {
+						Layout.alignment: Qt.AlignRight
-								text: qsTr("Supprimer mon compte")
+						EffectImage {
-								font: Typography.p2l
+							imageSource: AppIcons.trashCan
-								wrapMode: Text.WordWrap
+							width: 24 * DefaultStyle.dp
-								color: DefaultStyle.danger_500main
+							height: 24 * DefaultStyle.dp
-								Layout.fillWidth: true
-							}
-							Text {
-								text: qsTr("Votre compte sera retiré de ce client linphone, mais vous restez connecté sur vos autres clients")
-								font: Typography.p1
-								wrapMode: Text.WordWrap
-								color: DefaultStyle.main2_500main
-								Layout.fillWidth: true
-							}
-						}
-						Item {
-							Layout.fillWidth: true
-						}
-						Button {
-							background: Item{}
-							Layout.alignment: Qt.AlignRight
-							Layout.rightMargin: 5 * DefaultStyle.dp
 							Layout.preferredWidth: 24 * DefaultStyle.dp
 							Layout.preferredHeight: 24 * DefaultStyle.dp
-							contentItem: RowLayout {
+							fillMode: Image.PreserveAspectFit
-								Layout.alignment: Qt.AlignRight
+							colorizationColor: DefaultStyle.danger_500main
+						}
+					}
+					onClicked: {
+						var mainWin = UtilsCpp.getMainWindow()
+						mainWin.showConfirmationLambdaPopup("",
+							qsTr("Supprimer ") + (model.core.displayName.length > 0 ? model.core.displayName : qsTr("le compte")) + " ?",
+							qsTr("Vous pouvez vous reconnecter à tout moment en cliquant sur \"Ajouter un compte\".\nCependant toutes les informations stockées sur ce périphérique seront supprimées."),
+							function (confirmed) {
+								if (confirmed) {
+									account.core.removeAccount()
+								}
+							}
+						)
+					}
+				}
+			}
+		}
+	}
+
+
+	// Account devices
+	//////////////////////////
+
+	Component {
+		id: accountDevicesComponent
+		RoundedPane {
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+			// Layout.minimumHeight: account.core.devices.length * 133 * DefaultStyle.dp + (account.core.devices.length - 1) * 15 * DefaultStyle.dp +  2 * 21 * DefaultStyle.dp
+			Layout.rightMargin: 30 * DefaultStyle.dp
+			Layout.topMargin: 20 * DefaultStyle.dp
+			Layout.bottomMargin: 4 * DefaultStyle.dp
+			Layout.leftMargin: 44 * DefaultStyle.dp
+			topPadding: 21 * DefaultStyle.dp
+			bottomPadding: 21 * DefaultStyle.dp
+			leftPadding: 17 * DefaultStyle.dp
+			rightPadding: 17 * DefaultStyle.dp
+			background: Rectangle {
+				anchors.fill: parent
+				color: DefaultStyle.grey_100
+				radius: 15 * DefaultStyle.dp
+			}
+			contentItem: ColumnLayout {
+				spacing: 15 * DefaultStyle.dp
+				Repeater {
+					id: devices
+					model: AccountDeviceProxy {
+						id: accountDeviceProxy
+						account: model
+					}
+					Control.Control{
+						Layout.fillWidth: true
+						height: 133 * DefaultStyle.dp
+						topPadding: 26 * DefaultStyle.dp
+						bottomPadding: 26 * DefaultStyle.dp
+						rightPadding: 36 * DefaultStyle.dp
+						leftPadding: 33 * DefaultStyle.dp
+						background: Rectangle {
+							anchors.fill: parent
+							color: DefaultStyle.grey_0
+							radius: 10 * DefaultStyle.dp
+						}
+						contentItem: ColumnLayout {
+							width: parent.width
+							spacing: 20 * DefaultStyle.dp
+							RowLayout {
+								spacing: 5 * DefaultStyle.dp
 								EffectImage {
-									imageSource: AppIcons.trashCan
-									width: 24 * DefaultStyle.dp
-									height: 24 * DefaultStyle.dp
 									Layout.preferredWidth: 24 * DefaultStyle.dp
 									Layout.preferredHeight: 24 * DefaultStyle.dp
 									fillMode: Image.PreserveAspectFit
-									colorizationColor: DefaultStyle.danger_500main
+									colorizationColor: DefaultStyle.main2_600
+									imageSource: modelData.core.userAgent.toLowerCase().includes('ios') | modelData.core.userAgent.toLowerCase().includes('android') ? AppIcons.mobile : AppIcons.desktop
 								}
-							}
+								Text {
-							onClicked: {
+									text: modelData.core.deviceName
-								var mainWin = UtilsCpp.getMainWindow()
+									color: DefaultStyle.main2_600
-								mainWin.showConfirmationLambdaPopup("",
+									font: Typography.p2
-									qsTr("Supprimer ") + (model.core.displayName.length > 0 ? model.core.displayName : qsTr("le compte")) + " ?",
-									qsTr("Vous pouvez vous reconnecter à tout moment en cliquant sur \"Ajouter un compte\".\nCependant toutes les informations stockées sur ce périphérique seront supprimées."),
-									function (confirmed) {
-										if (confirmed) {
-											account.core.removeAccount()
-										}
-									}
-								)
-							}
-						}
-					}
-				}
-			}
-			Rectangle {
-				Layout.fillWidth: true
-				Layout.topMargin: 16 * DefaultStyle.dp
-				height: 1 * DefaultStyle.dp
-				color: DefaultStyle.main2_500main
-			}
-			RowLayout {
-				Layout.fillWidth: true
-				Layout.topMargin: 16 * DefaultStyle.dp
-				spacing: 5 * DefaultStyle.dp
-				ColumnLayout {
-					Layout.fillWidth: true
-					spacing: 5 * DefaultStyle.dp
-					ColumnLayout {
-						Layout.preferredWidth: 341 * DefaultStyle.dp
-						Layout.maximumWidth: 341 * DefaultStyle.dp
-						Layout.minimumWidth: 341 * DefaultStyle.dp
-						spacing: 5 * DefaultStyle.dp
-						Text {
-							Layout.fillWidth: true
-							text: qsTr("Vos appareils")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-						Text {
-							text: qsTr("La liste des appareils connectés à votre compte. Vous pouvez retirer les appareils que vous n’utilisez plus.")
-							font: Typography.p1s
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-							Layout.fillWidth: true
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-				RoundedPane {
-					Layout.fillWidth: true
-					Layout.fillHeight: true
-					// Layout.minimumHeight: account.core.devices.length * 133 * DefaultStyle.dp + (account.core.devices.length - 1) * 15 * DefaultStyle.dp +  2 * 21 * DefaultStyle.dp
-					Layout.rightMargin: 30 * DefaultStyle.dp
-					Layout.topMargin: 20 * DefaultStyle.dp
-					Layout.bottomMargin: 4 * DefaultStyle.dp
-					Layout.leftMargin: 44 * DefaultStyle.dp
-					topPadding: 21 * DefaultStyle.dp
-					bottomPadding: 21 * DefaultStyle.dp
-					leftPadding: 17 * DefaultStyle.dp
-					rightPadding: 17 * DefaultStyle.dp
-					background: Rectangle {
-						anchors.fill: parent
-						color: DefaultStyle.grey_100
-						radius: 15 * DefaultStyle.dp
-					}
-					contentItem: ColumnLayout {
-						spacing: 15 * DefaultStyle.dp
-						Repeater {
-							id: devices
-							model: AccountDeviceProxy {
-								id: accountDeviceProxy
-								account: model
-							}
-							Control.Control{
-								Layout.fillWidth: true
-								height: 133 * DefaultStyle.dp
-								topPadding: 26 * DefaultStyle.dp
-								bottomPadding: 26 * DefaultStyle.dp
-								rightPadding: 36 * DefaultStyle.dp
-								leftPadding: 33 * DefaultStyle.dp
-								
-								background: Rectangle {
-									anchors.fill: parent
-									color: DefaultStyle.grey_0
-									radius: 10 * DefaultStyle.dp
 								}
-								contentItem: ColumnLayout {
+								Item {
-									width: parent.width
+									Layout.fillWidth: true
-									spacing: 20 * DefaultStyle.dp
+								}
-									RowLayout {
+								MediumButton {
-										spacing: 5 * DefaultStyle.dp
+									Layout.alignment: Qt.AlignRight
-										EffectImage {
+									text: qsTr("Supprimer")
-											Layout.preferredWidth: 24 * DefaultStyle.dp
+									icon.source: AppIcons.trashCan
-											Layout.preferredHeight: 24 * DefaultStyle.dp
+									icon.width: 16 * DefaultStyle.dp
-											fillMode: Image.PreserveAspectFit
+									icon.height: 16 * DefaultStyle.dp
-											colorizationColor: DefaultStyle.main2_600
+									contentImageColor: DefaultStyle.main1_500_main
-											imageSource: modelData.core.userAgent.toLowerCase().includes('ios') | modelData.core.userAgent.toLowerCase().includes('android') ? AppIcons.mobile : AppIcons.desktop
+									onClicked: {
-										}
+										var mainWin = UtilsCpp.getMainWindow()
-										Text {
+										mainWin.showConfirmationLambdaPopup("",
-											text: modelData.core.deviceName
+											qsTr("Supprimer ") + modelData.core.deviceName + " ?", "",
-											color: DefaultStyle.main2_600
+											function (confirmed) {
-											font: Typography.p2
+												if (confirmed) {
-										}
+													accountDeviceProxy.deleteDevice(modelData)
-										Item {
+												}
-											Layout.fillWidth: true
-										}
-										MediumButton {
-											Layout.alignment: Qt.AlignRight
-											text: qsTr("Supprimer")
-											icon.source: AppIcons.trashCan
-											icon.width: 16 * DefaultStyle.dp
-											icon.height: 16 * DefaultStyle.dp
-											contentImageColor: DefaultStyle.main1_500_main
-											onClicked: {
-												var mainWin = UtilsCpp.getMainWindow()
-												mainWin.showConfirmationLambdaPopup("",
-													qsTr("Supprimer ") + modelData.core.deviceName + " ?", "",
-													function (confirmed) {
-														if (confirmed) {
-															accountDeviceProxy.deleteDevice(modelData)
-														}
-													}
-												)
 											}
-										}
+										)
-									}
-									RowLayout {
-										spacing: 5 * DefaultStyle.dp
-										Text {
-											text: qsTr("Dernière connexion:")
-											color: DefaultStyle.main2_600
-											font: Typography.p2
-										}
-										EffectImage {
-											Layout.preferredWidth: 20 * DefaultStyle.dp
-											Layout.preferredHeight: 20 * DefaultStyle.dp
-											imageSource: AppIcons.calendar
-											colorizationColor: DefaultStyle.main2_600
-											fillMode: Image.PreserveAspectFit
-										}
-										Text {
-											text: UtilsCpp.formatDate(modelData.core.lastUpdateTimestamp,false)
-											color: DefaultStyle.main2_600
-											font: Typography.p1
-										}
-										EffectImage {
-											Layout.preferredWidth: 20 * DefaultStyle.dp
-											Layout.preferredHeight: 20 * DefaultStyle.dp
-											imageSource: AppIcons.clock
-											colorizationColor: DefaultStyle.main2_600
-											fillMode: Image.PreserveAspectFit
-										}
-										Text {
-											text: UtilsCpp.formatTime(modelData.core.lastUpdateTimestamp)
-											color: DefaultStyle.main2_600
-											font: Typography.p1
-										}
 									}
 								}
 							}
+							RowLayout {
+								spacing: 5 * DefaultStyle.dp
+								Text {
+									text: qsTr("Dernière connexion:")
+									color: DefaultStyle.main2_600
+									font: Typography.p2
+								}
+								EffectImage {
+									Layout.preferredWidth: 20 * DefaultStyle.dp
+									Layout.preferredHeight: 20 * DefaultStyle.dp
+									imageSource: AppIcons.calendar
+									colorizationColor: DefaultStyle.main2_600
+									fillMode: Image.PreserveAspectFit
+								}
+								Text {
+									text: UtilsCpp.formatDate(modelData.core.lastUpdateTimestamp,false)
+									color: DefaultStyle.main2_600
+									font: Typography.p1
+								}
+								EffectImage {
+									Layout.preferredWidth: 20 * DefaultStyle.dp
+									Layout.preferredHeight: 20 * DefaultStyle.dp
+									imageSource: AppIcons.clock
+									colorizationColor: DefaultStyle.main2_600
+									fillMode: Image.PreserveAspectFit
+								}
+								Text {
+									text: UtilsCpp.formatTime(modelData.core.lastUpdateTimestamp)
+									color: DefaultStyle.main2_600
+									font: Typography.p1
+								}
+							}
 						}
 					}
 				}

Linphone/view/Page/Layout/Settings/AccountSettingsParametersLayout.qml

@@ -9,186 +9,137 @@ import UtilsCpp
 
 AbstractSettingsLayout {
 	id: mainItem
-	contentComponent: content
+	width: parent?.width
-	property alias account: mainItem.model
+	contentModel: [
+		{
+			title: qsTr("Paramètres"),
+			subTitle: "",
+			contentComponent: generalParametersComponent
+		},
+		{
+			title: qsTr("Paramètres avancés"),
+			subTitle: "",
+			contentComponent: advancedParametersComponent
+		}
+	]
+
+	// General parameters
+	/////////////////////
+
 	Component {
-		id: content
+		id: generalParametersComponent
 		ColumnLayout {
-			width: parent.width
+			id: column
-			spacing: 5 * DefaultStyle.dp
+			Layout.fillWidth: true
-			RowLayout {
+			spacing: 20 * DefaultStyle.dp
-				Layout.topMargin: 16 * DefaultStyle.dp
+			DecoratedTextField {
-				spacing: 5 * DefaultStyle.dp
+				propertyName: "mwiServerAddress"
-				ColumnLayout {
+				propertyOwner: account.core
-					Layout.fillWidth: true
+				title: qsTr("URI du serveur de messagerie vocale")
-					spacing: 5 * DefaultStyle.dp
+				isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
-					ColumnLayout {
+				toValidate: true
-						Layout.preferredWidth: 341 * DefaultStyle.dp
-						Layout.maximumWidth: 341 * DefaultStyle.dp
-						Layout.minimumWidth: 341 * DefaultStyle.dp
-						spacing: 5 * DefaultStyle.dp
-						Text {
-							Layout.fillWidth: true
-							text: qsTr("Paramètres")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-				ColumnLayout {
-					id: column
-					Layout.fillWidth: true
-					spacing: 20 * DefaultStyle.dp
-					Layout.rightMargin: 44 * DefaultStyle.dp
-					Layout.leftMargin: 64 * DefaultStyle.dp
-					Layout.topMargin: 20 * DefaultStyle.dp
-					DecoratedTextField {
-						propertyName: "mwiServerAddress"
-						propertyOwner: account.core
-						title: qsTr("URI du serveur de messagerie vocale")
-						isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
-						toValidate: true
-						Layout.fillWidth: true
-					}
-					DecoratedTextField {
-						propertyName: "voicemailAddress"
-						propertyOwner: account.core
-						title: qsTr("URI de messagerie vocale")
-						isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
-						toValidate: true
-						Layout.fillWidth: true
-					}
-					Item {
-						Layout.fillHeight: true
-						Layout.fillWidth: true
-					}
-				}
-			}
-			Rectangle {
 				Layout.fillWidth: true
-				Layout.topMargin: 16 * DefaultStyle.dp
-				height: 1 * DefaultStyle.dp
-				color: DefaultStyle.main2_500main
 			}
-			RowLayout {
+			DecoratedTextField {
-				Layout.topMargin: 16 * DefaultStyle.dp
+				propertyName: "voicemailAddress"
-				spacing: 5 * DefaultStyle.dp
+				propertyOwner: account.core
-				ColumnLayout {
+				title: qsTr("URI de messagerie vocale")
-					Layout.fillWidth: true
+				isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
-					spacing: 5 * DefaultStyle.dp
+				toValidate: true
-					ColumnLayout {
+				Layout.fillWidth: true
-						Layout.preferredWidth: 341 * DefaultStyle.dp
+			}
-						Layout.maximumWidth: 341 * DefaultStyle.dp
+		}
-						Layout.minimumWidth: 341 * DefaultStyle.dp
+	}
-						spacing: 5 * DefaultStyle.dp
+
-						Text {
+	// Advanced parameters
-							Layout.fillWidth: true
+	/////////////////////
-							text: qsTr("Paramètres avancés")
+
-							font: Typography.h4
+	Component {
-							wrapMode: Text.WordWrap
+		id: advancedParametersComponent
-							color: DefaultStyle.main2_600
+		ColumnLayout {
-						}
+			Layout.fillWidth: true
-					}
+			spacing: 20 * DefaultStyle.dp
-					Item {
+			Text {
-						Layout.fillHeight: true
+				text: qsTr("Transport")
-					}
+				color: DefaultStyle.main2_600
-				}
+				font: Typography.p2l
-				ColumnLayout {
+			}
-					Layout.fillWidth: true
+			ComboSetting {
-					spacing: 20 * DefaultStyle.dp
+				Layout.fillWidth: true
-					Layout.rightMargin: 44 * DefaultStyle.dp
+				Layout.topMargin: -15 * DefaultStyle.dp
-					Layout.topMargin: 20 * DefaultStyle.dp
+				entries: account.core.transports
-					Layout.leftMargin: 64 * DefaultStyle.dp
+				propertyName: "transport"
-					Text {
+				propertyOwner: account.core
-						text: qsTr("Transport")
+			}
-						color: DefaultStyle.main2_600
+			DecoratedTextField {
-						font: Typography.p2l
+				Layout.fillWidth: true
-					}
+				title: qsTr("URL du serveur mandataire")
-					ComboSetting {
+				propertyName: "serverAddress"
-						Layout.fillWidth: true
+				propertyOwner: account.core
-						Layout.topMargin: -15 * DefaultStyle.dp
+				isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
-						entries: account.core.transports
+				toValidate: true
-						propertyName: "transport"
+			}
-						propertyOwner: account.core
+			SwitchSetting {
-					}
+				titleText: qsTr("Serveur mandataire sortant")
-					DecoratedTextField {
+				propertyName: "outboundProxyEnabled"
-						Layout.fillWidth: true
+				propertyOwner: account.core
-						title: qsTr("URL du serveur mandataire")
+			}
-						propertyName: "serverAddress"
+			DecoratedTextField {
-						propertyOwner: account.core
+				Layout.fillWidth: true
-						isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
+				propertyName: "stunServer"
-						toValidate: true
+				propertyOwner: account.core
-					}
+				title: qsTr("Adresse du serveur STUN")
-					SwitchSetting {
+				isValid: function(text) { return UtilsCpp.isValidIPAddress(text) || UtilsCpp.isValidHostname(text); }
-						titleText: qsTr("Serveur mandataire sortant")
+				toValidate: true
-						propertyName: "outboundProxyEnabled"
+			}
-						propertyOwner: account.core
+			SwitchSetting {
-					}
+				titleText: qsTr("Activer ICE")
-					DecoratedTextField {
+				propertyName: "iceEnabled"
-						Layout.fillWidth: true
+				propertyOwner: account.core
-						propertyName: "stunServer"
+			}
-						propertyOwner: account.core
+			SwitchSetting {
-						title: qsTr("Adresse du serveur STUN")
+				titleText: qsTr("AVPF")
-						isValid: function(text) { return UtilsCpp.isValidIPAddress(text) || UtilsCpp.isValidHostname(text); }
+				propertyName: "avpfEnabled"
-						toValidate: true
+				propertyOwner: account.core
-					}
+			}
-					SwitchSetting {
+			SwitchSetting {
-						titleText: qsTr("Activer ICE")
+				titleText: qsTr("Mode bundle")
-						propertyName: "iceEnabled"
+				propertyName: "bundleModeEnabled"
-						propertyOwner: account.core
+				propertyOwner: account.core
-					}
+			}
-					SwitchSetting {
+			DecoratedTextField {
-						titleText: qsTr("AVPF")
+				Layout.fillWidth: true
-						propertyName: "avpfEnabled"
+				propertyName: "expire"
-						propertyOwner: account.core
+				propertyOwner: account.core
-					}
+				title: qsTr("Expiration (en seconde)")
-					SwitchSetting {
+				canBeEmpty: false
-						titleText: qsTr("Mode bundle")
+				isValid: function(text) { return !isNaN(Number(text)); }
-						propertyName: "bundleModeEnabled"
+				toValidate: true
-						propertyOwner: account.core
+			}
-					}
+			DecoratedTextField {
-					DecoratedTextField {
+				Layout.fillWidth: true
-						Layout.fillWidth: true
+				title: qsTr("URI de l’usine à conversations")
-						propertyName: "expire"
+				propertyName: "conferenceFactoryAddress"
-						propertyOwner: account.core
+				propertyOwner: account.core
-						title: qsTr("Expiration (en seconde)")
+				isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
-						canBeEmpty: false
+				toValidate: true
-						isValid: function(text) { return !isNaN(Number(text)); }
+			}
-						toValidate: true
+			DecoratedTextField {
-					}
+				Layout.fillWidth: true
-					DecoratedTextField {
+				title: qsTr("URI de l’usine à réunions")
-						Layout.fillWidth: true
+				propertyName: "audioVideoConferenceFactoryAddress"
-						title: qsTr("URI de l’usine à conversations")
+				propertyOwner: account.core
-						propertyName: "conferenceFactoryAddress"
+				isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
-						propertyOwner: account.core
+				visible: !SettingsCpp.disableMeetingsFeature
-						isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
+				toValidate: true
-						toValidate: true
+			}
-					}
+			DecoratedTextField {
-					DecoratedTextField {
+				Layout.fillWidth: true
-						Layout.fillWidth: true
+				title: qsTr("URL du serveur d’échange de clés de chiffrement")
-						title: qsTr("URI de l’usine à réunions")
+				propertyName: "limeServerUrl"
-						propertyName: "audioVideoConferenceFactoryAddress"
+				propertyOwner: account.core
-						propertyOwner: account.core
+				isValid: function(text) { return UtilsCpp.isValidURL(text); }
-						isValid: function(text) { return UtilsCpp.isValidSIPAddress(text); }
+				toValidate: true
-						visible: !SettingsCpp.disableMeetingsFeature
-						toValidate: true
-					}
-					DecoratedTextField {
-						Layout.fillWidth: true
-						title: qsTr("URL du serveur d’échange de clés de chiffrement")
-						propertyName: "limeServerUrl"
-						propertyOwner: account.core
-						isValid: function(text) { return UtilsCpp.isValidURL(text); }
-						toValidate: true
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
 			}
 		}
 	}

Linphone/view/Page/Layout/Settings/AdvancedSettingsLayout.qml

@@ -8,196 +8,134 @@ import Linphone
 import 'qrc:/qt/qml/Linphone/view/Control/Tool/Helper/utils.js' as Utils
 
 AbstractSettingsLayout {
-	contentComponent: content
+	width: parent?.width
+	contentModel: [
+		{
+			title: qsTr("Configuration distante"),
+			subTitle: "",
+			contentComponent: remoteProvisioningComponent
+		},
+		{
+			title: qsTr("Codecs Audio"),
+			subTitle: "",
+			contentComponent: audioCodecsComponent,
+		},
+		{
+			title: qsTr("Codecs Vidéo"),
+			subTitle: "",
+			contentComponent: videoCodecsComponent
+		},
+		{
+			title: "",
+			subTitle: "",
+			contentComponent: hideFpsComponent
+		}
+	]
+
+	// Remote Provisioning
+	//////////////////////
+
 	Component {
-		id: content
+		id: remoteProvisioningComponent
 		ColumnLayout {
-			width: parent.width
+			spacing: 20 * DefaultStyle.dp
-			spacing: 5 * DefaultStyle.dp
+			DecoratedTextField {
-			RowLayout {
-				Layout.topMargin: 16 * DefaultStyle.dp
-				spacing: 5 * DefaultStyle.dp
-				ColumnLayout {
-					Layout.fillWidth: true
-					spacing: 5 * DefaultStyle.dp
-					ColumnLayout {
-						Layout.preferredWidth: 341 * DefaultStyle.dp
-						Layout.maximumWidth: 341 * DefaultStyle.dp
-						Layout.minimumWidth: 341 * DefaultStyle.dp
-						spacing: 5 * DefaultStyle.dp
-						Text {
-							Layout.fillWidth: true
-							text: qsTr("Configuration distante")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-				ColumnLayout {
-					Layout.fillWidth: true
-					spacing: 20 * DefaultStyle.dp
-					Layout.rightMargin: 44 * DefaultStyle.dp
-					Layout.topMargin: 20 * DefaultStyle.dp
-					Layout.leftMargin: 64 * DefaultStyle.dp
-					DecoratedTextField {
-						Layout.fillWidth: true
-						id: configUri
-						title: qsTr("URL de configuration distante")
-						toValidate: true
-					}
-					SmallButton {
-						Layout.alignment: Qt.AlignRight
-						text: qsTr("Télécharger et appliquer")
-						onClicked: {
-							var url = configUri.value()
-							if (UtilsCpp.isValidURL(url))
-								UtilsCpp.useFetchConfig(configUri.value())
-							else
-								UtilsCpp.showInformationPopup(qsTr("Erreur"), qsTr("Format d'url invalide"), false, UtilsCpp.getMainWindow())
-						}
-					}
-				}
-			}
-			Rectangle {
 				Layout.fillWidth: true
-				Layout.topMargin: 35 * DefaultStyle.dp
+				id: configUri
-				Layout.bottomMargin: 9 * DefaultStyle.dp
+				title: qsTr("URL de configuration distante")
-				height: 1 * DefaultStyle.dp
+				toValidate: true
-				color: DefaultStyle.main2_500main
 			}
-			RowLayout {
+			SmallButton {
-				Layout.topMargin: 16 * DefaultStyle.dp
+				Layout.alignment: Qt.AlignRight
-				spacing: 5 * DefaultStyle.dp
+				text: qsTr("Télécharger et appliquer")
-				ColumnLayout {
+				onClicked: {
-					Layout.fillWidth: true
+					var url = configUri.value()
-					spacing: 5 * DefaultStyle.dp
+					if (UtilsCpp.isValidURL(url))
-					ColumnLayout {
+						UtilsCpp.useFetchConfig(configUri.value())
-						Layout.preferredWidth: 341 * DefaultStyle.dp
+					else
-						Layout.maximumWidth: 341 * DefaultStyle.dp
+						UtilsCpp.showInformationPopup(qsTr("Erreur"), qsTr("Format d'url invalide"), false, UtilsCpp.getMainWindow())
-						Layout.minimumWidth: 341 * DefaultStyle.dp
-						spacing: 5 * DefaultStyle.dp
-						Text {
-							Layout.fillWidth: true
-							text: qsTr("Codecs Audio")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-				ColumnLayout {
-					Layout.fillWidth: true
-					spacing: 20 * DefaultStyle.dp
-					Layout.rightMargin: 44 * DefaultStyle.dp
-					Layout.topMargin: 20 * DefaultStyle.dp
-					Layout.leftMargin: 64 * DefaultStyle.dp
-					Repeater {
-						model: PayloadTypeProxy {
-							filterType: PayloadTypeProxy.Audio | PayloadTypeProxy.NotDownloadable
-						}
-						SwitchSetting {
-							Layout.fillWidth: true
-							titleText: Utils.capitalizeFirstLetter(modelData.core.mimeType)
-							subTitleText: modelData.core.clockRate + " Hz"
-							propertyName: "enabled"
-							propertyOwner: modelData.core
-						}
-					}
-				}
-			}
-			Rectangle {
-				Layout.fillWidth: true
-				Layout.topMargin: 35 * DefaultStyle.dp
-				Layout.bottomMargin: 9 * DefaultStyle.dp
-				height: 1 * DefaultStyle.dp
-				color: DefaultStyle.main2_500main
-			}
-			RowLayout {
-				Layout.topMargin: 16 * DefaultStyle.dp
-				spacing: 5 * DefaultStyle.dp
-				ColumnLayout {
-					Layout.fillWidth: true
-					spacing: 5 * DefaultStyle.dp
-					ColumnLayout {
-						Layout.preferredWidth: 341 * DefaultStyle.dp
-						Layout.maximumWidth: 341 * DefaultStyle.dp
-						Layout.minimumWidth: 341 * DefaultStyle.dp
-						spacing: 5 * DefaultStyle.dp
-						Text {
-							Layout.fillWidth: true
-							text: qsTr("Codecs Vidéo")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-				ColumnLayout {
-					Layout.fillWidth: true
-					spacing: 20 * DefaultStyle.dp
-					Layout.rightMargin: 44 * DefaultStyle.dp
-					Layout.topMargin: 20 * DefaultStyle.dp
-					Layout.leftMargin: 64 * DefaultStyle.dp
-					Repeater {
-						model: PayloadTypeProxy {
-							id: videoPayloadTypeProxy
-							filterType: PayloadTypeProxy.Video | PayloadTypeProxy.NotDownloadable
-						}
-						SwitchSetting {
-							Layout.fillWidth: true
-							titleText: Utils.capitalizeFirstLetter(modelData.core.mimeType)
-							subTitleText: modelData.core.encoderDescription
-							propertyName: "enabled"
-							propertyOwner: modelData.core
-						}
-					}
-					Repeater {
-						model: PayloadTypeProxy {
-							id: downloadableVideoPayloadTypeProxy
-							filterType: PayloadTypeProxy.Video | PayloadTypeProxy.Downloadable
-						}
-						SwitchSetting {
-							Layout.fillWidth: true
-							titleText: Utils.capitalizeFirstLetter(modelData.core.mimeType)
-							subTitleText: modelData.core.encoderDescription
-							onCheckedChanged: function(checked) {
-								if (checked)
-									Utils.openCodecOnlineInstallerDialog(mainWindow, modelData.core)
-							}
-						}
-					}
-				}
-			}
-			Rectangle {
-				Layout.fillWidth: true
-				Layout.topMargin: 35 * DefaultStyle.dp
-				Layout.bottomMargin: 9 * DefaultStyle.dp
-				height: 1 * DefaultStyle.dp
-				color: DefaultStyle.main2_500main
-			}
-			RowLayout {
-				Layout.topMargin: 16 * DefaultStyle.dp
-				spacing: 5 * DefaultStyle.dp
-				Item {
-					Layout.preferredWidth: 341 * DefaultStyle.dp
-				}
-				SwitchSetting {
-					Layout.rightMargin: 44 * DefaultStyle.dp
-					titleText:qsTr("Cacher les FPS")
-					propertyName: "hideFps"
-					propertyOwner: SettingsCpp
 				}
 			}
 		}
 	}
+
+	//Audio codecs
+	//////////////
+
+	Component {
+		id: audioCodecsComponent
+		ColumnLayout {
+			spacing: 20 * DefaultStyle.dp
+			Repeater {
+				model: PayloadTypeProxy {
+					filterType: PayloadTypeProxy.Audio | PayloadTypeProxy.NotDownloadable
+				}
+				SwitchSetting {
+					Layout.fillWidth: true
+					titleText: Utils.capitalizeFirstLetter(modelData.core.mimeType)
+					subTitleText: modelData.core.clockRate + " Hz"
+					propertyName: "enabled"
+					propertyOwner: modelData.core
+				}
+			}
+		}
+	}
+
+	//Video codecs
+	//////////////
+
+	Component {
+		id: videoCodecsComponent
+		ColumnLayout {
+			spacing: 20 * DefaultStyle.dp
+			Repeater {
+				model: PayloadTypeProxy {
+					filterType: PayloadTypeProxy.Video | PayloadTypeProxy.NotDownloadable
+				}
+				SwitchSetting {
+					Layout.fillWidth: true
+					titleText: Utils.capitalizeFirstLetter(modelData.core.mimeType)
+					subTitleText: modelData.core.encoderDescription
+					propertyName: "enabled"
+					propertyOwner: modelData.core
+				}
+			}
+			Repeater {
+				model: PayloadTypeProxy {
+					id: downloadableVideoPayloadTypeProxy
+					filterType: PayloadTypeProxy.Video | PayloadTypeProxy.Downloadable
+				}
+				SwitchSetting {
+					Layout.fillWidth: true
+					titleText: Utils.capitalizeFirstLetter(modelData.core.mimeType)
+					subTitleText: modelData.core.encoderDescription
+					onCheckedChanged: Utils.openCodecOnlineInstallerDialog(
+						UtilsCpp.getMainWindow(),
+						modelData.core,
+						function cancelCallBack() {
+							setChecked(false)
+						},
+						function successCallBack() {
+							videoPayloadTypeProxy.reload()
+							downloadableVideoPayloadTypeProxy.reload()
+						})
+				}
+			}
+		}
+	}
+
+	//Hide fps
+	//////////
+
+	Component {
+		id: hideFpsComponent
+		ColumnLayout {
+			spacing: 40 * DefaultStyle.dp
+			SwitchSetting {
+				titleText:qsTr("Cacher les FPS")
+				propertyName: "hideFps"
+				propertyOwner: SettingsCpp
+			}
+		}
+	}
 }

Linphone/view/Page/Layout/Settings/CallSettingsLayout.qml

@@ -6,79 +6,56 @@ import Linphone
 import SettingsCpp 1.0
 
 AbstractSettingsLayout {
-	contentComponent: content
+	id: mainItem
 	width: parent?.width
+	contentModel: [
+		{
+			title: "",
+			subTitle: "",
+			contentComponent: genericParametersComponent
+		},
+		{
+			title: qsTr("Périphériques"),
+			subTitle: qsTr("Vous pouvez modifier les périphériques de sortie audio, le microphone et la caméra de capture."),
+			contentComponent: multiMediaParametersComponent,
+			customWidth: 540,
+			customRightMargin: 36
+		}
+	]
+
+	// Generic call parameters
+	//////////////////////////
+
 	Component {
-		id: content
+		id: genericParametersComponent
 		ColumnLayout {
-			RowLayout {
+			spacing: 20 * DefaultStyle.dp
-				spacing: 47 * DefaultStyle.dp
+			SwitchSetting {
-				ColumnLayout {
+				titleText: qsTr("Annulateur d'écho")
-					Item {
+				subTitleText: qsTr("Évite que de l'écho soit entendu par votre correspondant")
-						Layout.preferredWidth: 341 * DefaultStyle.dp
+				propertyName: "echoCancellationEnabled"
-					}
+				propertyOwner: SettingsCpp
-				}
-				ColumnLayout {
-					Layout.rightMargin: 25 * DefaultStyle.dp
-					Layout.topMargin: 36 * DefaultStyle.dp
-					spacing: 20 * DefaultStyle.dp
-					SwitchSetting {
-						titleText: qsTr("Annulateur d'écho")
-						subTitleText: qsTr("Évite que de l'écho soit entendu par votre correspondant")
-						propertyName: "echoCancellationEnabled"
-						propertyOwner: SettingsCpp
-					}
-					SwitchSetting {
-						Layout.fillWidth: true
-						titleText: qsTr("Activer l’enregistrement automatique des appels")
-						subTitleText: qsTr("Enregistrer tous les appels par défaut")
-						propertyName: "automaticallyRecordCallsEnabled"
-						propertyOwner: SettingsCpp
-						visible: !SettingsCpp.disableCallRecordings
-					}
-				}
 			}
-			Rectangle {
+			SwitchSetting {
 				Layout.fillWidth: true
-				Layout.preferredHeight: 1 * DefaultStyle.dp
+				titleText: qsTr("Activer l’enregistrement automatique des appels")
-				color: DefaultStyle.main2_500main
+				subTitleText: qsTr("Enregistrer tous les appels par défaut")
-				Layout.topMargin: 38 * DefaultStyle.dp
+				propertyName: "automaticallyRecordCallsEnabled"
-				Layout.bottomMargin: 16 * DefaultStyle.dp
+				propertyOwner: SettingsCpp
-			}
+				visible: !SettingsCpp.disableCallRecordings
-			RowLayout {
-				spacing: 47 * DefaultStyle.dp
-				ColumnLayout {
-					Item {
-						Layout.preferredWidth: 341 * DefaultStyle.dp
-						Text {
-							id: periphTitle
-							text: qsTr("Périphériques")
-							font: Typography.p2
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-						Text {
-							anchors.top: periphTitle.bottom
-							anchors.topMargin: 3 * DefaultStyle.dp
-							anchors.left: parent.left
-							anchors.right: parent.right
-							text: qsTr("Vous pouvez modifier les périphériques de sortie audio, le microphone et la caméra de capture.")
-							font: Typography.p1
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-				MultimediaSettings {
-					ringerDevicesVisible: true
-					backgroundVisible: false
-					spacing: 20 * DefaultStyle.dp
-					Layout.rightMargin: 44 * DefaultStyle.dp
-				}
 			}
 		}
 	}
+
+	// Multimedia parameters
+	////////////////////////
+
+	Component {
+		id: multiMediaParametersComponent
+		MultimediaSettings {
+			ringerDevicesVisible: true
+			backgroundVisible: false
+			spacing: 20 * DefaultStyle.dp
+		}
+	}
 }

Linphone/view/Page/Layout/Settings/CarddavSettingsLayout.qml

@@ -9,7 +9,14 @@ import UtilsCpp
 
 AbstractSettingsLayout {
 	id: mainItem
-	contentComponent: content
+	width: parent?.width
+	contentModel: [
+		{
+			title: qsTr("Carnet  d'adresse CardDAV"),
+			subTitle: qsTr("Ajouter un carnet d’adresse CardDAV pour synchroniser vos contacts Linphone avec un carnet d’adresse tiers."),
+			contentComponent: cardDavParametersComponent
+		}
+	]
 	topbarOptionalComponent: topBar
 	property alias carddavGui: mainItem.model
 	property bool isNew: false
@@ -61,85 +68,50 @@ AbstractSettingsLayout {
 	}
 	
 	Component {
-		id: content
+		id: cardDavParametersComponent
 		ColumnLayout {
-			width: parent.width
+			Layout.fillWidth: true
-			spacing: 5 * DefaultStyle.dp
+			spacing: 20 * DefaultStyle.dp
-			RowLayout {
+			Layout.rightMargin: 44 * DefaultStyle.dp
-				Layout.topMargin: 16 * DefaultStyle.dp
+			Layout.topMargin: 20 * DefaultStyle.dp
-				spacing: 5 * DefaultStyle.dp
+			Layout.leftMargin: 64 * DefaultStyle.dp
-				ColumnLayout {
+			DecoratedTextField {
-					Layout.fillWidth: true
+				propertyName: "displayName"
-					spacing: 5 * DefaultStyle.dp
+				propertyOwner: carddavGui.core
-					ColumnLayout {
+				title: qsTr("Nom d’affichage")
-						Layout.preferredWidth: 341 * DefaultStyle.dp
+				canBeEmpty: false
-						Layout.maximumWidth: 341 * DefaultStyle.dp
+				toValidate: true
-						Layout.minimumWidth: 341 * DefaultStyle.dp
+			}
-						spacing: 5 * DefaultStyle.dp
+			DecoratedTextField {
-						Text {
+				propertyName: "uri"
-							Layout.fillWidth: true
+				propertyOwner: carddavGui.core
-							text: qsTr("Carnet  d'adresse CardDAV")
+				title: qsTr("URL du serveur")
-							font: Typography.h4
+				canBeEmpty: false
-							wrapMode: Text.WordWrap
+				toValidate: true
-							color: DefaultStyle.main2_600
+			}
-						}
+			DecoratedTextField {
-						Text {
+				propertyName: "username"
-							text: qsTr("Ajouter un carnet d’adresse CardDAV pour synchroniser vos contacts Linphone avec un carnet d’adresse tiers.")
+				propertyOwner: carddavGui.core
-							font: Typography.p1s
+				title: qsTr("Nom d’utilisateur")
-							wrapMode: Text.WordWrap
+				toValidate: true
-							color: DefaultStyle.main2_600
+			}
-							Layout.fillWidth: true
+			DecoratedTextField {
-						}
+				propertyName: "password"
-					}
+				hidden: true
-					Item {
+				propertyOwner: carddavGui.core
-						Layout.fillHeight: true
+				title: qsTr("Mot de passe")
-					}
+				toValidate: true
-				}
+			}
-				ColumnLayout {
+			DecoratedTextField {
-					Layout.fillWidth: true
+				propertyName: "realm"
-					spacing: 20 * DefaultStyle.dp
+				propertyOwner: carddavGui.core
-					Layout.rightMargin: 44 * DefaultStyle.dp
+				title: qsTr("Domaine d’authentification")
-					Layout.topMargin: 20 * DefaultStyle.dp
+				toValidate: true
-					Layout.leftMargin: 64 * DefaultStyle.dp
+			}
-					DecoratedTextField {
+			SwitchSetting {
-						propertyName: "displayName"
+				titleText: qsTr("Stocker ici les contacts nouvellement crées")
-						propertyOwner: carddavGui.core
+				propertyName: "storeNewFriendsInIt"
-						title: qsTr("Nom d’affichage")
+				propertyOwner: carddavGui.core
-						canBeEmpty: false
-						toValidate: true
-					}
-					DecoratedTextField {
-						propertyName: "uri"
-						propertyOwner: carddavGui.core
-						title: qsTr("URL du serveur")
-						canBeEmpty: false
-						toValidate: true
-					}
-					DecoratedTextField {
-						propertyName: "username"
-						propertyOwner: carddavGui.core
-						title: qsTr("Nom d’utilisateur")
-						toValidate: true
-					}
-					DecoratedTextField {
-						propertyName: "password"
-						hidden: true
-						propertyOwner: carddavGui.core
-						title: qsTr("Mot de passe")
-						toValidate: true
-					}
-					DecoratedTextField {
-						propertyName: "realm"
-						propertyOwner: carddavGui.core
-						title: qsTr("Domaine d’authentification")
-						toValidate: true
-					}
-					SwitchSetting {
-						titleText: qsTr("Stocker ici les contacts nouvellement crées")
-						propertyName: "storeNewFriendsInIt"
-						propertyOwner: carddavGui.core
-					}
-				}
 			}
 		}
 	}

Linphone/view/Page/Layout/Settings/ContactsSettingsLayout.qml

@@ -7,55 +7,65 @@ import Linphone
 
 AbstractSettingsLayout {
 	id: mainItem
-	contentComponent: content
+	width: parent?.width
+	contentModel: [
+		{
+			title: qsTr("Annuaires LDAP"),
+			subTitle: qsTr("Ajouter vos annuaires LDAP pour pouvoir effectuer des recherches dans la magic search bar."),
+			contentComponent: ldapParametersComponent
+		},
+		{
+			title: qsTr("Carnet d'adresse CardDAV"),
+			subTitle: qsTr("Ajouter un carnet d’adresse CardDAV pour synchroniser vos contacts Linphone avec un carnet d’adresse tiers."),
+			contentComponent: cardDavParametersComponent
+		}
+	]
+
 	function layoutUrl(name) {
 		return layoutsPath+"/"+name+".qml"
 	}
 	function createGuiObject(name) {
 		return Qt.createQmlObject('import Linphone; '+name+'Gui{}', mainItem)
 	}
+
+	// Ldap parameters
+	//////////////////
+
 	Component {
-		id: content
+		id: ldapParametersComponent
-		ColumnLayout {
+		ContactsSettingsProviderLayout {
-			spacing: 5 * DefaultStyle.dp
+			addText: qsTr("Ajouter un annuaire LDAP")
-			ContactsSettingsProviderLayout {
+			editText: qsTr("Modifier un annuaire LDAP")
-				title: qsTr("Annuaires LDAP")
+			proxyModel: LdapProxy {}
-				addText: qsTr("Ajouter un annuaire LDAP")
+			newItemGui: createGuiObject('Ldap')
-				addTextDescription: qsTr("Ajouter vos annuaires LDAP pour pouvoir effectuer des recherches dans la magic search bar.")
+			settingsLayout: layoutUrl("LdapSettingsLayout")
-				editText: qsTr("Modifier un annuaire LDAP")
+			owner: mainItem
-				proxyModel: LdapProxy {}
+			titleProperty: "server"
-				newItemGui: createGuiObject('Ldap')
+			supportsEnableDisable: true
-				settingsLayout: layoutUrl("LdapSettingsLayout")
+			showAddButton: true
-				owner: mainItem
+		}
-				titleProperty: "server"
+	}
-				supportsEnableDisable: true
+
-				showAddButton: true
+	// CardDAV parameters
-			}
+	/////////////////////
-			Rectangle {
+
-				Layout.fillWidth: true
+	Component {
-				Layout.topMargin: 35 * DefaultStyle.dp
+		id: cardDavParametersComponent
-				Layout.bottomMargin: 9 * DefaultStyle.dp
+		ContactsSettingsProviderLayout {
-				height: 1 * DefaultStyle.dp
+			id: carddavProvider
-				color: DefaultStyle.main2_500main
+			addText: qsTr("Ajouter un carnet d'adresse CardDAV")
-			}
+			editText: qsTr("Modifier un carnet d'adresse CardDAV")
-			ContactsSettingsProviderLayout {
+			proxyModel: CarddavProxy {
-				id: carddavProvider
+				onModelReset:  {
-				title: qsTr("Carnet d'adresse CardDAV")
+					carddavProvider.showAddButton = carddavProvider.proxyModel.count == 0
-				addText: qsTr("Ajouter un carnet d'adresse CardDAV")
+					carddavProvider.newItemGui = createGuiObject('Carddav')
-				addTextDescription: qsTr("Ajouter un carnet d’adresse CardDAV pour synchroniser vos contacts Linphone avec un carnet d’adresse tiers.")
-				editText: qsTr("Modifier un carnet d'adresse CardDAV")
-				proxyModel: CarddavProxy {
-					onModelReset:  {
-						carddavProvider.showAddButton = carddavProvider.proxyModel.count == 0
-						carddavProvider.newItemGui = createGuiObject('Carddav')
-					}
 				}
-				newItemGui: createGuiObject('Carddav')
-				settingsLayout: layoutUrl("CarddavSettingsLayout")
-				owner: mainItem
-				titleProperty: "displayName"
-				supportsEnableDisable: false
 			}
+			newItemGui: createGuiObject('Carddav')
+			settingsLayout: layoutUrl("CarddavSettingsLayout")
+			owner: mainItem
+			titleProperty: "displayName"
+			supportsEnableDisable: false
 		}
 	}
 }

Linphone/view/Page/Layout/Settings/ContactsSettingsProviderLayout.qml

@@ -22,51 +22,23 @@ RowLayout {
 
 	spacing: 5 * DefaultStyle.dp
 	ColumnLayout {
-		Layout.fillWidth: true
-		spacing: 5 * DefaultStyle.dp
-		ColumnLayout {
-			Layout.preferredWidth: 341 * DefaultStyle.dp
-			Layout.maximumWidth: 341 * DefaultStyle.dp
-			spacing: 5 * DefaultStyle.dp
-			Text {
-				text: mainItem.title
-				font: Typography.h4
-				wrapMode: Text.WordWrap
-				color: DefaultStyle.main2_600
-				Layout.fillWidth: true
-			}
-			Text {
-				text: mainItem.addTextDescription
-				font: Typography.p1s
-				wrapMode: Text.WordWrap
-				color: DefaultStyle.main2_600
-				Layout.fillWidth: true
-			}
-		}
-		Item {
-			Layout.fillHeight: true
-		}
-	}
-	ColumnLayout {
-		Layout.rightMargin: 25 * DefaultStyle.dp
 		Layout.fillWidth: true
 		Layout.fillHeight: true
-		spacing: 27 * DefaultStyle.dp
+		spacing: 16 * DefaultStyle.dp
-		Layout.leftMargin: 76 * DefaultStyle.dp
-		Layout.topMargin: 16 * DefaultStyle.dp
 		Repeater {
 			model: mainItem.proxyModel
 			RowLayout {
 				Layout.fillWidth: true
 				Layout.alignment: Qt.AlignLeft|Qt.AlignHCenter
-				spacing: 5 * DefaultStyle.dp
+				Layout.preferredHeight: 74 * DefaultStyle.dp
+				spacing: 20 * DefaultStyle.dp
 				Text {
 					text: modelData.core[titleProperty]
 					font: Typography.p2l
 					wrapMode: Text.WordWrap
 					color: DefaultStyle.main2_600
 					Layout.fillWidth: true
-					Layout.leftMargin: 17 * DefaultStyle.dp
+					Layout.alignment: Qt.AlignHCenter
 				}
 				Item {
 					Layout.fillWidth: true
@@ -88,7 +60,6 @@ RowLayout {
 				Switch {
 					id: switchButton
 					Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-					Layout.rightMargin: 17 * DefaultStyle.dp
 					checked: supportsEnableDisable && modelData.core["enabled"]
 					visible: supportsEnableDisable
 					onToggled: {
@@ -121,6 +92,10 @@ RowLayout {
 				Layout.preferredHeight: 47 * DefaultStyle.dp
 				Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
 				text: qsTr("Ajouter")
+				leftPadding: 20 * DefaultStyle.dp
+				rightPadding: 20 * DefaultStyle.dp
+				topPadding: 11 * DefaultStyle.dp
+				bottomPadding: 11 * DefaultStyle.dp
 				visible: mainItem.showAddButton
 				onClicked: {
 					mainItem.owner.container.push(mainItem.settingsLayout, {

Linphone/view/Page/Layout/Settings/DebugSettingsLayout.qml

@@ -12,7 +12,13 @@ AbstractSettingsLayout {
 	Layout.fillHeight: true
 	id: mainItem
 	property string logsUrl
-	contentComponent: content
+	contentModel: [
+		{
+			title: "",
+			subTitle: "",
+			contentComponent: content
+		}
+	]
 
 	Dialog {
 		id: deleteLogs

Linphone/view/Page/Layout/Settings/LdapSettingsLayout.qml

@@ -9,10 +9,19 @@ import UtilsCpp
 
 AbstractSettingsLayout {
 	id: mainItem
-	contentComponent: content
+	width: parent?.width
+	contentModel: [
+		{
+			title: qsTr("Annuaires LDAP"),
+			subTitle: qsTr("Ajouter vos annuaires LDAP pour pouvoir effectuer des recherches dans la magic search bar."),
+			contentComponent: ldapParametersComponent
+		}
+	]
+
 	topbarOptionalComponent: topBar
 	property alias ldapGui: mainItem.model
 	property bool isNew: false
+
 	Component {
 		id: topBar
 		RowLayout {
@@ -39,6 +48,11 @@ AbstractSettingsLayout {
 				}
 			}
 			Button {
+				leftPadding: 16 * DefaultStyle.dp
+				rightPadding: 16 * DefaultStyle.dp
+				topPadding: 10 * DefaultStyle.dp
+				bottomPadding: 10 * DefaultStyle.dp
+				textSize: 15 * DefaultStyle.dp
 				text: qsTr("Enregistrer")
 				onClicked: {
 					if (ldapGui.core.isValid()) {
@@ -53,147 +67,112 @@ AbstractSettingsLayout {
 	}
 	
 	Component {
-		id: content
+		id: ldapParametersComponent
 		ColumnLayout {
-			width: parent.width
+			Layout.fillWidth: true
-			spacing: 5 * DefaultStyle.dp
+			spacing: 20 * DefaultStyle.dp
-			RowLayout {
+			Layout.rightMargin: 44 * DefaultStyle.dp
-				Layout.topMargin: 16 * DefaultStyle.dp
+			Layout.topMargin: 20 * DefaultStyle.dp
-				spacing: 5 * DefaultStyle.dp
+			Layout.leftMargin: 64 * DefaultStyle.dp
-				ColumnLayout {
+			DecoratedTextField {
-					Layout.fillWidth: true
+				id: server
-					spacing: 5 * DefaultStyle.dp
+				propertyName: "server"
-					ColumnLayout {
+				propertyOwner: ldapGui.core
-						Layout.preferredWidth: 341 * DefaultStyle.dp
+				title: qsTr("URL du serveur (ne peut être vide)")
-						Layout.maximumWidth: 341 * DefaultStyle.dp
+				toValidate: true
-						Layout.minimumWidth: 341 * DefaultStyle.dp
+				Layout.fillWidth: true
-						spacing: 5 * DefaultStyle.dp
+			}
-						Text {
+			DecoratedTextField {
-							Layout.fillWidth: true
+				propertyName: "bindDn"
-							text: qsTr("Annuaires LDAP")
+				propertyOwner: ldapGui.core
-							font: Typography.h4
+				title: qsTr("Bind DN")
-							wrapMode: Text.WordWrap
+				toValidate: true
-							color: DefaultStyle.main2_600
+				Layout.fillWidth: true
-						}
+			}
-						Text {
+			DecoratedTextField {
-							text: qsTr("Ajouter vos annuaires LDAP pour pouvoir effectuer des recherches dans la magic search bar.")
+				propertyName: "password"
-							font: Typography.p1s
+				hidden: true
-							wrapMode: Text.WordWrap
+				propertyOwner: ldapGui.core
-							color: DefaultStyle.main2_600
+				title: qsTr("Mot de passe")
-							Layout.fillWidth: true
+				toValidate: true
-						}
+				Layout.fillWidth: true
-					}
+			}
-					Item {
+			SwitchSetting {
-						Layout.fillHeight: true
+				titleText: qsTr("Utiliser TLS")
-					}
+				propertyName: "tls"
-				}
+				propertyOwner: ldapGui.core
-				ColumnLayout {
+			}
-					Layout.fillWidth: true
+			DecoratedTextField {
-					spacing: 20 * DefaultStyle.dp
+				propertyName: "baseObject"
-					Layout.rightMargin: 44 * DefaultStyle.dp
+				propertyOwner: ldapGui.core
-					Layout.topMargin: 20 * DefaultStyle.dp
+				title: qsTr("Base de recherche (ne peut être vide)")
-					Layout.leftMargin: 64 * DefaultStyle.dp
+				toValidate: true
-					DecoratedTextField {
+				Layout.fillWidth: true
-						id: server
+			}
-						propertyName: "server"
+			DecoratedTextField {
-						propertyOwner: ldapGui.core
+				propertyName: "filter"
-						title: qsTr("URL du serveur (ne peut être vide)")
+				propertyOwner: ldapGui.core
-						toValidate: true
+				title: qsTr("Filtre")
-						Layout.fillWidth: true
+				toValidate: true
-					}
+				Layout.fillWidth: true
-					DecoratedTextField {
+			}
-						propertyName: "bindDn"
+			DecoratedTextField {
-						propertyOwner: ldapGui.core
+				propertyName: "maxResults"
-						title: qsTr("Bind DN")
+				propertyOwner: ldapGui.core
-						toValidate: true
+				validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
-						Layout.fillWidth: true
+				title: qsTr("Nombre maximum de résultats")
-					}
+				toValidate: true
-					DecoratedTextField {
+				Layout.fillWidth: true
-						propertyName: "password"
+			}
-						hidden: true
+			DecoratedTextField {
-						propertyOwner: ldapGui.core
+				propertyName: "delay"
-						title: qsTr("Mot de passe")
+				propertyOwner: ldapGui.core
-						toValidate: true
+				validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
-						Layout.fillWidth: true
+				title: qsTr("Délai entre 2 requêtes (en millisecondes)")
-					}
+				toValidate: true
-					SwitchSetting {
+				Layout.fillWidth: true
-						titleText: qsTr("Utiliser TLS")
+			}
-						propertyName: "tls"
+			DecoratedTextField {
-						propertyOwner: ldapGui.core
+				propertyName: "timeout"
-					}
+				propertyOwner: ldapGui.core
-					DecoratedTextField {
+				title: qsTr("Durée maximun (en secondes)")
-						propertyName: "baseObject"
+				validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
-						propertyOwner: ldapGui.core
+				toValidate: true
-						title: qsTr("Base de recherche (ne peut être vide)")
+				Layout.fillWidth: true
-						toValidate: true
+			}
-						Layout.fillWidth: true
+			DecoratedTextField {
-					}
+				propertyName: "minChars"
-					DecoratedTextField {
+				propertyOwner: ldapGui.core
-						propertyName: "filter"
+				title: qsTr("Nombre minimum de caractères pour la requête")
-						propertyOwner: ldapGui.core
+				validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
-						title: qsTr("Filtre")
+				toValidate: true
-						toValidate: true
+				Layout.fillWidth: true
-						Layout.fillWidth: true
+			}
-					}
+			DecoratedTextField {
-					DecoratedTextField {
+				propertyName: "nameAttribute"
-						propertyName: "maxResults"
+				propertyOwner: ldapGui.core
-						propertyOwner: ldapGui.core
+				title: qsTr("Attributs de nom")
-						validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
+				toValidate: true
-						title: qsTr("Nombre maximum de résultats")
+				Layout.fillWidth: true
-						toValidate: true
+			}
-						Layout.fillWidth: true
+			DecoratedTextField {
-					}
+				propertyName: "sipAttribute"
-					DecoratedTextField {
+				propertyOwner: ldapGui.core
-						propertyName: "delay"
+				title: qsTr("Attributs SIP")
-						propertyOwner: ldapGui.core
+				toValidate: true
-						validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
+				Layout.fillWidth: true
-						title: qsTr("Délai entre 2 requêtes (en millisecondes)")
+			}
-						toValidate: true
+			DecoratedTextField {
-						Layout.fillWidth: true
+				propertyName: "sipDomain"
-					}
+				propertyOwner: ldapGui.core
-					DecoratedTextField {
+				title: qsTr("Domaine SIP")
-						propertyName: "timeout"
+				toValidate: true
-						propertyOwner: ldapGui.core
+				Layout.fillWidth: true
-						title: qsTr("Durée maximun (en secondes)")
+			}
-						validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
+			SwitchSetting {
-						toValidate: true
+				titleText: qsTr("Débogage")
-						Layout.fillWidth: true
+				propertyName: "debug"
-					}
+				propertyOwner: ldapGui.core
-					DecoratedTextField {
-						propertyName: "minChars"
-						propertyOwner: ldapGui.core
-						title: qsTr("Nombre minimum de caractères pour la requête")
-						validator: RegularExpressionValidator { regularExpression: /[0-9]+/ }
-						toValidate: true
-						Layout.fillWidth: true
-					}
-					DecoratedTextField {
-						propertyName: "nameAttribute"
-						propertyOwner: ldapGui.core
-						title: qsTr("Attributs de nom")
-						toValidate: true
-						Layout.fillWidth: true
-					}
-					DecoratedTextField {
-						propertyName: "sipAttribute"
-						propertyOwner: ldapGui.core
-						title: qsTr("Attributs SIP")
-						toValidate: true
-						Layout.fillWidth: true
-					}
-					DecoratedTextField {
-						propertyName: "sipDomain"
-						propertyOwner: ldapGui.core
-						title: qsTr("Domaine SIP")
-						toValidate: true
-						Layout.fillWidth: true
-					}
-					SwitchSetting {
-						titleText: qsTr("Débogage")
-						propertyName: "debug"
-						propertyOwner: ldapGui.core
-					}
-				}
 			}
 		}
 	}

Linphone/view/Page/Layout/Settings/NetworkSettingsLayout.qml

@@ -6,46 +6,24 @@ import SettingsCpp 1.0
 import Linphone
 
 AbstractSettingsLayout {
-	contentComponent: content
+	width: parent?.width
+	contentModel: [
+		{
+			title: qsTr("Réseau"),
+			subTitle: "",
+			contentComponent: content
+		}
+	]
 	Component {
 		id: content
 		ColumnLayout {
-			spacing: 5 * DefaultStyle.dp
+			spacing: 40 * DefaultStyle.dp
-			RowLayout {
+			SwitchSetting {
-				spacing: 5 * DefaultStyle.dp
+				Layout.fillWidth: true
-				ColumnLayout {
+				titleText: qsTr("Autoriser l'IPv6")
-					Layout.fillWidth: true
+				propertyName: "ipv6Enabled"
-					spacing: 5 * DefaultStyle.dp
+				propertyOwner: SettingsCpp
-					ColumnLayout {
-						Layout.preferredWidth: 341 * DefaultStyle.dp
-						Layout.maximumWidth: 341 * DefaultStyle.dp
-						spacing: 5 * DefaultStyle.dp
-						Text {
-							text: qsTr("Réseau")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-							Layout.fillWidth: true
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-				ColumnLayout {
-					Layout.rightMargin: 25 * DefaultStyle.dp
-					Layout.topMargin: 36 * DefaultStyle.dp
-					Layout.leftMargin: 64 * DefaultStyle.dp
-					spacing: 40 * DefaultStyle.dp
-					SwitchSetting {
-						Layout.fillWidth: true
-						titleText: qsTr("Autoriser l'IPv6")
-						propertyName: "ipv6Enabled"
-						propertyOwner: SettingsCpp
-					}
-				}
 			}
 		}
 	}
 }
-

Linphone/view/Page/Layout/Settings/SecuritySettingsLayout.qml

@@ -6,10 +6,17 @@ import SettingsCpp 1.0
 import Linphone
 
 AbstractSettingsLayout {
-	contentComponent: content
+	width: parent?.width
+	contentModel: [
+		{
+			title: "",
+			subTitle: "",
+			contentComponent: content
+		}
+	]
 	Component {
 		id: content
-		Column {
+		ColumnLayout {
 			spacing: 40 * DefaultStyle.dp
 			SwitchSetting {
 				titleText: qsTr("Chiffrer tous les fichiers")