feat(scrollBar): use style file

tests/resources.qrc

@@ -36,10 +36,11 @@
     <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/components/SearchBox.qml</file>
-    <file>ui/style/components/Popup.qml</file>
+    <file>ui/style/components/DialogStyle.qml</file>
+    <file>ui/style/components/ScrollBarStyle.qml</file>
+    <file>ui/style/components/SearchBoxStyle.qml</file>
+    <file>ui/style/components/CollapseStyle.qml</file>
+    <file>ui/style/components/PopupStyle.qml</file>
     <file>ui/style/global/qmldir</file>
     <file>ui/style/global/Colors.qml</file>
     <file>ui/style/global/Constants.qml</file>

tests/ui/components/popup/DropDownMenu.qml

@@ -12,10 +12,6 @@ Rectangle {
 
     property int maxMenuHeight
 
-    border {
-        color: '#CCCCCC'
-        width: 2
-    }
     implicitHeight: {
         var height = model.count * entryHeight
         return height > maxMenuHeight ? maxMenuHeight : height

tests/ui/components/scrollBar/ForceScrollBar.qml

@@ -1,17 +1,18 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
+import 'qrc:/ui/style/components'
+
 // ===================================================================
 
 ScrollBar {
-    background: Rectangle {
-        color: '#F4F4F4'
-    }
+    background: ScrollBarStyle.background
     contentItem: Rectangle {
-        color: scrollBar.pressed ? '#5E5E5F' : '#C5C5C5'
-        implicitHeight: 100
-        implicitWidth: 8
-        radius: 10
+        color: pressed
+            ? ScrollBarStyle.pressedColor
+            : ScrollBarStyle.color
+        implicitHeight: ScrollBarStyle.contentItem.implicitHeight
+        implicitWidth: ScrollBarStyle.contentItem.implicitWidth
+        radius: ScrollBarStyle.contentItem.radius
     }
-    id: scrollBar
 }

tests/ui/style/components/ScrollBarStyle.qml

@@ -0,0 +1,19 @@
+pragma Singleton
+import QtQuick 2.7
+
+import 'qrc:/ui/style/global'
+
+QtObject {
+    property string color: Colors.c
+    property string pressedColor: Colors.b
+
+    property Rectangle background: Rectangle {
+        color: Colors.d
+    }
+
+    property Rectangle contentItem: Rectangle {
+        implicitHeight: 100
+        implicitWidth: 8
+        radius: 10
+    }
+}

tests/ui/style/components/qmldir

@@ -2,7 +2,8 @@
 
 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
+singleton CollapseStyle 1.0 CollapseStyle.qml
+singleton DialogStyle 1.0 DialogStyle.qml
+singleton PopupStyle 1.0 PopupStyle.qml
+singleton SearchBoxStyle 1.0 SearchBoxStyle.qml
+singleton ScrollBarStyle 1.0 ScrollBarStyle.qml

tests/ui/style/global/Colors.qml

@@ -2,5 +2,8 @@ pragma Singleton
 import QtQuick 2.7
 
 QtObject {
-    property string a: '#800000'
+    property string a: '#808080'
+    property string b: '#5E5E5F'
+    property string c: '#C5C5C5'
+    property string d: '#F4F4F4'
 }