contactsearch: add convenient button for clearing search result

- Changed radius
- Added preferred width for side panel to fully show
  contact search bar placeholder text by default (English)

Gitlab: #321

Change-Id: I2c26ebc34812db41f5d50408e2e092bf0a99f76d

src/constant/JamiStrings.qml

@@ -395,7 +395,10 @@ Item {
     property string createNewJA: qsTr("Create a Jami account")
     property string aboutJami: qsTr("About Jami")
 
-    // Smart list context menu
+    // SmartList
+    property string clearText: qsTr("Clear Text")
+
+    // SmartList context menu
     property string declineContactRequest: qsTr("Decline contact request")
     property string acceptContactRequest: qsTr("Accept contact request")
 

src/constant/JamiTheme.qml

@@ -166,6 +166,7 @@ Item {
     property int menuFontSize: 12
     property int headerFontSize: 13
     property int titleFontSize: 16
+    property int lineEditRadius: 4
 
     property int maximumWidthSettingsView: 600
     property int settingsHeaderpreferredHeight: 64
@@ -179,13 +180,13 @@ Item {
     property int pluginHandlersPopupViewDelegateHeight: 50
 
     // main application spec
-    property int mainViewMinWidth: 460
+    property int mainViewMinWidth: 300
     property int mainViewMinHeight: 400
 
     property int wizardViewMinWidth: 500
     property int wizardViewMinHeight: 600
 
-    property int mainViewPreferredWidth: 650
+    property int mainViewPreferredWidth: 725
     property int mainViewPreferredHeight: 600
 
     function setTheme(dark) {

src/mainview/MainView.qml

@@ -41,12 +41,13 @@ Rectangle {
 
     property var containerWindow: ""
 
-    property int sidePanelViewStackPreferredWidth: 250
-    property int mainViewStackPreferredWidth: 250
+    property int sidePanelViewStackMinimumWidth: 300
+    property int mainViewStackPreferredWidth: 425
     property int settingsViewPreferredWidth: 460
     property int onWidthChangedTriggerDistance: 5
 
     property bool sidePanelOnly: (!mainViewStack.visible) && sidePanelViewStack.visible
+    property int previousWidth: width
 
     // To calculate tab bar bottom border hidden rect left margin.
     property int tabBarLeftMargin: 8
@@ -161,7 +162,7 @@ Rectangle {
                 sidePanelViewStack.push(settingsMenu, StackView.Immediate)
 
                 var windowCurrentMinimizedSize = settingsViewPreferredWidth
-                        + sidePanelViewStackPreferredWidth + onWidthChangedTriggerDistance
+                        + sidePanelViewStackMinimumWidth + onWidthChangedTriggerDistance
                 if (containerWindow.width < windowCurrentMinimizedSize)
                     containerWindow.width = windowCurrentMinimizedSize
             }
@@ -289,9 +290,10 @@ Rectangle {
             Rectangle {
                 id: mainViewSidePanelRect
 
-                SplitView.minimumWidth: sidePanelViewStackPreferredWidth
-                SplitView.maximumWidth: (sidePanelOnly ? splitView.width :
-                                                      splitView.width - sidePanelViewStackPreferredWidth)
+                SplitView.minimumWidth: sidePanelViewStackMinimumWidth
+                SplitView.maximumWidth: (sidePanelOnly ?
+                                             splitView.width :
+                                             splitView.width - sidePanelViewStackMinimumWidth)
                 SplitView.fillHeight: true
                 color: JamiTheme.backgroundColor
 
@@ -352,8 +354,9 @@ Rectangle {
 
                 SplitView.maximumWidth: sidePanelOnly ?
                                             splitView.width :
-                                            splitView.width - sidePanelViewStackPreferredWidth
-                SplitView.minimumWidth: sidePanelViewStackPreferredWidth
+                                            splitView.width - sidePanelViewStackMinimumWidth
+                SplitView.preferredWidth: mainViewStackPreferredWidth
+                SplitView.minimumWidth: sidePanelViewStackMinimumWidth
                 SplitView.fillHeight: true
 
                 clip: true
@@ -493,8 +496,10 @@ Rectangle {
 
     onWidthChanged: {
         // Hide unnecessary stackview when width is changed.
-        var widthToCompare = sidePanelViewStackPreferredWidth +
-                (inSettingsView ? settingsViewPreferredWidth : mainViewStackPreferredWidth)
+        var widthToCompare = previousWidth < mainView.width ?
+                    sidePanelViewStackMinimumWidth :
+                    (sidePanelViewStackMinimumWidth +
+                     (inSettingsView ? settingsViewPreferredWidth : mainViewStackPreferredWidth))
 
         if (mainView.width < widthToCompare - onWidthChangedTriggerDistance
                 && mainViewStack.visible) {
@@ -512,8 +517,6 @@ Rectangle {
             }
             else if (inWelcomeViewStack)
                 recursionStackViewItemMove(mainViewStack, sidePanelViewStack)
-
-            mainView.update()
         } else if (mainView.width >= widthToCompare + onWidthChangedTriggerDistance
                    && !mainViewStack.visible) {
             mainViewStack.visible = true
@@ -532,9 +535,9 @@ Rectangle {
                 if (currentAccountIsCalling())
                     pushCallStackView()
             }
-
-            mainView.update()
         }
+
+        previousWidth = mainView.width
     }
 
     AboutPopUp {

src/mainview/components/ContactSearchBar.qml

@@ -24,8 +24,12 @@ import QtGraphicalEffects 1.14
 import net.jami.Models 1.0
 import net.jami.Constants 1.0
 
+import "../../commoncomponents"
+
 Rectangle {
-    id: contactSearchBarRect
+    id: root
+
+    property int itemMargin: 8
 
     signal contactSearchBarTextChanged(string text)
     signal returnPressedWhileSearching
@@ -35,7 +39,7 @@ Rectangle {
         fakeFocus.forceActiveFocus()
     }
 
-    radius: height / 2
+    radius: JamiTheme.lineEditRadius
     color: JamiTheme.secondaryBackgroundColor
 
     FocusScope {
@@ -45,12 +49,12 @@ Rectangle {
     Image {
         id: searchIconImage
 
-        anchors.verticalCenter: contactSearchBarRect.verticalCenter
-        anchors.left: contactSearchBarRect.left
-        anchors.leftMargin: 8
+        anchors.verticalCenter: root.verticalCenter
+        anchors.left: root.left
+        anchors.leftMargin: itemMargin
 
-        width: 20
-        height: 20
+        width: 16
+        height: 16
 
         fillMode: Image.PreserveAspectFit
         mipmap: true
@@ -65,15 +69,18 @@ Rectangle {
 
     TextField {
         id: contactSearchBar
-        color: JamiTheme.textColor
 
-        anchors.verticalCenter: contactSearchBarRect.verticalCenter
+        anchors.verticalCenter: root.verticalCenter
         anchors.left: searchIconImage.right
 
-        width: contactSearchBarRect.width - searchIconImage.width - 10
-        height: contactSearchBarRect.height - 5
+        width: root.width - searchIconImage.width - clearTextButton.width - itemMargin * 2
+        height: root.height - 5
+
+        color: JamiTheme.textColor
 
         font.pointSize: JamiTheme.textFontSize
+        font.kerning: true
+
         selectByMouse: true
         selectionColor: JamiTheme.contactSearchBarPlaceHolderTextFontColor
 
@@ -86,10 +93,26 @@ Rectangle {
             color: "transparent"
         }
 
-        onTextChanged: {
-            contactSearchBarRect.contactSearchBarTextChanged(
-                        contactSearchBar.text)
+        onTextChanged: root.contactSearchBarTextChanged(contactSearchBar.text)
     }
+
+    PushButton {
+        id: clearTextButton
+
+        anchors.verticalCenter: root.verticalCenter
+        anchors.left: contactSearchBar.right
+
+        preferredSize: 16
+
+        visible: contactSearchBar.text.length
+
+        normalColor: root.color
+        imageColor: JamiTheme.primaryForegroundColor
+
+        source: "qrc:/images/icons/ic_clear_24px.svg"
+        toolTipText: JamiStrings.clearText
+
+        onClicked: contactSearchBar.clear()
     }
 
     Shortcut {