feat(SearchBox): change text input style

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()
+        }
+      }
+    }
+  ]
 }

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
   }
 }

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 {