From a1f33b4238add2875a4e0ccc9acf7eae0e82fec9 Mon Sep 17 00:00:00 2001
From: Ronan Abhamon <ronan.abhamon@belledonne-communications.com>
Date: Thu, 27 Oct 2016 14:52:45 +0200
Subject: [PATCH] feat(SearchBox): change text input style

---
 tests/ui/modules/Common/SearchBox.qml         | 78 ++++++++++++++-----
 tests/ui/modules/Common/Styles/PopupStyle.qml |  4 +-
 .../modules/Common/Styles/SearchBoxStyle.qml  |  9 ++-
 3 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/tests/ui/modules/Common/SearchBox.qml b/tests/ui/modules/Common/SearchBox.qml
index 1f784cc6b..566c9c105 100644
--- a/tests/ui/modules/Common/SearchBox.qml
+++ b/tests/ui/modules/Common/SearchBox.qml
@@ -9,7 +9,7 @@ import Common.Styles 1.0
 // ===================================================================
 
 Item {
-  id: item
+  id: searchBox
 
   property alias delegate: list.delegate
   property alias entryHeight: menu.entryHeight
@@ -26,23 +26,26 @@ Item {
   signal menuClosed
   signal menuOpened
 
-  function hideMenu () {
-    menu.hideMenu()
-    shadow.visible = false
-    searchField.focus = false
-    desktopPopup.hide()
+  // -----------------------------------------------------------------
 
-    menuClosed()
+  function hideMenu () {
+    if (!_isOpen) {
+      return
+    }
+
+    _isOpen = false
   }
 
   function showMenu () {
-    menu.showMenu()
-    shadow.visible = true
-    desktopPopup.show()
+    if (_isOpen) {
+      return
+    }
 
-    menuOpened()
+    _isOpen = true
   }
 
+  // -----------------------------------------------------------------
+
   implicitHeight: searchField.height
 
   Item {
@@ -61,6 +64,11 @@ Item {
 
       onActiveFocusChanged: activeFocus && searchBox.showMenu()
       onTextChanged: {
+        console.assert(
+          model.setFilterFixedString != null,
+          '`model.setFilterFixedString` must be defined.'
+        )
+
         model.setFilterFixedString(text)
 
         if (model.invalidate) {
@@ -69,17 +77,11 @@ Item {
       }
     }
 
-    PopupShadow {
-      id: shadow
-
-      anchors.fill: searchField
-      source: searchField
-      visible: false
-    }
-
+    // Wrap the search box menu in a window.
     DesktopPopup {
       id: desktopPopup
 
+      // The menu is always below the search field.
       property point coords: {
         var point = searchBox.mapToItem(null, 0, searchBox.height)
         point.x += window.x
@@ -109,4 +111,42 @@ Item {
       }
     }
   }
+
+  // -----------------------------------------------------------------
+
+  states: State {
+    name: 'opened'
+    when: _isOpen
+  }
+
+  transitions: [
+    Transition {
+      from: ''
+      to: 'opened'
+
+      ScriptAction {
+        script: {
+          menu.showMenu()
+          desktopPopup.show()
+
+          menuOpened()
+        }
+      }
+    },
+
+    Transition {
+      from: 'opened'
+      to: ''
+
+      ScriptAction {
+        script: {
+          menu.hideMenu()
+          searchField.focus = false
+          desktopPopup.hide()
+
+          menuClosed()
+        }
+      }
+    }
+  ]
 }
diff --git a/tests/ui/modules/Common/Styles/PopupStyle.qml b/tests/ui/modules/Common/Styles/PopupStyle.qml
index 4b68378c2..6c81b05ed 100644
--- a/tests/ui/modules/Common/Styles/PopupStyle.qml
+++ b/tests/ui/modules/Common/Styles/PopupStyle.qml
@@ -15,9 +15,9 @@ QtObject {
 
   property QtObject shadow: QtObject {
     property color color: Colors.f
-    property int horizontalOffset: 2
+    property int horizontalOffset: 4
     property int radius: 8
     property int samples: 15
-    property int verticalOffset: 2
+    property int verticalOffset: 4
   }
 }
diff --git a/tests/ui/modules/Common/Styles/SearchBoxStyle.qml b/tests/ui/modules/Common/Styles/SearchBoxStyle.qml
index 340023c78..45428bba8 100644
--- a/tests/ui/modules/Common/Styles/SearchBoxStyle.qml
+++ b/tests/ui/modules/Common/Styles/SearchBoxStyle.qml
@@ -9,7 +9,14 @@ QtObject {
   property color shadowColor: Colors.f
 
   property Rectangle searchFieldBackground: Rectangle {
-    implicitHeight: 30
+    implicitHeight: 40
+
+    border {
+      color: '#CBCBCB'
+      width: 1
+    }
+
+    radius: 4
   }
 
   property QtObject text: QtObject {