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,20 +90,66 @@ Rectangle {
 					Layout.rightMargin: 34 * DefaultStyle.dp
 				}
 			}
+			Repeater {
+				id: contentRepeater
+				model: mainItem.contentModel
+				delegate: ColumnLayout {
 					Rectangle {
-				Layout.fillWidth: true
 						Layout.topMargin: 16 * DefaultStyle.dp
+						Layout.bottomMargin: 16 * DefaultStyle.dp
+						Layout.fillWidth: true
 						height: 1 * DefaultStyle.dp
 						color: DefaultStyle.main2_500main
 					}
-			Loader {
+					GridLayout {
+						rows: 1
+						columns: mainItem.useVerticalLayout ? 1 : 2
 						Layout.fillWidth: true
-				sourceComponent: mainItem.contentComponent
+						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,50 +9,33 @@ 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
-			spacing: 5 * DefaultStyle.dp
-			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("Détails")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-						Text {
-							text: qsTr("Editer les informations de votre compte.")
-							font: Typography.p1s
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-							Layout.fillWidth: true
-						}
-					}
-					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
 			Avatar {
+				id: avatar
 				account: model
 				displayPresence: false
 				Layout.preferredWidth: 100 * DefaultStyle.dp
@@ -100,6 +83,7 @@ AbstractSettingsLayout {
 					var avatarPath = UtilsCpp.createAvatar( selectedFile )
 					if(avatarPath){
 						model.core.pictureUri = avatarPath
+						avatar.model = model
 					}
 				}
 			}
@@ -231,43 +215,13 @@ AbstractSettingsLayout {
 			}
 		}
 	}
-			Rectangle {
+
-				Layout.fillWidth: true
+
-				Layout.topMargin: 16 * DefaultStyle.dp
+	// Account devices
-				height: 1 * DefaultStyle.dp
+	//////////////////////////
-				color: DefaultStyle.main2_500main
+
-			}
+	Component {
-			RowLayout {
+		id: accountDevicesComponent
-				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
@@ -300,7 +254,6 @@ AbstractSettingsLayout {
 						bottomPadding: 26 * DefaultStyle.dp
 						rightPadding: 36 * DefaultStyle.dp
 						leftPadding: 33 * DefaultStyle.dp
-								
 						background: Rectangle {
 							anchors.fill: parent
 							color: DefaultStyle.grey_0
@@ -385,5 +338,3 @@ AbstractSettingsLayout {
 		}
 	}
 }
-	}
-}

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

@@ -9,43 +9,29 @@ 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
-			spacing: 5 * DefaultStyle.dp
-			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("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
@@ -62,47 +48,17 @@ AbstractSettingsLayout {
 				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 {
-				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("Paramètres avancés")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-					}
-					Item {
-						Layout.fillHeight: true
 		}
 	}
+
+	// Advanced parameters
+	/////////////////////
+
+	Component {
+		id: advancedParametersComponent
 		ColumnLayout {
 			Layout.fillWidth: true
 			spacing: 20 * DefaultStyle.dp
-					Layout.rightMargin: 44 * DefaultStyle.dp
-					Layout.topMargin: 20 * DefaultStyle.dp
-					Layout.leftMargin: 64 * DefaultStyle.dp
 			Text {
 				text: qsTr("Transport")
 				color: DefaultStyle.main2_600
@@ -185,11 +141,6 @@ AbstractSettingsLayout {
 				isValid: function(text) { return UtilsCpp.isValidURL(text); }
 				toValidate: true
 			}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
-			}
 		}
 	}
 }

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

@@ -8,41 +8,37 @@ 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: 5 * DefaultStyle.dp
-			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
@@ -62,42 +58,14 @@ AbstractSettingsLayout {
 			}
 		}
 	}
-			Rectangle {
+
-				Layout.fillWidth: true
+	//Audio codecs
-				Layout.topMargin: 35 * DefaultStyle.dp
+	//////////////
-				Layout.bottomMargin: 9 * DefaultStyle.dp
+
-				height: 1 * DefaultStyle.dp
+	Component {
-				color: DefaultStyle.main2_500main
+		id: audioCodecsComponent
-			}
-			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 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
@@ -112,45 +80,16 @@ AbstractSettingsLayout {
 			}
 		}
 	}
-			Rectangle {
+
-				Layout.fillWidth: true
+	//Video codecs
-				Layout.topMargin: 35 * DefaultStyle.dp
+	//////////////
-				Layout.bottomMargin: 9 * DefaultStyle.dp
+
-				height: 1 * DefaultStyle.dp
+	Component {
-				color: DefaultStyle.main2_500main
+		id: videoCodecsComponent
-			}
-			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 {
@@ -170,29 +109,29 @@ AbstractSettingsLayout {
 					Layout.fillWidth: true
 					titleText: Utils.capitalizeFirstLetter(modelData.core.mimeType)
 					subTitleText: modelData.core.encoderDescription
-							onCheckedChanged: function(checked) {
+					onCheckedChanged: Utils.openCodecOnlineInstallerDialog(
-								if (checked)
+						UtilsCpp.getMainWindow(),
-									Utils.openCodecOnlineInstallerDialog(mainWindow, modelData.core)
+						modelData.core,
+						function cancelCallBack() {
+							setChecked(false)
+						},
+						function successCallBack() {
+							videoPayloadTypeProxy.reload()
+							downloadableVideoPayloadTypeProxy.reload()
+						})
 				}
 			}
 		}
 	}
-			}
+
-			Rectangle {
+	//Hide fps
-				Layout.fillWidth: true
+	//////////
-				Layout.topMargin: 35 * DefaultStyle.dp
+
-				Layout.bottomMargin: 9 * DefaultStyle.dp
+	Component {
-				height: 1 * DefaultStyle.dp
+		id: hideFpsComponent
-				color: DefaultStyle.main2_500main
+		ColumnLayout {
-			}
+			spacing: 40 * DefaultStyle.dp
-			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
@@ -200,4 +139,3 @@ AbstractSettingsLayout {
 		}
 	}
 }
-}

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

@@ -6,21 +6,29 @@ 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: 47 * DefaultStyle.dp
-				ColumnLayout {
-					Item {
-						Layout.preferredWidth: 341 * DefaultStyle.dp
-					}
-				}
-				ColumnLayout {
-					Layout.rightMargin: 25 * DefaultStyle.dp
-					Layout.topMargin: 36 * DefaultStyle.dp
 			spacing: 20 * DefaultStyle.dp
 			SwitchSetting {
 				titleText: qsTr("Annulateur d'écho")
@@ -38,47 +46,16 @@ AbstractSettingsLayout {
 			}
 		}
 	}
-			Rectangle {
+
-				Layout.fillWidth: true
+	// Multimedia parameters
-				Layout.preferredHeight: 1 * DefaultStyle.dp
+	////////////////////////
-				color: DefaultStyle.main2_500main
+
-				Layout.topMargin: 38 * DefaultStyle.dp
+	Component {
-				Layout.bottomMargin: 16 * DefaultStyle.dp
+		id: multiMediaParametersComponent
-			}
-			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
-				}
-			}
 		}
 	}
 }

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,40 +68,7 @@ AbstractSettingsLayout {
 	}
 	
 	Component {
-		id: content
+		id: cardDavParametersComponent
-		ColumnLayout {
-			width: parent.width
-			spacing: 5 * DefaultStyle.dp
-			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("Carnet  d'adresse CardDAV")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-						Text {
-							text: qsTr("Ajouter un carnet d’adresse CardDAV pour synchroniser vos contacts Linphone avec un carnet d’adresse tiers.")
-							font: Typography.p1s
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-							Layout.fillWidth: true
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
 		ColumnLayout {
 			Layout.fillWidth: true
 			spacing: 20 * DefaultStyle.dp
@@ -142,5 +116,3 @@ AbstractSettingsLayout {
 		}
 	}
 }
-	}
-}

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

@@ -7,21 +7,34 @@ 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 {
-			spacing: 5 * DefaultStyle.dp
 		ContactsSettingsProviderLayout {
-				title: qsTr("Annuaires LDAP")
 			addText: qsTr("Ajouter un annuaire LDAP")
-				addTextDescription: qsTr("Ajouter vos annuaires LDAP pour pouvoir effectuer des recherches dans la magic search bar.")
 			editText: qsTr("Modifier un annuaire LDAP")
 			proxyModel: LdapProxy {}
 			newItemGui: createGuiObject('Ldap')
@@ -31,18 +44,16 @@ AbstractSettingsLayout {
 			supportsEnableDisable: true
 			showAddButton: true
 		}
-			Rectangle {
-				Layout.fillWidth: true
-				Layout.topMargin: 35 * DefaultStyle.dp
-				Layout.bottomMargin: 9 * DefaultStyle.dp
-				height: 1 * DefaultStyle.dp
-				color: DefaultStyle.main2_500main
 	}
+
+	// CardDAV parameters
+	/////////////////////
+
+	Component {
+		id: cardDavParametersComponent
 		ContactsSettingsProviderLayout {
 			id: carddavProvider
-				title: qsTr("Carnet d'adresse CardDAV")
 			addText: qsTr("Ajouter un carnet d'adresse 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:  {
@@ -58,4 +69,3 @@ AbstractSettingsLayout {
 		}
 	}
 }
-}

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

@@ -23,50 +23,22 @@ 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
-		}
+		spacing: 16 * DefaultStyle.dp
-	}
-	ColumnLayout {
-		Layout.rightMargin: 25 * DefaultStyle.dp
-		Layout.fillWidth: true
-		Layout.fillHeight: true
-		spacing: 27 * 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
+	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,40 +67,7 @@ AbstractSettingsLayout {
 	}
 	
 	Component {
-		id: content
+		id: ldapParametersComponent
-		ColumnLayout {
-			width: parent.width
-			spacing: 5 * DefaultStyle.dp
-			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("Annuaires LDAP")
-							font: Typography.h4
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-						}
-						Text {
-							text: qsTr("Ajouter vos annuaires LDAP pour pouvoir effectuer des recherches dans la magic search bar.")
-							font: Typography.p1s
-							wrapMode: Text.WordWrap
-							color: DefaultStyle.main2_600
-							Layout.fillWidth: true
-						}
-					}
-					Item {
-						Layout.fillHeight: true
-					}
-				}
 		ColumnLayout {
 			Layout.fillWidth: true
 			spacing: 20 * DefaultStyle.dp
@@ -196,5 +177,3 @@ AbstractSettingsLayout {
 		}
 	}
 }
-	}
-}

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

@@ -6,36 +6,17 @@ import SettingsCpp 1.0
 import Linphone
 
 AbstractSettingsLayout {
+	width: parent?.width
+	contentModel: [
+		{
+			title: qsTr("Réseau"),
+			subTitle: "",
 			contentComponent: content
+		}
+	]
 	Component {
 		id: content
 		ColumnLayout {
-			spacing: 5 * DefaultStyle.dp
-			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: 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
@@ -46,6 +27,3 @@ AbstractSettingsLayout {
 		}
 	}
 }
-	}
-}
-

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

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