new mockup for magic search

Linphone/view/App/Layout/MainLayout.qml

@@ -150,26 +150,46 @@ Item {
 						id: magicSearchBar
 						Layout.fillWidth: true
 						placeholderText: qsTr("Rechercher un contact, appeler ou envoyer un message...")
+						focusedBorderColor: DefaultStyle.main1_500_main
 						onTextChanged: {
 							if (text.length != 0) listPopup.open()
 							else listPopup.close()
 						}
+						component MagicSearchButton: Button {
+							id: button
+							width: 45 * DefaultStyle.dp
+							height: 45 * DefaultStyle.dp
+							topPadding: 16 * DefaultStyle.dp
+							bottomPadding: 16 * DefaultStyle.dp
+							leftPadding: 16 * DefaultStyle.dp
+							rightPadding: 16 * DefaultStyle.dp
+							contentImageColor: DefaultStyle.main2_500main
+							icon.width: 24 * DefaultStyle.dp
+							icon.height: 24 * DefaultStyle.dp
+							background: Rectangle {
+								anchors.fill: parent
+								radius: 40 * DefaultStyle.dp
+								color: DefaultStyle.main2_200
+							}
+						}
+
 						Popup {
 							id: listPopup
 							width: magicSearchBar.width
-							height: Math.min(magicSearchList.contentHeight + topPadding + bottomPadding, 400 * DefaultStyle.dp)
+							height: Math.min(magicSearchContent.contentHeight + topPadding + bottomPadding, 400 * DefaultStyle.dp)
 							y: magicSearchBar.height
-							closePolicy: Popup.NoAutoClose
-							topPadding: 10 * DefaultStyle.dp
-							bottomPadding: 10 * DefaultStyle.dp
-							rightPadding: 10 * DefaultStyle.dp
-							leftPadding: 10 * DefaultStyle.dp
+							// closePolicy: Popup.NoAutoClose
+							topPadding: 20 * DefaultStyle.dp
+							bottomPadding: 20 * DefaultStyle.dp
+							rightPadding: 20 * DefaultStyle.dp
+							leftPadding: 20 * DefaultStyle.dp
 							
 							background: Item {
 								anchors.fill: parent
 								Rectangle {
 									id: popupBg
-									radius: 15 * DefaultStyle.dp
+									radius: 16 * DefaultStyle.dp
+									color: DefaultStyle.grey_0
 									anchors.fill: parent
 								}
 								MultiEffect {
@@ -181,117 +201,94 @@ Item {
 									shadowOpacity: 0.1
 								}
 							}
-							ScrollBar {
-								id: scrollbar
-								height: parent.height
-								anchors.right: listPopup.right
-							}
-							contentItem: ContactsList {
-								id: magicSearchList
-								visible: magicSearchBar.text.length != 0
-								height: contentHeight
-								width: magicSearchBar.width
-								headerPositioning: ListView.OverlayHeader
-								rightMargin: 15 * DefaultStyle.dp
-								initialHeadersVisible: false
-								contactMenuVisible: false
-								actionLayoutVisible: true
-								model: MagicSearchProxy {
-									searchText: magicSearchBar.text.length === 0 ? "*" : magicSearchBar.text
-									aggregationFlag: LinphoneEnums.MagicSearchAggregation.Friend
-								}
-								Control.ScrollBar.vertical: scrollbar
-								header: Control.Control {
-									z: 2
-									width: magicSearchList.width
-									leftPadding: 10 * DefaultStyle.dp
-									rightPadding: 10 * DefaultStyle.dp
-									background: Rectangle {
-										color: DefaultStyle.grey_0
-									}
-									contentItem: ColumnLayout {
-										RowLayout {
-											Layout.fillWidth: true
-											spacing: 10 * DefaultStyle.dp
-											Avatar {
-												Layout.preferredWidth: 45 * DefaultStyle.dp
-												Layout.preferredHeight: 45 * DefaultStyle.dp
-												address: sipAddr.text
-											}
-											ColumnLayout {
-												Text {
-													text: magicSearchBar.text
-													font {
-														pixelSize: 14 * DefaultStyle.dp
-														weight: 700 * DefaultStyle.dp
-													}
-												}
-												Text {
-													id: sipAddr
-													text: magicSearchBar.text
-												}
-											}
-											Item {
-												Layout.fillWidth: true
-											}
-											Button {
-												background: Item{}
-												Layout.preferredWidth: 24 * DefaultStyle.dp
-												Layout.preferredHeight: 24 * DefaultStyle.dp
 							
-												contentItem: Image {
-													anchors.fill: parent
-													source: AppIcons.phone
-												}
-												onClicked: {
-													UtilsCpp.createCall(sipAddr.text)
-													magicSearchBar.clearText()
-												}
-											}
-											Button {
-												Layout.preferredWidth: 24 * DefaultStyle.dp
-												Layout.preferredHeight: 24 * DefaultStyle.dp
-												background: Item{}
-												contentItem: Image {
-													anchors.fill: parent
-													source: AppIcons.videoCamera
-												}
-												onClicked: {
-													UtilsCpp.createCall(sipAddr.text, {'localVideoEnabled':true})
-													magicSearchBar.clearText()
+							contentItem: Control.ScrollView {
+								id: magicSearchContent
+								contentWidth: width
+								contentHeight: content.height
+								Control.ScrollBar.vertical: ScrollBar {
+									id: scrollbar
+									policy: Control.ScrollBar.AsNeeded
+									interactive: true
+									height: magicSearchContent.availableHeight
+									anchors.top: listPopup.top
+									anchors.bottom: listPopup.bottom
+									anchors.right: parent.right
+								}
+								ColumnLayout {
+									id: content
+									spacing: 10 * DefaultStyle.dp
+									width: magicSearchContent.width - scrollbar.width - 5 * DefaultStyle.dp
+									Text {
+										visible: contactList.count > 0
+										text: qsTr("Contact")
+										color: DefaultStyle.main2_500main
+										font {
+											pixelSize: 13 * DefaultStyle.dp
+											weight: 700 * DefaultStyle.dp
+										}
+									}
+									ContactsList {
+										id: contactList
+										visible: magicSearchBar.text.length != 0
+										Layout.preferredHeight: contentHeight
+										Layout.fillWidth: true
+										Layout.rightMargin: 5 * DefaultStyle.dp
+										initialHeadersVisible: false
+										contactMenuVisible: false
+										actionLayoutVisible: true
+										selectionEnabled: false
+										Control.ScrollBar.vertical.visible: false
+										model: MagicSearchProxy {
+											searchText: magicSearchBar.text.length === 0 ? "*" : magicSearchBar.text
+											aggregationFlag: LinphoneEnums.MagicSearchAggregation.Friend
+										}
+									}
+									Text {
+										text: qsTr("Suggestion")
+										color: DefaultStyle.main2_500main
+										font {
+											pixelSize: 13 * DefaultStyle.dp
+											weight: 700 * DefaultStyle.dp
+										}
+									}
+									RowLayout {
+										Layout.fillWidth: true
+										Layout.rightMargin: 5 * DefaultStyle.dp
+										spacing: 10 * DefaultStyle.dp
+										Avatar {
+											Layout.preferredWidth: 45 * DefaultStyle.dp
+											Layout.preferredHeight: 45 * DefaultStyle.dp
+											address: magicSearchBar.text
+										}
+										ColumnLayout {
+											Text {
+												text: magicSearchBar.text
+												font {
+													pixelSize: 12 * DefaultStyle.dp
+													weight: 300 * DefaultStyle.dp
 												}
 											}
 										}
-										Button {
+										Item {
 											Layout.fillWidth: true
-											Layout.preferredHeight: 30 * DefaultStyle.dp
-											color: DefaultStyle.main2_200
-											pressedColor: DefaultStyle.main2_400
-											background: Rectangle {
-												anchors.fill: parent
-												color: DefaultStyle.main2_200
-											}
-											contentItem: RowLayout {
-												spacing: 10 * DefaultStyle.dp
-												Image {
-													source: AppIcons.userPlus
-												}
-												Text {
-													text: qsTr("Ajouter ce contact")
-													font {
-														pixelSize: 14 * DefaultStyle.dp
-														weight: 700 * DefaultStyle.dp
-														capitalization: Font.AllUppercase
-													}
-												}
-												Item {Layout.fillWidth: true}
-											}
+										}
+										MagicSearchButton {
+											Layout.preferredWidth: 45 * DefaultStyle.dp
+											Layout.preferredHeight: 45 * DefaultStyle.dp
+											icon.source: AppIcons.phone
 											onClicked: {
-												mainItem.createContact(magicSearchBar.text, sipAddr.text)
+												UtilsCpp.createCall(magicSearchBar.text)
 												magicSearchBar.clearText()
-												listPopup.close()
 											}
 										}
+										MagicSearchButton {
+											// TODO : visible true when chat available
+											// visible: false
+											Layout.preferredWidth: 45 * DefaultStyle.dp
+											Layout.preferredHeight: 45 * DefaultStyle.dp
+											icon.source: AppIcons.chatTeardropText
+										}
 									}
 								}
 							}

Linphone/view/Item/Call/CallContactsLists.qml

@@ -194,6 +194,7 @@ Item {
 					}
 					ColumnLayout {
 						spacing: 18 * DefaultStyle.dp
+						Layout.rightMargin: 39 * DefaultStyle.dp
 						Text {
 							text: qsTr("All contacts")
 							font {

Linphone/view/Item/Contact/ContactsList.qml

@@ -15,6 +15,7 @@ ListView {
 
 	property string searchBarText
 
+	property bool selectionEnabled: true
 	property bool hoverEnabled: true
 	// dots popup menu
 	property bool contactMenuVisible: true
@@ -81,7 +82,7 @@ ListView {
 	delegate: Item {
 		id: itemDelegate
 		height: display ? 56 * DefaultStyle.dp : 0
-		width: mainItem.width - scrollbar.width - 12 * DefaultStyle.dp
+		width: mainItem.width
 		property var previousItem : mainItem.model.count > 0 && index > 0 ? mainItem.model.getAt(index-1) : null
 		property var previousDisplayName: previousItem ? previousItem.core.displayName : ""
 		property var displayName: modelData.core.displayName
@@ -98,6 +99,7 @@ ListView {
 			anchors.left: parent.left
 			visible: mainItem.initialHeadersVisible && mainItem.model.sourceFlags != LinphoneEnums.MagicSearchSource.All
 			anchors.verticalCenter: parent.verticalCenter
+			anchors.rightMargin: 15 * DefaultStyle.dp
 			verticalAlignment: Text.AlignVCenter
 			width: 20 * DefaultStyle.dp
 			opacity: (!previousItem || !previousDisplayName.toLocaleLowerCase(ConstantsCpp.DefaultLocale).startsWith(displayName[0].toLocaleLowerCase(ConstantsCpp.DefaultLocale))) ? 1 : 0
@@ -112,9 +114,7 @@ ListView {
 		RowLayout {
 			id: contactDelegate
 			anchors.left: initial.visible ? initial.right : parent.left
-			anchors.leftMargin: 10 * DefaultStyle.dp
 			anchors.right: actionsRow.left
-			// anchors.rightMargin: 10 * DefaultStyle.dp
 			anchors.verticalCenter: parent.verticalCenter
 			spacing: 10 * DefaultStyle.dp
 			z: 1
@@ -156,34 +156,37 @@ ListView {
 				visible: mainItem.actionLayoutVisible
 				spacing: 10 * DefaultStyle.dp
 				Button {
-					Layout.preferredWidth: 24 * DefaultStyle.dp
-					Layout.preferredHeight: 24 * DefaultStyle.dp
-					background: Item{}
-					contentItem: Image {
+					Layout.preferredWidth: 45 * DefaultStyle.dp
+					Layout.preferredHeight: 45 * DefaultStyle.dp
+					icon.width: 24 * DefaultStyle.dp
+					icon.height: 24 * DefaultStyle.dp
+					icon.source: AppIcons.phone
+					contentImageColor: DefaultStyle.main2_500main
+					background: Rectangle {
 						anchors.fill: parent
-						width: 24 * DefaultStyle.dp
-						height: 24 * DefaultStyle.dp
-						source: AppIcons.phone
+						radius: 40 * DefaultStyle.dp
+						color: DefaultStyle.main2_200
 					}
 					onClicked: UtilsCpp.createCall(modelData.core.defaultAddress)
 				}
 				Button {
-					Layout.preferredWidth: 24 * DefaultStyle.dp
-					Layout.preferredHeight: 24 * DefaultStyle.dp
-					background: Item{}
-					contentItem: Image {
+					Layout.preferredWidth: 45 * DefaultStyle.dp
+					Layout.preferredHeight: 45 * DefaultStyle.dp
+					icon.width: 24 * DefaultStyle.dp
+					icon.height: 24 * DefaultStyle.dp
+					icon.source: AppIcons.chatTeardropText
+					contentImageColor: DefaultStyle.main2_500main
+					background: Rectangle {
 						anchors.fill: parent
-						width: 24 * DefaultStyle.dp
-						height: 24 * DefaultStyle.dp
-						source: AppIcons.videoCamera
+						radius: 40 * DefaultStyle.dp
+						color: DefaultStyle.main2_200
 					}
-					onClicked: UtilsCpp.createCall(modelData.core.defaultAddress, {'localVideoEnabled':true})
 				}
 			}
 			PopupButton {
 				id: friendPopup
 				z: 1
-				Layout.rightMargin: 13 * DefaultStyle.dp
+				// Layout.rightMargin: 13 * DefaultStyle.dp
 				Layout.alignment: Qt.AlignVCenter
 				popup.x: 0
 				popup.padding: 10 * DefaultStyle.dp
@@ -249,6 +252,7 @@ ListView {
 		
 		MouseArea {
 			id: contactArea
+			enabled: mainItem.selectionEnabled
 			hoverEnabled: mainItem.hoverEnabled
 			anchors.fill: itemDelegate
 			height: mainItem.height

Linphone/view/Item/SearchBar.qml

@@ -10,6 +10,7 @@ Rectangle {
 	property color placeholderTextColor: DefaultStyle.main2_400
 	property int textInputWidth: 350 * DefaultStyle.dp
 	property color borderColor: "transparent"
+	property color focusedBorderColor: DefaultStyle.main2_500main
 	property string text: textField.text
 	property bool magnifierVisible: true
 	property var validator: RegularExpressionValidator{}
@@ -39,7 +40,7 @@ Rectangle {
 	implicitHeight: 50 * DefaultStyle.dp
 	radius: 28 * DefaultStyle.dp
 	color: DefaultStyle.grey_100
-	border.color: textField.activeFocus ? DefaultStyle.main2_500main : mainItem.borderColor
+	border.color: textField.activeFocus ? mainItem.focusedBorderColor : mainItem.borderColor
 	Image {
 		id: magnifier
 		visible: mainItem.magnifierVisible

Linphone/view/Page/Main/CallPage.qml

@@ -404,19 +404,23 @@ AbstractMainPage {
 	}
 	Component {
 		id: newCallItem
-		CallContactsLists {
+		ColumnLayout {
 			Control.StackView.onActivated: titleLoader.sourceComponent = newCallTitle
-			numPad: numericPad
-			groupCallVisible: true
-			searchBarColor: DefaultStyle.grey_100
+			CallContactsLists {
+				Layout.fillWidth: true
+				Layout.fillHeight: true
+				numPad: numericPad
+				groupCallVisible: true
+				searchBarColor: DefaultStyle.grey_100
 				
-			onCallButtonPressed: (address) => {
-				UtilsCpp.createCall(address)
-				// var window = UtilsCpp.getCallsWindow()
-			}
-			onGroupCallCreationRequested: {
-				console.log("groupe call requetsed")
-				listStackView.push(groupCallItem)
+				onCallButtonPressed: (address) => {
+					UtilsCpp.createCall(address)
+					// var window = UtilsCpp.getCallsWindow()
+				}
+				onGroupCallCreationRequested: {
+					console.log("groupe call requetsed")
+					listStackView.push(groupCallItem)
+				}
 			}
 		}
 	}

Linphone/view/Page/Main/ContactPage.qml

@@ -145,7 +145,7 @@ AbstractMainPage {
 							visible: favoriteList.contentHeight > 0
 							Layout.leftMargin: leftPanel.leftMargin
 							Layout.rightMargin: leftPanel.rightMargin
-							spacing: 16 * DefaultStyle.dp
+							spacing: 18 * DefaultStyle.dp
 							RowLayout {
 								spacing: 0
 								Text {
@@ -255,7 +255,7 @@ AbstractMainPage {
 						height: listLayout.availableHeight
 						active: true
 						interactive: true
-						policy: Control.ScrollBar.AlwaysOn //Control.ScrollBar.AsNeeded
+						policy: Control.ScrollBar.AsNeeded
 					}
 
 				}