Wearable: utilize the styling system

Change-Id: I6b7068c0416cdd16a98752241f6c3105652c9c08
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

19 files changed, 70 insertions, 66 deletions

diff --git a/examples/quickcontrols2/wearable/qml/Alarms/AlarmsMain.qml b/examples/quickcontrols2/wearable/qml/Alarms/AlarmsMain.qml
index 774cc50b..bac1ca87 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/AlarmsMain.qml
+++ b/examples/quickcontrols2/wearable/qml/Alarms/AlarmsMain.qml
@@ -50,7 +50,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.0 as QQC2
-import "../Common"
+import "../Style"
 import "alarms.js" as AlarmData
 
 Item {
@@ -81,7 +81,7 @@ Item {
                         anchors.right: parent.right
                         anchors.rightMargin: 40
                         height: 30
-                        WSwitch {
+                        QQC2.Switch {
                             id: alarmsPage1State
                             checked: AlarmData.weekdaysAlarmDefaultState()
                         }
@@ -123,7 +123,7 @@ Item {
                         anchors.right: parent.right
                         anchors.rightMargin: 40
                         height: 30
-                        WSwitch {
+                        QQC2.Switch {
                             id: alarmsPage2State
                             checked: AlarmData.weekendAlarmDefaultState()
                         }
diff --git a/examples/quickcontrols2/wearable/qml/Common/qmldir b/examples/quickcontrols2/wearable/qml/Common/qmldir
deleted file mode 100644
index 77a4175c..00000000
--- a/examples/quickcontrols2/wearable/qml/Common/qmldir
+++ /dev/null
@@ -1,3 +0,0 @@
-singleton UIStyle 1.0 UIStyle.qml
-WSlider 1.0 WSlider.qml
-WSwitch 1.0 WSwitch.qml
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/FitnessMain.qml b/examples/quickcontrols2/wearable/qml/Fitness/FitnessMain.qml
index 0e0752dd..59ac0925 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/FitnessMain.qml
+++ b/examples/quickcontrols2/wearable/qml/Fitness/FitnessMain.qml
@@ -50,7 +50,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.0 as QQ2
-import "../Common"
+import "../Style"
 import "fitness.js" as FitnessData
 
 Item {
diff --git a/examples/quickcontrols2/wearable/qml/LauncherMain.qml b/examples/quickcontrols2/wearable/qml/LauncherMain.qml
index d7afd1fe..148701ec 100644
--- a/examples/quickcontrols2/wearable/qml/LauncherMain.qml
+++ b/examples/quickcontrols2/wearable/qml/LauncherMain.qml
@@ -52,7 +52,7 @@ import QtQuick 2.7
 import "WatchFace"
 import "Fitness"
 import "Navigation"
-import "Common"
+import "Style"
 
 Item {
     Item {
diff --git a/examples/quickcontrols2/wearable/qml/MainContainer.qml b/examples/quickcontrols2/wearable/qml/MainContainer.qml
index 1408bdc7..fc3a9a39 100644
--- a/examples/quickcontrols2/wearable/qml/MainContainer.qml
+++ b/examples/quickcontrols2/wearable/qml/MainContainer.qml
@@ -55,7 +55,7 @@ import QtQml.StateMachine 1.0 as DeclSM
 import "WatchFace"
 import "Fitness"
 import "Navigation"
-import "Common"
+import "Style"
 
 Item {
     Image {
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/NavigationMain.qml b/examples/quickcontrols2/wearable/qml/Navigation/NavigationMain.qml
index 37d9c0f2..bd7f4455 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/NavigationMain.qml
+++ b/examples/quickcontrols2/wearable/qml/Navigation/NavigationMain.qml
@@ -50,7 +50,7 @@
 
 import QtQuick 2.7
 import QtQuick.Layouts 1.3
-import "../Common"
+import "../Style"
 import "navigation.js" as NavigationData
 
 Item {
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml b/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml
index 2b15cd96..80e6898a 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml
+++ b/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 import QtQuick 2.7
-import "../Common"
+import "../Style"
 
 Rectangle {
     color: UIStyle.colorQtGray8
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/NotificationsMain.qml b/examples/quickcontrols2/wearable/qml/Notifications/NotificationsMain.qml
index 93f0b010..da829707 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/NotificationsMain.qml
+++ b/examples/quickcontrols2/wearable/qml/Notifications/NotificationsMain.qml
@@ -50,7 +50,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.0 as QQC2
-import "../Common"
+import "../Style"
 import "notifications.js" as NotificationData
 
 Item {
diff --git a/examples/quickcontrols2/wearable/qml/Settings/SettingsMain.qml b/examples/quickcontrols2/wearable/qml/Settings/SettingsMain.qml
index 67a84ad1..45a050c9 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/SettingsMain.qml
+++ b/examples/quickcontrols2/wearable/qml/Settings/SettingsMain.qml
@@ -50,7 +50,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.0 as QQC2
-import "../Common"
+import "../Style"
 
 Item {
     Item {
@@ -86,7 +86,7 @@ Item {
                             width: 64
                             source: "../../images/settings/bluetooth.png"
                         }
-                        WSwitch {
+                        QQC2.Switch {
                             id: bluetoothSwitch
                             anchors.verticalCenter: parent.verticalCenter
                             checked: settingsData.bluetooth.state
@@ -100,7 +100,7 @@ Item {
                             width: 64
                             source: "../../images/settings/wifi.png"
                         }
-                        WSwitch {
+                        QQC2.Switch {
                             id: wirelessSwitch
                             anchors.verticalCenter: parent.verticalCenter
                             checked: settingsData.wireless.state
@@ -123,7 +123,7 @@ Item {
                             width: 64
                             source: "../../images/settings/brightness.png"
                         }
-                        WSlider {
+                        QQC2.Slider {
                             id: brightnessSlider
                             anchors.horizontalCenter: parent.horizontalCenter
                             value: settingsData.brightness.value
@@ -140,7 +140,7 @@ Item {
                             width: 64
                             source: "../../images/settings/contrast.png"
                         }
-                        WSlider {
+                        QQC2.Slider {
                             id: contrastSlider
                             anchors.horizontalCenter: parent.horizontalCenter
                             value: settingsData.contrast.value
diff --git a/examples/quickcontrols2/wearable/qml/Common/WSlider.qml b/examples/quickcontrols2/wearable/qml/Style/Slider.qml
index d8eae3b0..86f28abe 100644
--- a/examples/quickcontrols2/wearable/qml/Common/WSlider.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/Slider.qml
@@ -49,19 +49,29 @@
 ****************************************************************************/
 
 import QtQuick 2.7
-import QtQuick.Controls 2.0
+import QtQuick.Templates 2.0 as T
 import "."
 
-Slider {
+T.Slider {
     id: control
 
+    implicitWidth: 200
+    implicitHeight: 26
+
+    handle: Rectangle {
+        x: control.visualPosition * (control.width - width)
+        y: (control.height - height) / 2
+        width: 20
+        height: 15
+
+        radius: 5
+        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
+        border.color: UIStyle.colorQtGray7
+    }
+
     background: Rectangle {
-        x: control.leftPadding
-        y: control.topPadding + control.availableHeight / 2 - height / 2
-        implicitWidth: 200
-        implicitHeight: 4
-        width: control.availableWidth
-        height: implicitHeight
+        y: (control.height - height) / 2
+        height: 4
         radius: 2
         color: UIStyle.colorQtGray3
 
@@ -72,16 +82,5 @@ Slider {
             radius: 2
         }
     }
-
-    handle: Rectangle {
-        x: control.leftPadding
-            + control.visualPosition
-            * (control.availableWidth - width)
-        y: control.topPadding + control.availableHeight / 2 - height / 2
-        implicitWidth: 20
-        implicitHeight: 15
-        radius: 5
-        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
-        border.color: UIStyle.colorQtGray7
-    }
 }
+
diff --git a/examples/quickcontrols2/wearable/qml/Common/WSwitch.qml b/examples/quickcontrols2/wearable/qml/Style/Switch.qml
index 33a2c15b..a1dad07a 100644
--- a/examples/quickcontrols2/wearable/qml/Common/WSwitch.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/Switch.qml
@@ -49,34 +49,38 @@
 ****************************************************************************/
 
 import QtQuick 2.7
-import QtQuick.Controls 2.0
+import QtQuick.Templates 2.0 as T
 import "."
 
-Switch {
+T.Switch {
     id: control
 
+    implicitWidth: 48
+    implicitHeight: 26
+
     indicator: Rectangle {
-        implicitWidth: 48
-        implicitHeight: 26
-        x: control.leftPadding
-        y: parent.height / 2 - height / 2
+        x: control.visualPosition * (control.width - width)
+        y: (control.height - height) / 2
+        width: 26
+        height: 26
+
         radius: 13
-        color: control.checked ? UIStyle.colorQtAuxGreen2 : "#E6173D"
-        border.color: control.checked ?
-                        UIStyle.colorQtAuxGreen2
-                        : UIStyle.colorQtGray6
+        color: control.down ? UIStyle.colorQtGray6 : UIStyle.colorQtGray10
+        border.color: !control.checked ? "#999999"
+                                       : (control.down ? UIStyle.colorQtAuxGreen2
+                                                       : UIStyle.colorQtAuxGreen1)
 
-        Rectangle {
-            x: control.checked ? parent.width - width : 0
-            width: 26
-            height: 26
-            radius: 13
-            color: control.down ? UIStyle.colorQtGray6 : UIStyle.colorQtGray10
-            border.color:
-                control.checked ?
-                (control.down ? UIStyle.colorQtAuxGreen2
-                                : UIStyle.colorQtAuxGreen1)
-                : "#999999"
+        Behavior on x {
+            enabled: !control.pressed
+            SmoothedAnimation { velocity: 200 }
         }
     }
+
+    background: Rectangle {
+        radius: 13
+        color: control.checked ? UIStyle.colorQtAuxGreen2 : "#E6173D"
+        border.color: control.checked ? UIStyle.colorQtAuxGreen2
+                                      : UIStyle.colorQtGray6
+    }
 }
+
diff --git a/examples/quickcontrols2/wearable/qml/Common/UIStyle.qml b/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
index e6ff6f6b..e6ff6f6b 100644
--- a/examples/quickcontrols2/wearable/qml/Common/UIStyle.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
diff --git a/examples/quickcontrols2/wearable/qml/Style/qmldir b/examples/quickcontrols2/wearable/qml/Style/qmldir
new file mode 100644
index 00000000..a04072be
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Style/qmldir
@@ -0,0 +1 @@
+singleton UIStyle 1.0 UIStyle.qml
diff --git a/examples/quickcontrols2/wearable/qml/WatchFace/Clock.qml b/examples/quickcontrols2/wearable/qml/WatchFace/Clock.qml
index 06446553..545c1b6e 100644
--- a/examples/quickcontrols2/wearable/qml/WatchFace/Clock.qml
+++ b/examples/quickcontrols2/wearable/qml/WatchFace/Clock.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 import QtQuick 2.7
-import "../Common"
+import "../Style"
 
 Item {
     id: clock
diff --git a/examples/quickcontrols2/wearable/qml/WatchFace/WatchFaceMain.qml b/examples/quickcontrols2/wearable/qml/WatchFace/WatchFaceMain.qml
index d65ca798..33e6dcfb 100644
--- a/examples/quickcontrols2/wearable/qml/WatchFace/WatchFaceMain.qml
+++ b/examples/quickcontrols2/wearable/qml/WatchFace/WatchFaceMain.qml
@@ -50,7 +50,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.0 as QQC2
-import "../Common"
+import "../Style"
 
 Item {
     QQC2.SwipeView {
diff --git a/examples/quickcontrols2/wearable/qml/Weather/WeatherMain.qml b/examples/quickcontrols2/wearable/qml/Weather/WeatherMain.qml
index 089f5293..b66a149b 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/WeatherMain.qml
+++ b/examples/quickcontrols2/wearable/qml/Weather/WeatherMain.qml
@@ -50,7 +50,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.0 as QQC2
-import "../Common"
+import "../Style"
 import "weather.js" as WeatherData
 
 Item {
diff --git a/examples/quickcontrols2/wearable/wearable.cpp b/examples/quickcontrols2/wearable/wearable.cpp
index dec6e9c2..5f96caf4 100644
--- a/examples/quickcontrols2/wearable/wearable.cpp
+++ b/examples/quickcontrols2/wearable/wearable.cpp
@@ -50,11 +50,14 @@
 
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
+#include <QQuickStyle>
 
 int main(int argc, char *argv[])
 {
     QGuiApplication app(argc, argv);
 
+    QQuickStyle::setStyle(QStringLiteral("qrc:/qml/Style"));
+
     QQmlApplicationEngine engine;
     engine.load(QUrl(QStringLiteral("qrc:/wearable.qml")));
 
diff --git a/examples/quickcontrols2/wearable/wearable.qml b/examples/quickcontrols2/wearable/wearable.qml
index 95916ebc..b1ba2c2a 100644
--- a/examples/quickcontrols2/wearable/wearable.qml
+++ b/examples/quickcontrols2/wearable/wearable.qml
@@ -51,7 +51,7 @@
 import QtQuick 2.7
 import QtQuick.Window 2.0
 import "qml"
-import "qml/Common"
+import "qml/Style"
 
 Window {
     id: rootWindow
diff --git a/examples/quickcontrols2/wearable/wearable.qrc b/examples/quickcontrols2/wearable/wearable.qrc
index 0621f4d4..7c88cafa 100644
--- a/examples/quickcontrols2/wearable/wearable.qrc
+++ b/examples/quickcontrols2/wearable/wearable.qrc
@@ -3,10 +3,6 @@
         <file>wearable.qml</file>
         <file>qml/Alarms/alarms.js</file>
         <file>qml/Alarms/AlarmsMain.qml</file>
-        <file>qml/Common/qmldir</file>
-        <file>qml/Common/UIStyle.qml</file>
-        <file>qml/Common/WSlider.qml</file>
-        <file>qml/Common/WSwitch.qml</file>
         <file>qml/Fitness/fitness.js</file>
         <file>qml/Fitness/FitnessMain.qml</file>
         <file>qml/LauncherMain.qml</file>
@@ -19,6 +15,10 @@
         <file>qml/Notifications/NotificationsMain.qml</file>
         <file>qml/Settings/SettingsData.qml</file>
         <file>qml/Settings/SettingsMain.qml</file>
+        <file>qml/Style/qmldir</file>
+        <file>qml/Style/UIStyle.qml</file>
+        <file>qml/Style/Slider.qml</file>
+        <file>qml/Style/Switch.qml</file>
         <file>qml/WatchFace/Clock.qml</file>
         <file>qml/WatchFace/WatchFaceMain.qml</file>
         <file>qml/Weather/weather.js</file>