Ui fixes : Radiobutton check, MeetingPage layouts, call/contacts amrgins and scrollbars

Linphone/view/App/CallsWindow.qml

@@ -20,7 +20,7 @@ Window {
 	property ConferenceGui conference: call && call.core.conference || null
 	onConferenceChanged: console.log ("CONFERENCE CHANGED", conference)
 
-	property var conferenceLayout: call && call.core.conferenceVideoLayout || undefined
+	property int conferenceLayout: call && call.core.conferenceVideoLayout || 0
 
 	property bool callTerminatedByUser: false
 	

Linphone/view/App/Layout/MainLayout.qml

@@ -109,24 +109,27 @@ Item {
 		
 		RowLayout {
 			anchors.fill: parent
-			// spacing: 30
+			spacing: 0
-			anchors.topMargin: 18 * DefaultStyle.dp
+			anchors.topMargin: 25 * DefaultStyle.dp
 			VerticalTabBar {
 				id: tabbar
 				Layout.fillHeight: true
+				Layout.preferredWidth: 82 * DefaultStyle.dp
 				model: [
 					{icon: AppIcons.phone, selectedIcon: AppIcons.phoneSelected, label: qsTr("Appels")},
 					{icon: AppIcons.adressBook, selectedIcon: AppIcons.adressBookSelected, label: qsTr("Contacts")},
 					{icon: AppIcons.chatTeardropText, selectedIcon: AppIcons.chatTeardropTextSelected, label: qsTr("Conversations")},
 					{icon: AppIcons.usersThree, selectedIcon: AppIcons.usersThreeSelected, label: qsTr("Réunions")}
 				]
+
 			}
 			ColumnLayout {
-				Layout.fillWidth: true
+				spacing:0
-				Layout.fillHeight: true
+
 				RowLayout {
 					id: topRow
-					Layout.leftMargin: 25 * DefaultStyle.dp
+					Layout.preferredHeight: 50 * DefaultStyle.dp
+					Layout.leftMargin: 45 * DefaultStyle.dp
 					Layout.rightMargin: 41 * DefaultStyle.dp
 					spacing: 25 * DefaultStyle.dp
 					SearchBar {
@@ -356,11 +359,11 @@ Item {
 					}
 				}
 				StackLayout {
-					// width: parent.width
-					// height: parent.height
 					id: mainStackLayout
 					currentIndex: tabbar.currentIndex
-	
+					Layout.fillWidth: true
+					Layout.fillHeight: true
+					Layout.topMargin: 24 * DefaultStyle.dp
 					CallPage {
 						id: callPage
 					}

Linphone/view/Item/Meeting/MeetingList.qml

@@ -12,15 +12,13 @@ ListView {
 	clip: true
 
 	property string searchBarText
-
+	property bool hoverEnabled: true	
-	property bool hoverEnabled: true
-	
-	currentIndex: -1
-
 	property var delegateButtons
-
 	property ConferenceInfoGui selectedConference: model.getAt(currentIndex) || null
 
+	spacing: 8 * DefaultStyle.dp
+	currentIndex: -1
+
 	onCountChanged: selectedConference = model.getAt(currentIndex) || null
 	onCurrentIndexChanged: selectedConference = model.getAt(currentIndex) || null
 
@@ -38,8 +36,10 @@ ListView {
 	section {
 		criteria: ViewSection.FullString
 		delegate: Text {
+			topPadding: 24 * DefaultStyle.dp
+			bottomPadding: 16 * DefaultStyle.dp
 			text: section
-			height: 29 * DefaultStyle.dp
+			height: 29 * DefaultStyle.dp + topPadding + bottomPadding
 			font {
 				pixelSize: 20 * DefaultStyle.dp
 				weight: 800 * DefaultStyle.dp
@@ -51,104 +51,142 @@ ListView {
 
 	delegate: Item {
 		id: itemDelegate
-		height: 80 * DefaultStyle.dp
+		height: 63 * DefaultStyle.dp + topOffset
 		width: mainItem.width
 		property var previousItem : mainItem.model.count > 0 && index > 0 ? mainItem.model.getAt(index-1) : null
-		property var previousDateTime: previousItem ? previousItem.core.dateTimeUtc : null
 		property var dateTime: $modelData.core.dateTime
+		property string day : UtilsCpp.toDateDayNameString(dateTime)
+		property string dateString:  UtilsCpp.toDateString(dateTime)
+		property string previousDateString: previousItem ? UtilsCpp.toDateString(previousItem.core.dateTimeUtc) : ''
+		property bool isFirst : ListView.previousSection !== ListView.section
+		property int topOffset: (dateDay.visible && !isFirst? 8 * DefaultStyle.dp : 0)
+
+
 		property var endDateTime: $modelData.core.endDateTime
-		ColumnLayout {
+		RowLayout{
-			id: dateDay
+			anchors.fill: parent
-			width: 32 * DefaultStyle.dp
+			anchors.topMargin:parent.topOffset
-			height: 51 * DefaultStyle.dp
+			spacing: 0
-			visible: !previousDateTime || previousDateTime != dateTime
+			Item{
-			anchors.verticalCenter: parent.verticalCenter
-			Text {
-				verticalAlignment: Text.AlignVCenter
 				Layout.preferredWidth: 32 * DefaultStyle.dp
-				Layout.preferredHeight: 19 * DefaultStyle.dp
+				visible: !dateDay.visible
-				// opacity: (!previousItem || !previousDateTime.startsWith(displayName[0])) ? 1 : 0
-				text: UtilsCpp.toDateDayNameString(dateTime)
-				color: DefaultStyle.main2_500main
-				font {
-					pixelSize: 14 * DefaultStyle.dp
-					weight: 400 * DefaultStyle.dp
-					capitalization: Font.Capitalize
-				}
 			}
-			Rectangle {
-				id: dayNum
-				Layout.preferredWidth: 32 * DefaultStyle.dp
-				Layout.preferredHeight: 32 * DefaultStyle.dp
-				radius: 50 * DefaultStyle.dp
-				property var isCurrentDay: UtilsCpp.isCurrentDay(dateTime)
-				color: isCurrentDay ? DefaultStyle.main1_500_main : "transparent"
-				Component.onCompleted: if(isCurrentDay) mainItem.currentIndex = index
-				Text {
-					anchors.centerIn: parent
-					text: UtilsCpp.toDateDayString(dateTime)
-					color: dayNum.isCurrentDay ? DefaultStyle.grey_0 : DefaultStyle.main2_500main
-					font {
-						pixelSize: 20 * DefaultStyle.dp
-						weight: 800 * DefaultStyle.dp
-					}
-				}
-			}
-		}
-		Rectangle {
-			id: conferenceInfoDelegate
-			anchors.left: dateDay.visible ? dateDay.right : parent.left
-			anchors.leftMargin: 10 * DefaultStyle.dp
-			anchors.rightMargin: 5 * DefaultStyle.dp
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-			radius: 10 * DefaultStyle.dp
-			// width: 265 * DefaultStyle.dp
-			height: 63 * DefaultStyle.dp
-			color: mainItem.currentIndex === index ? DefaultStyle.main2_200 : DefaultStyle.grey_0
 			ColumnLayout {
-				anchors.fill: parent
+				id: dateDay
-				anchors.left: parent.left
+				Layout.fillWidth: false
-				anchors.leftMargin: 15 * DefaultStyle.dp
+				Layout.preferredWidth: 32 * DefaultStyle.dp
-				spacing: 2 * DefaultStyle.dp
+				Layout.minimumWidth: 32 * DefaultStyle.dp
-				RowLayout {
+				height: 51 * DefaultStyle.dp
-					spacing: 8 * DefaultStyle.dp
+				visible: !previousDateString || previousDateString != dateString
-					Image {
+				spacing: 0
-						source: AppIcons.usersThree
+				//anchors.leftMargin: 45 * DefaultStyle.dp
-						Layout.preferredWidth: 24 * DefaultStyle.dp
-						Layout.preferredHeight: 24 * DefaultStyle.dp
-					}
-					Text {
-						text: $modelData.core.subject
-						font {
-							pixelSize: 13 * DefaultStyle.dp
-							weight: 700 * DefaultStyle.dp
-						}
-					}
-				}
 				Text {
-					text: UtilsCpp.toDateHourString(dateTime) + " - " + UtilsCpp.toDateHourString(endDateTime)
+					//Layout.preferredWidth: 32 * DefaultStyle.dp
+					Layout.preferredHeight: 19 * DefaultStyle.dp
+					Layout.fillWidth: true
+					// opacity: (!previousItem || !previousDateTime.startsWith(displayName[0])) ? 1 : 0
+					text: day
 					color: DefaultStyle.main2_500main
 					font {
 						pixelSize: 14 * DefaultStyle.dp
 						weight: 400 * DefaultStyle.dp
+						capitalization: Font.Capitalize
+					}
+				}
+				Rectangle {
+					id: dayNum
+					//Layout.preferredWidth: Math.max(32 * DefaultStyle.dp, dayNumText.width+17*DefaultStyle.dp)
+					Layout.fillWidth: true
+					Layout.preferredHeight: width
+					Layout.alignment: Qt.AlignCenter
+					radius: height/2
+					property var isCurrentDay: UtilsCpp.isCurrentDay(dateTime)
+
+					color: !isCurrentDay ? DefaultStyle.main1_500_main : "transparent"
+					Component.onCompleted: if(isCurrentDay) mainItem.currentIndex = index
+					Text {
+						id: dayNumText
+						anchors.centerIn: parent
+						verticalAlignment: Text.AlignVCenter
+						text: UtilsCpp.toDateDayString(dateTime)
+						color: !dayNum.isCurrentDay ? DefaultStyle.grey_0 : DefaultStyle.main2_500main
+						wrapMode: Text.NoWrap
+						font {
+							pixelSize: 20 * DefaultStyle.dp
+							weight: 800 * DefaultStyle.dp
+						}
+					}
+				}
+				Item{Layout.fillHeight:true;Layout.fillWidth: true}
+			}
+			Item {
+				Layout.preferredWidth: 265 * DefaultStyle.dp
+				Layout.preferredHeight: 63 * DefaultStyle.dp
+				Layout.leftMargin: 23 * DefaultStyle.dp
+				Rectangle {
+					id: conferenceInfoDelegate
+					anchors.fill: parent
+					anchors.rightMargin: 5	// margin to avoid clipping shadows at right
+					radius: 10 * DefaultStyle.dp
+
+					color: mainItem.currentIndex === index ? DefaultStyle.main2_200 : DefaultStyle.grey_0
+					ColumnLayout {
+						anchors.fill: parent
+						anchors.left: parent.left
+						anchors.leftMargin: 15 * DefaultStyle.dp
+						spacing: 2 * DefaultStyle.dp
+						RowLayout {
+							spacing: 8 * DefaultStyle.dp
+							Image {
+								source: AppIcons.usersThree
+								Layout.preferredWidth: 24 * DefaultStyle.dp
+								Layout.preferredHeight: 24 * DefaultStyle.dp
+							}
+							Text {
+								text: $modelData.core.subject
+								font {
+									pixelSize: 13 * DefaultStyle.dp
+									weight: 700 * DefaultStyle.dp
+								}
+							}
+						}
+						Text {
+							text: UtilsCpp.toDateHourString(dateTime) + " - " + UtilsCpp.toDateHourString(endDateTime)
+							color: DefaultStyle.main2_500main
+							font {
+								pixelSize: 14 * DefaultStyle.dp
+								weight: 400 * DefaultStyle.dp
+							}
+						}
+					}
+				}
+				MultiEffect {
+					source: conferenceInfoDelegate
+					anchors.fill: conferenceInfoDelegate
+					shadowEnabled: true
+					shadowBlur: 0.7
+					shadowOpacity: 0.2
+				}
+				MouseArea {
+					hoverEnabled: mainItem.hoverEnabled
+					anchors.fill: parent
+					visible: dateDay.visible
+					cursorShape: Qt.PointingHandCursor
+					onClicked: {
+						mainItem.currentIndex = index
+						mainItem.conferenceSelected($modelData)
 					}
 				}
 			}
 		}
 
-		MultiEffect {
+
-			source: conferenceInfoDelegate
-			anchors.fill: conferenceInfoDelegate
-			shadowEnabled: true
-			shadowBlur: 0.8
-			shadowOpacity: 0.2
-		}
 		
 		MouseArea {
 			id: confArea
 			hoverEnabled: mainItem.hoverEnabled
-			anchors.fill: dateDay.visible ? conferenceInfoDelegate : parent
+			visible: !dateDay.visible
+			anchors.fill: parent
 			cursorShape: Qt.PointingHandCursor
 			onClicked: {
 				mainItem.currentIndex = index

Linphone/view/Layout/Call/CallLayout.qml

@@ -16,7 +16,7 @@ Item {
 	property CallGui call
 	property bool callTerminatedByUser: false
 	readonly property var callState: call && call.core.state || undefined
-	property var conferenceLayout: call && call.core.conferenceVideoLayout || undefined
+	property int conferenceLayout: call && call.core.conferenceVideoLayout || 0
 	onConferenceLayoutChanged:console.log("CallLayout change : " +conferenceLayout)
 	onCallStateChanged: if (callState === LinphoneEnums.CallState.End) {
 							callTerminatedText.visible = true

Linphone/view/Layout/Call/GridLayout.qml

@@ -34,10 +34,7 @@ Mosaic {
 			Sticker {
 				id: cameraView
 				visible: mainItem.callState != LinphoneEnums.CallState.End  && mainItem.callState != LinphoneEnums.CallState.Released
-					&& modelData.core.address != activeSpeakerSticker.address
 				anchors.fill: parent
-				//height: visible ? 180 * DefaultStyle.dp : 0
-				//width: 300 * DefaultStyle.dp
 				qmlName: 'G_'+index
 
 				participantDevice: avatarCell.currentDevice

Linphone/view/Page/Main/AbstractMainPage.qml

@@ -135,14 +135,14 @@ Item {
 
 	RowLayout {
 		anchors.fill: parent
-		anchors.topMargin: 10 * DefaultStyle.dp
+		//anchors.topMargin: 10 * DefaultStyle.dp
 		spacing: 0
 		ColumnLayout {
 			id: leftPanel
-			Layout.preferredWidth: 403 * DefaultStyle.dp
+			Layout.preferredWidth: 404 * DefaultStyle.dp
-			Layout.minimumWidth: 403 * DefaultStyle.dp
 			Layout.fillHeight: true
-			Layout.fillWidth: false
+			Layout.fillWidth:false
+			spacing:0
 		}
 		Rectangle {
 			Layout.fillHeight: true
@@ -155,6 +155,7 @@ Item {
 			color: mainItem.rightPanelColor
 			Layout.fillWidth: true
 			Layout.fillHeight: true
+
 			StackLayout {
 				currentIndex: mainItem.showDefaultItem ? 0 : 1
 				anchors.fill: parent

Linphone/view/Page/Main/CallPage.qml

@@ -50,9 +50,8 @@ AbstractMainPage {
 			clip: true
 			initialItem: historyListItem
 			anchors.fill: parent
-			property int sideMargin: 25 * DefaultStyle.dp
+			property int leftMargin: 45 * DefaultStyle.dp
-			// anchors.leftMargin: 25
+			property int rightMargin: 39 * DefaultStyle.dp
-			// anchors.rightMargin: 25
 		}
 		Component {
 			id: historyListItem
@@ -63,8 +62,8 @@ AbstractMainPage {
 				RowLayout {
 					spacing: 16 * DefaultStyle.dp
 					Layout.fillWidth: true
-					Layout.leftMargin: listStackView.sideMargin
+					Layout.leftMargin: listStackView.leftMargin
-					Layout.rightMargin: listStackView.sideMargin
+					Layout.rightMargin: listStackView.rightMargin
 					Text {
 						text: qsTr("Appels")
 						color: DefaultStyle.main2_700
@@ -130,18 +129,19 @@ AbstractMainPage {
 					SearchBar {
 						id: searchBar
 						Layout.fillWidth: true
-						Layout.leftMargin: listStackView.sideMargin
+						Layout.leftMargin: listStackView.leftMargin
-						Layout.rightMargin: listStackView.sideMargin
+						Layout.rightMargin: listStackView.rightMargin
 						placeholderText: qsTr("Rechercher un appel")
 					}
 					RowLayout {
 						Layout.topMargin: 30 * DefaultStyle.dp	
+						spacing: 0
 						Control.Control {
 							id: listLayout
 							Layout.fillWidth: true
 							Layout.fillHeight: true
-							Layout.leftMargin: listStackView.sideMargin
+							Layout.leftMargin: listStackView.leftMargin
-							Layout.rightMargin: listStackView.sideMargin
+							Layout.rightMargin: listStackView.rightMargin - (scrollbar.visible? scrollbar.width : 0)
 
 							background: Rectangle {
 								anchors.fill: parent
@@ -317,8 +317,13 @@ AbstractMainPage {
 						Control.ScrollBar {
 							id: scrollbar
 							active: true
-							policy: Control.ScrollBar.AsNeeded
+							policy: Control.ScrollBar.AlwaysOn //Control.ScrollBar.AsNeeded
 							Layout.fillHeight: true
+							Rectangle{// TODO: change colors of scrollbar!
+								anchors.fill: parent
+								color: 'red'
+								opacity:0.2
+							}
 						}
 					}
 				}
@@ -329,8 +334,8 @@ AbstractMainPage {
 			ColumnLayout {
 				spacing: 30 * DefaultStyle.dp
 				RowLayout {
-					Layout.leftMargin: listStackView.sideMargin
+					Layout.leftMargin: listStackView.leftMargin
-					Layout.rightMargin: listStackView.sideMargin
+					Layout.rightMargin: listStackView.rightMargin
 					Button {
 						background: Item {
 						}
@@ -357,8 +362,6 @@ AbstractMainPage {
 				CallContactsLists {
 					Layout.fillWidth: true
 					Layout.fillHeight: true
-					// Layout.leftMargin: listStackView.sideMargin
-					// Layout.rightMargin: listStackView.sideMargin
 					groupCallVisible: true
 					searchBarColor: DefaultStyle.grey_100
 					property var callObj

Linphone/view/Page/Main/ContactPage.qml

@@ -61,13 +61,14 @@ AbstractMainPage {
 		id: leftPanel
 		Layout.fillWidth: true
 		Layout.fillHeight: true
-		property int sideMargin: 25 * DefaultStyle.dp
+		property int leftMargin: 45 * DefaultStyle.dp
+		property int rightMargin: 39 * DefaultStyle.dp
 		spacing: 30 * DefaultStyle.dp
 
 		RowLayout {
 			Layout.fillWidth: true
-			Layout.leftMargin: leftPanel.sideMargin
+			Layout.leftMargin: leftPanel.leftMargin
-			Layout.rightMargin: leftPanel.sideMargin
+			Layout.rightMargin: leftPanel.rightMargin
 
 			Text {
 				text: qsTr("Contacts")
@@ -93,38 +94,24 @@ AbstractMainPage {
 		}
 
 		ColumnLayout {
-			Layout.leftMargin: leftPanel.sideMargin
+			Layout.leftMargin: leftPanel.leftMargin
 			enabled: mainItem.leftPanelEnabled
 			SearchBar {
 				id: searchBar
-				Layout.rightMargin: leftPanel.sideMargin
+				Layout.rightMargin: leftPanel.rightMargin
 				Layout.fillWidth: true
 				placeholderText: qsTr("Rechercher un contact")
 			}
 			Item {
+				id: contactsArea
 				Layout.fillWidth: true
 				Layout.fillHeight: true
-				Control.ScrollBar {
-					id: contactsScrollbar
-					active: true
-					interactive: true
-					policy: Control.ScrollBar.AsNeeded
-					// Layout.fillWidth: true
-					anchors.top: parent.top
-					anchors.bottom: parent.bottom
-					anchors.right: parent.right
-					// Layout.alignment: Qt.AlignRight
-					// x: mainItem.x + mainItem.width - width
-					// anchors.left: control.right
-				}
 				Control.ScrollView {
 					id: listLayout
 					anchors.fill: parent
-					Layout.leftMargin: leftPanel.sideMargin
+					anchors.rightMargin: leftPanel.rightMargin
-					Layout.rightMargin: leftPanel.sideMargin
+					anchors.topMargin: 25 * DefaultStyle.dp
-					Layout.topMargin: 25 * DefaultStyle.dp
+					contentWidth: width
-					rightPadding: leftPanel.sideMargin
-					contentWidth: width - leftPanel.sideMargin
 					contentHeight: content.height
 					clip: true
 					Control.ScrollBar.vertical: contactsScrollbar
@@ -212,10 +199,11 @@ AbstractMainPage {
 							}
 							ContactsList{
 								id: contactList
-								hoverEnabled: mainItem.leftPanelEnabled
-								contactMenuVisible: true
 								Layout.fillWidth: true
 								Layout.preferredHeight: contentHeight
+								interactive: false
+								hoverEnabled: mainItem.leftPanelEnabled
+								contactMenuVisible: true
 								searchBarText: searchBar.text
 								model: allFriends
 								onSelectedContactChanged: {
@@ -232,6 +220,21 @@ AbstractMainPage {
 						}
 					}
 				}
+				Control.ScrollBar {
+					id: contactsScrollbar
+					// Parent is changed from Scrollview. Do not use it.
+					x: contactsArea.width - width
+					height: listLayout.availableHeight
+					active: true
+					interactive: true
+					policy: Control.ScrollBar.AlwaysOn //Control.ScrollBar.AsNeeded
+
+					Rectangle{// TODO: change colors of scrollbar!
+						anchors.fill: parent
+						color: 'red'
+						opacity:0.2
+					}
+				}
 			}
 		}
 	}

Linphone/view/Page/Main/MeetingPage.qml

@@ -91,68 +91,73 @@ AbstractMainPage {
 		]
 	}
 
-	leftPanelContent: RowLayout {
+	leftPanelContent: Item {
-		id: leftPanel
-		Layout.fillWidth: true
 		Layout.fillHeight: true
-		property int sideMargin: 20 * DefaultStyle.dp
+		Layout.fillWidth: true
-
+		RowLayout {
-		ColumnLayout {
+			id: leftPanel
-			// Layout.topMargin: 30 * DefaultStyle.dp
+			anchors.fill: parent
-			// Layout.leftMargin: leftPanel.sideMargin
+			spacing: 0
-			enabled: mainItem.leftPanelEnabled
+			ColumnLayout {
-			spacing: 30 * DefaultStyle.dp
+				enabled: mainItem.leftPanelEnabled
-			Layout.leftMargin: leftPanel.sideMargin
+				Layout.leftMargin: 45 * DefaultStyle.dp
-			Layout.rightMargin: leftPanel.sideMargin
+				Layout.rightMargin: 39 * DefaultStyle.dp
-
+				spacing: 0
-
+				RowLayout {
-			RowLayout {
+					visible: leftPanelStackView.currentItem.objectName == "listLayout"
-				visible: leftPanelStackView.currentItem.objectName == "listLayout"
+					// Layout.rightMargin: leftPanel.sideMargin
-				Layout.fillWidth: true
+					spacing: 0
-				// Layout.rightMargin: leftPanel.sideMargin
+					Text {
-
+						Layout.fillWidth: true
-				Text {
+						text: qsTr("Réunions")
-					text: qsTr("Réunions")
+						color: DefaultStyle.main2_700
-					color: DefaultStyle.main2_700
+						font.pixelSize: 29 * DefaultStyle.dp
-					font.pixelSize: 29 * DefaultStyle.dp
+						font.weight: 800 * DefaultStyle.dp
-					font.weight: 800 * DefaultStyle.dp
+					}
+					Button {
+						background: Item {
+						}
+						icon.source: AppIcons.plusCircle
+						Layout.preferredWidth: 28 * DefaultStyle.dp
+						Layout.preferredHeight: 28 * DefaultStyle.dp
+						icon.width: 28 * DefaultStyle.dp
+						icon.height: 28 * DefaultStyle.dp
+						onClicked: {
+							mainItem.setUpConference()
+						}
+					}
 				}
+
 				Item {
 					Layout.fillWidth: true
-				}
+					Layout.fillHeight: true
-				Button {
-					background: Item {
-					}
-					icon.source: AppIcons.plusCircle
-					Layout.preferredWidth: 30 * DefaultStyle.dp
-					Layout.preferredHeight: 30 * DefaultStyle.dp
-					icon.width: 24 * DefaultStyle.dp
-					icon.height: 24 * DefaultStyle.dp
-					onClicked: {
-						mainItem.setUpConference()
-					}
-				}
-			}
 
-			Item {
+					Control.StackView {
-				Layout.fillWidth: true
+						id: leftPanelStackView
-				Layout.fillHeight: true
+						initialItem: listLayout
-
+						anchors.fill: parent
-				Control.StackView {
+					}
-					id: leftPanelStackView
-					initialItem: listLayout
-					anchors.fill: parent
 				}
 			}
 		}
-
+		Rectangle{// TODO: change colors of scrollbar!
+			anchors.right: parent.right
+			anchors.top: parent.top
+			anchors.bottom: parent.bottom
+			width: 10
+			color: 'red'
+			opacity:0.2
+		}
 		Control.ScrollBar {
 			id: meetingsScrollbar
-			visible: leftPanelStackView.currentItem.objectName == "listLayout"
+			anchors.right: parent.right
+			anchors.top: parent.top
+			anchors.bottom: parent.bottom
+			width: 10
+			//visible: leftPanelStackView.currentItem.objectName == "listLayout"
 			active: true
 			interactive: true
-			policy: Control.ScrollBar.AsNeeded
+			policy: Control.ScrollBar.AlwaysOn //Control.ScrollBar.AsNeeded
-			Layout.fillHeight: true
 		}
 	}
 
@@ -172,7 +177,7 @@ AbstractMainPage {
 		id: listLayout
 		ColumnLayout {
 			property string objectName: "listLayout"
-			spacing: 19 * DefaultStyle.dp
+			spacing: 0
 			Control.StackView.onDeactivated: {
 				mainItem.selectedConference = null
 				// mainItem.righPanelStackView.clear()
@@ -181,6 +186,7 @@ AbstractMainPage {
 			SearchBar {
 				id: searchBar
 				Layout.fillWidth: true
+				//Layout.topMargin: 18 * DefaultStyle.dp
 				placeholderText: qsTr("Rechercher une réunion")
 			}
 
@@ -196,13 +202,15 @@ AbstractMainPage {
 			}
 			
 			RowLayout {
+			// Remove 24 from first section padding because we cannot know that it is the first section. 24 is the margins between sections.
+				Layout.topMargin: 38 * DefaultStyle.dp - 24 * DefaultStyle.dp
+				spacing: 0
 				MeetingList {
 					id: conferenceList
-					visible: count != 0
-					hoverEnabled: mainItem.leftPanelEnabled
 					Layout.fillWidth: true
 					Layout.fillHeight: true
-					Layout.topMargin: 20 * DefaultStyle.dp
+					visible: count != 0
+					hoverEnabled: mainItem.leftPanelEnabled
 					searchBarText: searchBar.text
 					onSelectedConferenceChanged: {
 						mainItem.selectedConference = selectedConference