Implement more of default style design

Change-Id: Ieaa2fa1b876d75f94f48a7fce0c47c166b969d57
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

7 files changed, 32 insertions, 25 deletions

diff --git a/src/imports/controls/CheckBox.qml b/src/imports/controls/CheckBox.qml
index 5eb7696e..5bfddbf3 100644
--- a/src/imports/controls/CheckBox.qml
+++ b/src/imports/controls/CheckBox.qml
@@ -51,6 +51,7 @@ T.CheckBox {
 
     padding: 6
     spacing: 6
+    opacity: enabled ? 1 : 0.2
 
     //! [indicator]
     indicator: Rectangle {
@@ -59,15 +60,14 @@ T.CheckBox {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
 
-        color: control.pressed ? "#bdbebf" : "#ffffff"
-        border.color: control.pressed ? "#26282a" : (control.checked ? "#353637" : "#bdbebf")
+        color: control.enabled ? (control.pressed ? "#bdbebf" : "#ffffff") : "#353637"
+        border.color: control.enabled ? (control.pressed ? "#26282a" : "#353637") : "transparent"
 
         Image {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             source: "qrc:/images/check.png"
             visible: control.checked
-//            opacity: control.tristate && control.checkState === Qt.PartiallyChecked ? 0.5 : 1.0
         }
     }
     //! [indicator]
@@ -81,7 +81,7 @@ T.CheckBox {
 
         text: control.text
         font: control.font
-        color: control.enabled ? "#26282a" : "#bdbebf"
+        color: control.pressed ? "#26282a" : "#353637"
         elide: Text.ElideRight
         visible: control.text
         horizontalAlignment: Text.AlignLeft
diff --git a/src/imports/controls/Dial.qml b/src/imports/controls/Dial.qml
index 378a9339..65a2c2f1 100644
--- a/src/imports/controls/Dial.qml
+++ b/src/imports/controls/Dial.qml
@@ -35,33 +35,40 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.controls 1.0
 import Qt.labs.templates 1.0 as T
 
 T.Dial {
     id: control
 
-    implicitWidth: 100
-    implicitHeight: 100
+    implicitWidth: 184
+    implicitHeight: 184
 
     //! [background]
     background: Rectangle {
-        color: control.Theme.backgroundColor
         radius: width / 2
+        border.color: "#353637"
 
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
+        Text {
+            text: control.position.toFixed(1)
+            color: "#353637"
+            font.pixelSize: 60
+            x: parent.width / 2 - width / 2
+            y: parent.height / 2 - height / 2
+        }
     }
     //! [background]
 
     //! [handle]
-    handle: Rectangle {
+    handle: Image {
         id: handleItem
-
         x: background.width / 2 - handle.width / 2
         y: background.height / 2 - handle.height / 2
+        width: 14
+        height: 10
+        source: "qrc:/images/dial-indicator.png"
         transform: [
             Translate {
-                y: -background.height * 0.35
+                y: -background.height * 0.4
             },
             Rotation {
                 angle: control.angle
@@ -69,12 +76,6 @@ T.Dial {
                 origin.y: handle.height / 2
             }
         ]
-        implicitWidth: 20
-        implicitHeight: 20
-        radius: width / 2
-        border.width: control.activeFocus ? 2 : 1
-        border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor
-        color: control.Theme.baseColor
     }
     //! [handle]
 }
diff --git a/src/imports/controls/RadioButton.qml b/src/imports/controls/RadioButton.qml
index 66c88118..e41d2d11 100644
--- a/src/imports/controls/RadioButton.qml
+++ b/src/imports/controls/RadioButton.qml
@@ -52,6 +52,7 @@ T.RadioButton {
 
     padding: 6
     spacing: 6
+    opacity: enabled ? 1 : 0.2
 
     //! [indicator]
     indicator: Rectangle {
@@ -62,7 +63,7 @@ T.RadioButton {
 
         radius: width / 2
         border.width: 1
-        border.color: control.pressed ? "#26282a" : control.enabled && control.checked ? "#353637" : "#bdbebf"
+        border.color: (control.pressed ? "#26282a" : "#353637")
         color: control.pressed ? "#bdbebf" : "#ffffff"
 
         Rectangle {
@@ -71,7 +72,7 @@ T.RadioButton {
             width: 20
             height: 20
             radius: width / 2
-            color: control.enabled ? "#353637" : "#bdbebf"
+            color: control.pressed ? "#26282a" : "#353637"
             visible: control.checked
         }
     }
@@ -86,7 +87,7 @@ T.RadioButton {
 
         text: control.text
         font: control.font
-        color: control.enabled ? control.Theme.textColor : control.Theme.disabledColor
+        color: control.pressed ? "#26282a" : "#353637"
         elide: Text.ElideRight
         visible: control.text
         horizontalAlignment: Text.AlignLeft
diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml
index a8b2dbe5..6a157ba9 100644
--- a/src/imports/controls/SpinBox.qml
+++ b/src/imports/controls/SpinBox.qml
@@ -52,6 +52,7 @@ T.SpinBox {
     padding: 6
     leftPadding: 6 + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
     rightPadding: 6 + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    opacity: control.enabled ? 1 : 0.3
 
     //! [validator]
     validator: IntValidator {
diff --git a/src/imports/controls/TextField.qml b/src/imports/controls/TextField.qml
index 25e1461d..7b778b0e 100644
--- a/src/imports/controls/TextField.qml
+++ b/src/imports/controls/TextField.qml
@@ -46,10 +46,12 @@ T.TextField {
                              placeholder.implicitHeight + topPadding + bottomPadding)
 
     padding: 6
+    leftPadding: 10
 
-//    color: enabled ? "" : "#bdbebf"
-//    selectionColor: Theme.selectionColor
-//    selectedTextColor: Theme.selectedTextColor
+    opacity: enabled ? 1 : 0.2
+    color: "#353637"
+    selectionColor: "#fddd5c"
+    selectedTextColor: color
     verticalAlignment: TextInput.AlignVCenter
 
     Text {
@@ -73,7 +75,8 @@ T.TextField {
         implicitWidth: 200
         implicitHeight: 40
 //        border.width: control.activeFocus ? 2 : 1
-        border.color: "#bdbebf"
+        color: control.enabled ? "transparent" : "#353637"
+        border.color: control.enabled ? "#bdbebf" : "transparent"
     }
     //! [background]
 }
diff --git a/src/imports/controls/images/dial-indicator.png b/src/imports/controls/images/dial-indicator.png
new file mode 100644
index 00000000..c5211cda
--- /dev/null
+++ b/src/imports/controls/images/dial-indicator.png
diff --git a/src/imports/controls/qtlabscontrolsplugin.qrc b/src/imports/controls/qtlabscontrolsplugin.qrc
index d2dc4f4c..ed51e07b 100644
--- a/src/imports/controls/qtlabscontrolsplugin.qrc
+++ b/src/imports/controls/qtlabscontrolsplugin.qrc
@@ -10,5 +10,6 @@
         <file>images/check@2x.png</file>
         <file>images/check@3x.png</file>
         <file>images/check@4x.png</file>
+        <file>images/dial-indicator.png</file>
     </qresource>
 </RCC>