diff options
author | J-P Nurmi <jpnurmi@qt.io> | 2017-03-13 08:42:48 +0100 |
---|---|---|
committer | J-P Nurmi <jpnurmi@qt.io> | 2017-03-13 09:31:41 +0000 |
commit | b2f0c3ff02e2eab13f5204f027edf6a7f1e58bdb (patch) | |
tree | 3e320b62baa537b450db89748561cb8ea4e3cb14 /examples | |
parent | bb66378c0d37098444ffa80ec5e9a87dfa5ab1cf (diff) |
Wearable: utilize the styling system
Change-Id: I6b7068c0416cdd16a98752241f6c3105652c9c08
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'examples')
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> |