From 231d42db1c0d6fd7268b1af150190a39d08bc5ef Mon Sep 17 00:00:00 2001 From: Gaelle Braud Date: Wed, 29 May 2024 17:51:56 +0200 Subject: [PATCH] new mockup for magic search --- Linphone/view/App/Layout/MainLayout.qml | 213 +++++++++--------- Linphone/view/Item/Call/CallContactsLists.qml | 1 + Linphone/view/Item/Contact/ContactsList.qml | 42 ++-- Linphone/view/Item/SearchBar.qml | 3 +- Linphone/view/Page/Main/CallPage.qml | 28 ++- Linphone/view/Page/Main/ContactPage.qml | 4 +- 6 files changed, 149 insertions(+), 142 deletions(-) diff --git a/Linphone/view/App/Layout/MainLayout.qml b/Linphone/view/App/Layout/MainLayout.qml index 0c685087e..4d9b4acfe 100644 --- a/Linphone/view/App/Layout/MainLayout.qml +++ b/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 + + 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 } - 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 + 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 + } } - 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() + 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 + } } } } diff --git a/Linphone/view/Item/Call/CallContactsLists.qml b/Linphone/view/Item/Call/CallContactsLists.qml index c6f1cff59..04fcacd03 100644 --- a/Linphone/view/Item/Call/CallContactsLists.qml +++ b/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 { diff --git a/Linphone/view/Item/Contact/ContactsList.qml b/Linphone/view/Item/Contact/ContactsList.qml index d08411824..9b3979ffd 100644 --- a/Linphone/view/Item/Contact/ContactsList.qml +++ b/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 diff --git a/Linphone/view/Item/SearchBar.qml b/Linphone/view/Item/SearchBar.qml index ec717d304..c927f3555 100644 --- a/Linphone/view/Item/SearchBar.qml +++ b/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 diff --git a/Linphone/view/Page/Main/CallPage.qml b/Linphone/view/Page/Main/CallPage.qml index d35028677..5b5b50f3b 100644 --- a/Linphone/view/Page/Main/CallPage.qml +++ b/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 - - onCallButtonPressed: (address) => { - UtilsCpp.createCall(address) - // var window = UtilsCpp.getCallsWindow() - } - onGroupCallCreationRequested: { - console.log("groupe call requetsed") - listStackView.push(groupCallItem) + 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) + } } } } diff --git a/Linphone/view/Page/Main/ContactPage.qml b/Linphone/view/Page/Main/ContactPage.qml index 952ce5490..a67e8f39c 100644 --- a/Linphone/view/Page/Main/ContactPage.qml +++ b/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 } }