- Add persistent icon on text fields.

- Can close conversation search field from field
- Fix mouse area on search icon in timeline
- Avoid participants list to be behind icons in conversation

linphone-app/assets/images/textfield_close.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2"
+   width="14.933333"
+   height="14.933333"
+   viewBox="0 0 14.933333 14.933333"
+   sodipodi:docname="textfield_close.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="10.334334"
+     inkscape:cx="8.5636868"
+     inkscape:cy="6.8703024"
+     inkscape:window-width="1920"
+     inkscape:window-height="1131"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g8" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g8">
+    <image
+       width="14.933333"
+       height="14.933333"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9
+kT1Iw0AcxV9TpVpaHOwg4hCk6mJBVMRRq1CECqVWaNXB5NIPoUlDkuLiKLgWHPxYrDq4OOvq4CoI
+gh8gbm5Oii5S4v+SQosYD4778e7e4+4dINTLTDU7xgBVs4x0Ii5mcyti4BVBhNGNEQxKzNRnU6kk
+PMfXPXx8vYvxLO9zf46wkjcZ4BOJZ5huWMTrxFObls55nzjCSpJCfE48atAFiR+5Lrv8xrnosMAz
+I0YmPUccIRaLbSy3MSsZKvEkcVRRNcoXsi4rnLc4q+Uqa96TvzCU15aXuE5zAAksYBEpiJBRxQbK
+sBCjVSPFRJr24x7+fsefIpdMrg0wcsyjAhWS4wf/g9/dmoWJcTcpFAc6X2z7YwgI7AKNmm1/H9t2
+4wTwPwNXWstfqQPTn6TXWlr0COjZBi6uW5q8B1zuAH1PumRIjuSnKRQKwPsZfVMO6L0Fgqtub819
+nD4AGeoqeQMcHALDRcpe83h3V3tv/55p9vcDcvtyp3BZWEQAAAAGYktHRAD/AP8A/6C9p5MAAAAJ
+cEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQflCg0JLDO7t9HaAAABtElEQVQoz4WSMWsUURSFv/PA
+QIRAfoAQkBFBCGkU7RSysyFqERAEUcSUCWIjKwiKrKiFIIoWUaKIgqK4hRKr95jFNCIWViIWC2KR
+xspFECZk5lglLFHiqc93uefeoxhjR9J8nuc/+I9ijGPAPUkfAnAMeJNS2rkVlFLaI+k1cBQYC5KW
+bO+33UkpjW8GFhYWlFLaZ7tje1zS87quL4QQwmngKTBh+2VK6cAglGXZIduvgF2S7q+trc1NTU31
+BVAUxUhVVdeBOWBF0myv13uXZdkR4JHtUeBWVVXXpqenfwNoIPiwpEu2W0AfWJR01vaQpCvA7TzP
+V9f9GsyzvLy8rSzL80AbGAJWJZ2z/bDZbFaD3rD5GJLWhxnAtviHNsAY43BZlldtt4G+pBtACdwB
+Wimlob/AoihGJN0EWsAKcLzX612WdAL4CbRtt7vd7vaNzYqiGK3r+q7tk5K+ArN5nn8ceMdB24+B
+HZIehBAuTk5O/lKM8S1wWNIn22eazebnzQXIsmyv7SfAbkkv6rqeV4zRwPsQwqlGo/Ftq8rZfgZM
+SFoMQMf2zFYQQJ7nX4AZYAn4/gfzkMv/biDhtQAAAABJRU5ErkJggg==
+"
+       id="image10" />
+  </g>
+</svg>

linphone-app/ui/modules/Common/Form/Fields/TextField.qml

@@ -17,6 +17,7 @@ Controls.TextField {
   property string error: ''
   property var tools
   property QtObject textFieldStyle : TextFieldStyle.normal
+  property bool persistentIcon: false
   onTextFieldStyleChanged: if( !textFieldStyle) textFieldStyle = TextFieldStyle.normal
   
   signal iconClicked()
@@ -84,7 +85,7 @@ Controls.TextField {
     }
 
     iconSize: parent.contentHeight
-    visible: !parent.text
+    visible: persistentIcon || !parent.text
     MouseArea{
 		anchors.fill:	parent
 		onClicked: textField.iconClicked()

linphone-app/ui/modules/Linphone/Private/ThemeEditor.qml

@@ -0,0 +1,159 @@
+import QtGraphicalEffects 1.0
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.5
+import QtQuick.Dialogs 1.0
+
+import Common 1.0
+import Linphone 1.0
+
+import App.Styles 1.0
+
+
+// =============================================================================
+// ThemeEditor{}
+
+Window {
+	id: window
+	
+	
+	Component.onCompleted: window.show()
+	function setHeight (height) {
+		window.height = (Window.screen && height > Window.screen.desktopAvailableHeight)
+				? Window.screen.desktopAvailableHeight
+				: height
+	}
+	
+	// ---------------------------------------------------------------------------
+	height:500
+	width:500
+	minimumHeight: 300
+	minimumWidth: 200
+	title: 'Theme Editor'
+	
+	
+	// ---------------------------------------------------------------------------
+	onVisibleChanged: visible=true
+	//onClosing: Logic.handleClosing(close)
+	//onDetachedVirtualWindow: Logic.tryToCloseWindow()
+	
+	// ---------------------------------------------------------------------------
+	ColumnLayout{
+	anchors.fill:parent
+		TabBar{
+			id: bar
+			Layout.fillWidth: true
+			TabButton{
+				text: 'Colors'
+			}
+			TabButton{
+				text: 'Icons'
+			}
+		}
+		StackLayout {
+			Layout.fillWidth: true
+			currentIndex: bar.currentIndex
+			//				COLORS	
+			ScrollableListView{
+				//anchors.fill:parent
+				model:ColorProxyModel{
+					id:colorProxy
+				}
+				delegate: RowLayout{
+					TextField{
+						id:colorField
+						Layout.fillHeight: true
+						Layout.fillWidth: true
+						text: colorPreview.color
+						onEditingFinished: modelData.color = text
+					}
+					Rectangle{
+						id:colorPreview
+						width:30
+						Layout.fillHeight: true
+						color:modelData.color
+					}
+					Slider{
+						id:redSlider
+						from:0
+						to:255
+						value: colorPreview.color.r*255
+						onValueChanged: modelData.color.r = value/255
+					}
+					Slider{
+						id:greenSlider
+						from:0
+						to:255
+						value: colorPreview.color.g*255
+						onValueChanged: modelData.color.g = value/255
+					}
+					Slider{
+						id:blueSlider
+						from:0
+						to:255
+						value: colorPreview.color.b*255
+						onValueChanged: modelData.color.b = value/255
+					}
+					Slider{
+						id:alphaSlider
+						from:0
+						to:255
+						value: colorPreview.color.a*255
+						onValueChanged: modelData.color.a = value/255
+					}
+					
+					Text{
+						text : modelData.description
+					}
+					Text{
+						text: modelData.name
+						visible:modelData.description == ''
+					}
+				}
+			}
+			ScrollableListView{
+				//anchors.fill:parent
+				model:ImageProxyModel{
+					id:imageProxy
+				}
+				delegate: RowLayout{
+					Text{
+						text: modelData.id
+					}					
+					Icon{
+						id:iconPreview
+						width:30
+						Layout.fillHeight: true
+						icon:modelData.id
+						iconSize:30
+					}
+					Text{
+						text: modelData.path
+					}
+					Button{
+						text:'...'
+						onClicked: fileDialog.open()
+						FileDialog {
+							id: fileDialog
+							title: "Please choose a file"
+							folder: shortcuts.home
+							selectExisting: true
+							selectFolder: false
+							selectMultiple: false
+							defaultSuffix: 'svg'
+							onAccepted: {
+								console.log("You chose: " + fileDialog.fileUrls)
+								modelData.setUrl(fileDialog.fileUrl)
+							}
+							onRejected: {
+								console.log("Canceled")
+							}
+							//Component.onCompleted: visible = true
+							
+						}
+					}
+				}
+			}
+		}
+	}
+}

linphone-app/ui/modules/Linphone/Timeline/Timeline.qml

@@ -96,18 +96,21 @@ Rectangle {
 						}
 					}
 				}
-				
-				Icon {
-					id:searchButton
+				MouseArea{
 					Layout.alignment: Qt.AlignRight
 					Layout.rightMargin: TimelineStyle.legend.rightMargin
-					icon: (searchView.visible? 'timeline_close': 'timeline_search')
-					iconSize: TimelineStyle.legend.iconSize
-					MouseArea{
-						anchors.fill:parent
-						onClicked:{
-							searchView.visible = !searchView.visible
-						}
+					Layout.fillHeight: true
+					Layout.preferredWidth: TimelineStyle.legend.iconSize
+					onClicked:{
+						searchView.visible = !searchView.visible
+					}
+				
+					Icon {
+						id:searchButton
+						anchors.verticalCenter: parent.verticalCenter
+						anchors.horizontalCenter: parent.horizontalCenter						
+						icon: (searchView.visible? 'timeline_close': 'timeline_search')
+						iconSize: TimelineStyle.legend.iconSize
 					}
 				}
 			}

linphone-app/ui/views/App/Main/Conversation.qml

@@ -110,9 +110,14 @@ ColumnLayout  {
 					spacing:0
 					
 					ColumnLayout{
+					
+						property int maximumContentWidth: contactBar.width
+															-(avatar.visible?avatar.width:0)-(groupChat.visible?groupChat.width:0)
+															-actionBar.width - (secureIcon.visible?secureIcon.width :0)
+															-3*ConversationStyle.bar.spacing 
 						Layout.fillHeight: true
 						Layout.minimumWidth: 20
-						Layout.maximumWidth: contactBar.width-avatar.width-actionBar.width-3*ConversationStyle.bar.spacing
+						Layout.maximumWidth: maximumContentWidth
 						Layout.preferredWidth: contactDescription.contentWidth
 						spacing: 5
 						Row{
@@ -139,7 +144,7 @@ ColumnLayout  {
 						ContactDescription {
 							id:contactDescription
 							Layout.minimumWidth: 20
-							Layout.maximumWidth: contactBar.width-avatar.width-actionBar.width-3*ConversationStyle.bar.spacing
+							Layout.maximumWidth: parent.maximumContentWidth
 							Layout.preferredWidth: contentWidth
 							Layout.preferredHeight: contentHeight
 							Layout.alignment: Qt.AlignTop | Qt.AlignLeft
@@ -183,6 +188,7 @@ ColumnLayout  {
 						}
 					}
 					Icon{
+						id: secureIcon
 						Layout.alignment: Qt.AlignVCenter
 						visible: securityLevel != 1
 						icon: securityLevel === 2?'secure_level_1': securityLevel===3? 'secure_level_2' : 'secure_level_unsafe'
@@ -440,8 +446,28 @@ ColumnLayout  {
 		// -------------------------------------------------------------------------
 		// Search.
 		// -------------------------------------------------------------------------
+		MouseArea{
+			anchors.right: parent.right
+			anchors.top: parent.top
+			anchors.bottom: parent.bottom
+			anchors.rightMargin: 10
+			anchors.topMargin: 10
+			anchors.bottomMargin: 10
+			width: 30
+			Icon{
+				anchors.verticalCenter: parent.verticalCenter
+				anchors.horizontalCenter: parent.horizontalCenter
+				icon: (searchView.visible? 'close': 'search')
+				iconSize: 20
+			}
+			onClicked: {
+				searchView.visible = !searchView.visible
+				chatRoomProxyModel.filterText = searchView.text
+			}
+		}
 		Rectangle{
 			id:searchView
+			property alias text: searchBar.text
 			anchors.right: parent.right
 			anchors.top: parent.top
 			anchors.bottom: parent.bottom
@@ -450,6 +476,7 @@ ColumnLayout  {
 			anchors.leftMargin: 50
 			anchors.topMargin: 10
 			anchors.bottomMargin: 10
+			visible: false
 			
 			TextField {
 				id:searchBar
@@ -458,11 +485,16 @@ ColumnLayout  {
 					margins: 1
 				}
 				width: parent.width-14
-				icon: 'search'
+				icon: 'textfield_close'
+				persistentIcon: true
 				//: 'Search in messages' : this is a placeholder when searching something in the timeline list
 				placeholderText: qsTr('searchMessagesPlaceholder')
 				
 				onTextChanged: chatRoomProxyModel.filterText = text
+				onIconClicked: {
+					searchView.visible = false
+					chatRoomProxyModel.filterText = ''
+				}
 			}
 			
 		}