Implement more of default style design

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

8 files changed, 236 insertions, 116 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>
diff --git a/tests/manual/testbench/main.qml b/tests/manual/testbench/main.qml
index d7b013c9..2a09b541 100644
--- a/tests/manual/testbench/main.qml
+++ b/tests/manual/testbench/main.qml
@@ -51,12 +51,6 @@ ApplicationWindow {
     width: 750
     height: 1000
 
-    Theme.backgroundColor: themeSwitch.checked ? "#444" : "#fff"
-    Theme.frameColor: themeSwitch.checked ? "#666" : "#ccc"
-    Theme.textColor: themeSwitch.checked ? "#eee" : "#111"
-    Theme.pressColor: themeSwitch.checked ? "#33ffffff" : "#33333333"
-    Theme.baseColor: themeSwitch.checked ? "#444" : "#eee"
-
     Material.theme: themeSwitch.checked ? Material.Dark : Material.Light
     Universal.theme: themeSwitch.checked ? Universal.Dark : Universal.Light
 
@@ -126,22 +120,58 @@ ApplicationWindow {
                     pressed: true
                 }
                 Button {
+                    text: "Checked"
+                    checked: true
+                }
+                Button {
+                    text: "CH + PR"
+                    checked: true
+                    pressed: true
+                }
+                Button {
                     text: "Disabled"
                     enabled: false
                 }
                 Button {
-                    text: "Highlighted"
+                    text: "CH + DIS"
+                    enabled: false
+                    checked: true
+                }
+            }
+
+            RowLayout {
+                spacing: window.controlSpacing
+
+                Button {
+                    text: "HI"
                     highlighted: true
                 }
                 Button {
-                    text: "Pressed + HL"
+                    text: "HI + PR"
+                    highlighted: true
                     pressed: true
+                }
+                Button {
+                    text: "HI + CH"
                     highlighted: true
+                    checked: true
+                }
+                Button {
+                    text: "HI+CH+PR"
+                    highlighted: true
+                    pressed: true
+                    checked: true
                 }
                 Button {
-                    text: "HL + Disabled"
+                    text: "HI + DIS"
+                    highlighted: true
                     enabled: false
+                }
+                Button {
+                    text: "HI+CH+DIS"
                     highlighted: true
+                    enabled: false
+                    checked: true
                 }
             }
 
@@ -158,7 +188,7 @@ ApplicationWindow {
                     checked: true
                 }
                 CheckBox {
-                    text: "Checked + Pressed"
+                    text: "CH + PR"
                     checked: true
                     pressed: true
                 }
@@ -166,6 +196,11 @@ ApplicationWindow {
                     text: "Disabled"
                     enabled: false
                 }
+                CheckBox {
+                    text: "CH + DIS"
+                    checked: true
+                    enabled: false
+                }
             }
 
             RowLayout {
@@ -181,7 +216,7 @@ ApplicationWindow {
                     checked: true
                 }
                 RadioButton {
-                    text: "Checked + Pressed"
+                    text: "CH + PR"
                     checked: true
                     pressed: true
                 }
@@ -189,6 +224,11 @@ ApplicationWindow {
                     text: "Disabled"
                     enabled: false
                 }
+                RadioButton {
+                    text: "CH + DIS"
+                    checked: true
+                    enabled: false
+                }
             }
 
             RowLayout {
@@ -204,7 +244,7 @@ ApplicationWindow {
                     checked: true
                 }
                 Switch {
-                    text: "Checked + Pressed"
+                    text: "CH + PR"
                     checked: true
                     pressed: true
                 }
@@ -260,42 +300,97 @@ ApplicationWindow {
             }
 
             RowLayout {
-                TextArea {
-                    text: "Normal"
+                Item {
+                    implicitWidth: normalGroupBox.width
+                    implicitHeight: normalTextArea.implicitHeight
+
+                    TextArea {
+                        id: normalTextArea
+                        text: "Normal"
+                    }
                 }
-                TextArea {
-                    text: "Disabled"
-                    enabled: false
+                Item {
+                    implicitWidth: normalGroupBox.width
+                    implicitHeight: normalTextArea.implicitHeight
+
+                    TextArea {
+                        text: "Placeholder"
+                    }
+                }
+                Item {
+                    implicitWidth: normalGroupBox.width
+                    implicitHeight: normalTextArea.implicitHeight
+
+                    TextArea {
+                        text: "Disabled"
+                        enabled: false
+                    }
                 }
             }
 
             RowLayout {
-                TextField {
-                    text: "Normal"
+                Item {
+                    implicitWidth: normalGroupBox.implicitWidth
+                    implicitHeight: normalTextField.implicitHeight
+
+                    TextField {
+                        id: normalTextField
+                        text: "Normal"
+                    }
                 }
-                TextField {
-                    text: "Disabled"
-                    enabled: false
+                Item {
+                    implicitWidth: normalGroupBox.implicitWidth
+                    implicitHeight: normalTextField.implicitHeight
+
+                    TextField {
+                        placeholderText: "Placeholder"
+                    }
+                }
+                Item {
+                    implicitWidth: normalGroupBox.implicitWidth
+                    implicitHeight: normalTextField.implicitHeight
+
+                    TextField {
+                        text: "Disabled"
+                        enabled: false
+                    }
                 }
             }
 
             RowLayout {
-                SpinBox {
+                Item {
+                    implicitWidth: normalGroupBox.implicitWidth
+                    implicitHeight: normalSpinBox.implicitHeight
+
+                    SpinBox {
+                        id: normalSpinBox
+                    }
                 }
-                SpinBox {
-                    up.pressed: true
+                Item {
+                    implicitWidth: normalGroupBox.implicitWidth
+                    implicitHeight: normalSpinBox.implicitHeight
+
+                    SpinBox {
+                        up.pressed: true
+                    }
                 }
-                SpinBox {
-                    enabled: false
+                Item {
+                    implicitWidth: normalGroupBox.implicitWidth
+                    implicitHeight: normalSpinBox.implicitHeight
+
+                    SpinBox {
+                        enabled: false
+                    }
                 }
             }
 
             RowLayout {
                 GroupBox {
+                    id: normalGroupBox
                     title: "Normal"
 
                     Item {
-                        implicitWidth: 100
+                        implicitWidth: 200
                         implicitHeight: 100
 
                         BusyIndicator {
@@ -308,7 +403,7 @@ ApplicationWindow {
                     title: "Disabled"
 
                     Item {
-                        implicitWidth: 100
+                        implicitWidth: 200
                         implicitHeight: 100
 
                         BusyIndicator {
@@ -316,68 +411,90 @@ ApplicationWindow {
                         }
                     }
                 }
-            }
+                GroupBox {
+                    enabled: false
+                    title: "."
+                    label.visible: false
 
-            RowLayout {
-                Frame {
-                    Tumbler {
-                        model: 5
-                        implicitWidth: 100
-                        implicitHeight: 100
-                    }
-                }
-                Frame {
-                    Tumbler {
-                        model: 5
-                        implicitWidth: 100
+                    Item {
+                        implicitWidth: 200
                         implicitHeight: 100
-                        enabled: false
+
+                        PageIndicator {
+                            count: 5
+                            enabled: false
+                            anchors.bottom: parent.bottom
+                            anchors.horizontalCenter: parent.horizontalCenter
+                        }
                     }
                 }
             }
 
             RowLayout {
                 Frame {
-                    Layout.preferredWidth: 100
-                    Layout.preferredHeight: 100
+                    id: scrollBarFrame
 
-                    ScrollBar {
-                        size: 0.3
-                        position: 0.2
-                        active: true
-                        orientation: Qt.Vertical
-                        height: parent.height
-                        anchors.right: parent.right
+                    Item {
+                        implicitWidth: 200
+                        implicitHeight: 100
+
+                        Label {
+                            text: "Normal"
+                            anchors.centerIn: parent
+                        }
+
+                        ScrollBar {
+                            size: 0.3
+                            position: 0.2
+                            active: true
+                            orientation: Qt.Vertical
+                            height: parent.height
+                            anchors.right: parent.right
+                        }
                     }
                 }
 
                 Frame {
-                    Layout.preferredWidth: 100
-                    Layout.preferredHeight: 100
+                    Item {
+                        implicitWidth: 200
+                        implicitHeight: 100
 
-                    ScrollBar {
-                        size: 0.3
-                        position: 0.2
-                        active: true
-                        orientation: Qt.Vertical
-                        height: parent.height
-                        anchors.right: parent.right
-                        pressed: true
+                        Label {
+                            text: "Pressed"
+                            anchors.centerIn: parent
+                        }
+
+                        ScrollBar {
+                            size: 0.3
+                            position: 0.2
+                            active: true
+                            orientation: Qt.Vertical
+                            height: parent.height
+                            anchors.right: parent.right
+                            pressed: true
+                        }
                     }
                 }
 
                 Frame {
-                    Layout.preferredWidth: 100
-                    Layout.preferredHeight: 100
-
-                    ScrollBar {
-                        size: 0.3
-                        position: 0.2
-                        active: true
-                        orientation: Qt.Vertical
-                        height: parent.height
-                        anchors.right: parent.right
+                    Item {
+                        implicitWidth: 200
+                        implicitHeight: 100
                         enabled: false
+
+                        Label {
+                            text: "Disabled"
+                            anchors.centerIn: parent
+                        }
+
+                        ScrollBar {
+                            size: 0.3
+                            position: 0.2
+                            active: true
+                            orientation: Qt.Vertical
+                            height: parent.height
+                            anchors.right: parent.right
+                        }
                     }
                 }
             }
@@ -413,33 +530,29 @@ ApplicationWindow {
                 }
             }
 
-            PageIndicator {
-                count: 5
-                enabled: false
-            }
-
             RowLayout {
-                Dial {
+                Frame {
+                    Tumbler {
+                        model: 5
+                        implicitWidth: 100
+                        implicitHeight: 100
+                    }
                 }
-                Dial {
-                    enabled: false
+                Frame {
+                    Tumbler {
+                        model: 5
+                        implicitWidth: 100
+                        implicitHeight: 100
+                        enabled: false
+                    }
                 }
             }
 
             RowLayout {
-                Frame {
-                    Label {
-                        text: "Normal\nLabel"
-                        horizontalAlignment: Text.AlignHCenter
-                    }
+                Dial {
                 }
-                Frame {
+                Dial {
                     enabled: false
-
-                    Label {
-                        text: "Disabled\nLabel"
-                        horizontalAlignment: Text.AlignHCenter
-                    }
                 }
             }
         }