data/linux.x86.linphone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new mockup for magic search

Browse source
This commit is contained in:
Gaelle Braud 2024-05-29 17:51:56 +02:00
parent 9e8b1d5dd9
commit 231d42db1c
6 changed files with 149 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
Linphone/view/App/Layout/MainLayout.qml
View file

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

1
Linphone/view/Item/Call/CallContactsLists.qml
View file

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

42
Linphone/view/Item/Contact/ContactsList.qml
View file

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

3
Linphone/view/Item/SearchBar.qml
View file

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

6
Linphone/view/Page/Main/CallPage.qml
View file

@ -404,8 +404,11 @@ AbstractMainPage {
} }
Component { Component {
id: newCallItem id: newCallItem
CallContactsLists { ColumnLayout {
Control.StackView.onActivated: titleLoader.sourceComponent = newCallTitle Control.StackView.onActivated: titleLoader.sourceComponent = newCallTitle
CallContactsLists {
Layout.fillWidth: true
Layout.fillHeight: true
numPad: numericPad numPad: numericPad
groupCallVisible: true groupCallVisible: true
searchBarColor: DefaultStyle.grey_100 searchBarColor: DefaultStyle.grey_100
@ -420,6 +423,7 @@ AbstractMainPage {
} }
} }
} }
}
Component { Component {
id: groupCallTitle id: groupCallTitle

4
Linphone/view/Page/Main/ContactPage.qml
View file

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