feat(searchBox): use style file

tests/resources.qrc

@@ -18,6 +18,8 @@
     <file>ui/components/contact/ContactDescription.qml</file>
     <file>ui/components/contact/Avatar.qml</file>
     <file>ui/components/popup/DropDownMenu.qml</file>
+    <file>ui/components/popup/PopupShadow.qml</file>
+    <file>ui/components/view/ScrollableListView.qml</file>
     <file>ui/components/dialog/ConfirmDialog.qml</file>
     <file>ui/components/dialog/DialogDescription.qml</file>
     <file>ui/components/dialog/DialogPlus.qml</file>
@@ -33,10 +35,14 @@
     <file>ui/components/form/DarkButton.qml</file>
     <file>ui/components/invertedMouseArea/InvertedMouseArea.qml</file>
     <file>ui/scripts/utils.js</file>
+    <file>ui/style/components/qmldir</file>
     <file>ui/style/components/Dialog.qml</file>
     <file>ui/style/components/Collapse.qml</file>
-    <file>ui/style/qmldir</file>
-    <file>ui/style/Constants.qml</file>
+    <file>ui/style/components/SearchBox.qml</file>
+    <file>ui/style/components/Popup.qml</file>
+    <file>ui/style/global/qmldir</file>
+    <file>ui/style/global/Colors.qml</file>
+    <file>ui/style/global/Constants.qml</file>
     <file>ui/views/newCall.qml</file>
     <file>ui/views/manageAccounts.qml</file>
     <file>ui/views/mainWindow/mainWindow.qml</file>

tests/ui/components/collapse/Collapse.qml

 import QtQuick 2.7
 
 import 'qrc:/ui/components/form'
-import 'qrc:/ui/style'
+
+import 'qrc:/ui/style/components'
 
 // ===================================================================
 // A simple component to build collapsed item.

tests/ui/components/dialog/ConfirmDialog.qml

 import QtQuick 2.7
 
 import 'qrc:/ui/components/form'
-import 'qrc:/ui/style'
+
+import 'qrc:/ui/style/components'
 
 // ===================================================================
 // A simple dialog with OK/Cancel buttons.
@@ -23,8 +24,8 @@ DialogPlus {
         }
     ]
     centeredButtons: true
-    maximumHeight: DialogStyle.confirm.height
-    maximumWidth: DialogStyle.confirm.width
-    minimumHeight: DialogStyle.confirm.height
-    minimumWidth: DialogStyle.confirm.width
+    maximumHeight: DialogStyle.confirmDialog.height
+    maximumWidth: DialogStyle.confirmDialog.width
+    minimumHeight: DialogStyle.confirmDialog.height
+    minimumWidth: DialogStyle.confirmDialog.width
 }

tests/ui/components/dialog/DialogDescription.qml

 import QtQuick 2.7
 
-import 'qrc:/ui/style'
+import 'qrc:/ui/style/components'
 
 // ===================================================================
 // Description content used by dialogs.

tests/ui/components/dialog/DialogPlus.qml

@@ -2,7 +2,7 @@ import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import QtQuick.Window 2.2
 
-import 'qrc:/ui/style'
+import 'qrc:/ui/style/components'
 
 // ===================================================================
 // Helper to build quickly dialogs.

tests/ui/components/invertedMouseArea/InvertedMouseArea.qml

 import QtQuick 2.0
 
-import 'qrc:/ui/style'
+import 'qrc:/ui/style/global'
 
 // ===================================================================
 // Helper to handle button click outside a component.

tests/ui/components/popup/DropDownMenu.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls 2.0
 import 'qrc:/ui/components/contact'
 import 'qrc:/ui/components/form'
 import 'qrc:/ui/components/scrollBar'
+import 'qrc:/ui/style'
 
 Rectangle {
     readonly property int entryHeight: 50
@@ -150,14 +151,9 @@ Rectangle {
         }
     }
 
-    DropShadow {
+    PopupShadow {
         anchors.fill: listContainer
-        color: "#80000000"
-        horizontalOffset: 2
-        radius: 8.0
-        samples: 15
         source: listContainer
-        verticalOffset: 2
         visible: true
     }
 }

tests/ui/components/popup/PopupShadow.qml

+import QtGraphicalEffects 1.0
+
+import 'qrc:/ui/style/components'
+
+// ===================================================================
+
+DropShadow {
+    color: PopupStyle.shadow.color
+    horizontalOffset: PopupStyle.shadow.horizontalOffset
+    radius: PopupStyle.shadow.radius
+    samples: PopupStyle.shadow.samples
+    verticalOffset: PopupStyle.shadow.verticalOffset
+}

tests/ui/components/searchBox/SearchBox.qml

-import QtGraphicalEffects 1.0
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
 import 'qrc:/ui/components/invertedMouseArea'
 import 'qrc:/ui/components/popup'
 
+import 'qrc:/ui/style/components'
+import 'qrc:/ui/style/global'
+
 // ===================================================================
 
 Item {
@@ -15,57 +17,47 @@ Item {
     signal menuOpened ()
     signal searchTextChanged (string text)
 
-    implicitHeight: searchField.height
-
-    function hideMenu () {
+    function _hideMenu () {
         menu.hide()
         shadow.visible = false
         searchField.focus = false
+
         menuClosed()
     }
 
-    function showMenu () {
+    function _showMenu () {
         menu.show()
         shadow.visible = true
+
         menuOpened()
     }
 
+    implicitHeight: searchField.height
+
     Item {
         implicitHeight: searchField.height + menu.height
         width: parent.width
 
         TextField {
-            background: Rectangle {
-                implicitHeight: 30
-            }
             id: searchField
+
+            background: SearchBoxStyle.searchFieldBackground
             width: parent.width
 
-            Keys.onEscapePressed: hideMenu()
+            Keys.onEscapePressed: _hideMenu()
 
-            onActiveFocusChanged: activeFocus && showMenu()
+            onActiveFocusChanged: activeFocus && _showMenu()
             onTextChanged: searchTextChanged(text)
         }
 
         DropDownMenu {
-            anchors.top: searchField.bottom
             id: menu
-            width: searchField.width
-            z: 999 // Menu must be above any component.
 
-            Keys.onEscapePressed: hideMenu()
-        }
+            anchors.top: searchField.bottom
+            width: searchField.width
+            z: Constants.zPopup
 
-        DropShadow {
-            anchors.fill: searchField
-            color: "#80000000"
-            horizontalOffset: 2
-            id: shadow
-            radius: 8.0
-            samples: 15
-            source: searchField
-            verticalOffset: 2
-            visible: false
+            Keys.onEscapePressed: _hideMenu()
         }
 
         InvertedMouseArea {
@@ -74,7 +66,15 @@ Item {
             parent: parent
             width: parent.width
 
-            onPressed: hideMenu()
+            onPressed: _hideMenu()
+        }
+
+        PopupShadow {
+            id: shadow
+
+            anchors.fill: searchField
+            source: searchField
+            visible: false
         }
     }
 }

tests/ui/components/view/ScrollableListView.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import 'qrc:/ui/components/scrollBar'
+
+// ===================================================================
+
+ListView {
+    ScrollBar.vertical: ForceScrollBar { }
+    boundsBehavior: Flickable.StopAtBounds
+    clip: true
+    highlightRangeMode: ListView.ApplyRange
+    spacing: 0
+}

tests/ui/style/components/Collapse.qml

@@ -6,7 +6,7 @@ QtObject {
     property int iconSize: 32
     property string icon: 'collapse'
 
-    property var background: Rectangle {
+    property Rectangle background: Rectangle {
         color: 'transparent'
     }
 }

tests/ui/style/components/Dialog.qml

@@ -11,7 +11,7 @@ QtObject {
         property int topMargin: 15
     }
 
-    property QtObject confirm: QtObject {
+    property QtObject confirmDialog: QtObject {
         property int height: 150
         property int width: 370
     }

tests/ui/style/components/Popup.qml

+pragma Singleton
+import QtQuick 2.7
+
+import 'qrc:/ui/style/global'
+
+QtObject {
+    property QtObject shadow: QtObject {
+        property double radius: 8.0
+        property int horizontalOffset: 0
+        property int samples: 15
+        property int verticalOffset: 2
+        property string color: Colors.a
+    }
+}

tests/ui/style/components/SearchBox.qml

+pragma Singleton
+import QtQuick 2.7
+
+import 'qrc:/ui/style/global'
+
+QtObject {
+    property string shadowColor: Colors.a
+
+    property Rectangle searchFieldBackground: Rectangle {
+        implicitHeight: 30
+    }
+}

tests/ui/style/components/qmldir

+# See: https://wiki.qt.io/Qml_Styling
+
+module Style
+
+singleton CollapseStyle 1.0 Collapse.qml
+singleton DialogStyle 1.0 Dialog.qml
+singleton PopupStyle 1.0 Popup.qml
+singleton SearchBoxStyle 1.0 SearchBox.qml

tests/ui/style/global/Colors.qml

+pragma Singleton
+import QtQuick 2.7
+
+QtObject {
+    property string a: '#800000'
+}

tests/ui/style/qmldir → tests/ui/style/global/qmldir

@@ -2,7 +2,5 @@
 
 module Style
 
+singleton Colors 1.0 Colors.qml
 singleton Constants 1.0 Constants.qml
-
-singleton CollapseStyle 1.0 components/Collapse.qml
-singleton DialogStyle 1.0 components/Dialog.qml