qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Wearable: utilize the styling system 

Change-Id: I6b7068c0416cdd16a98752241f6c3105652c9c08
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
This commit is contained in:
J-P Nurmi 2017-03-13 08:42:48 +01:00
parent bb66378c0d
commit b2f0c3ff02
19 changed files with 72 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/quickcontrols2/wearable/qml/Alarms/AlarmsMain.qml
View File

@ -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()
}

3
examples/quickcontrols2/wearable/qml/Common/qmldir
View File

@ -1,3 +0,0 @@
singleton UIStyle 1.0 UIStyle.qml
WSlider 1.0 WSlider.qml
WSwitch 1.0 WSwitch.qml

2
examples/quickcontrols2/wearable/qml/Fitness/FitnessMain.qml
View File

@ -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 {

2
examples/quickcontrols2/wearable/qml/LauncherMain.qml
View File

@ -52,7 +52,7 @@ import QtQuick 2.7
import "WatchFace"
import "Fitness"
import "Navigation"
import "Common"
import "Style"
Item {
Item {

2
examples/quickcontrols2/wearable/qml/MainContainer.qml
View File

@ -55,7 +55,7 @@ import QtQml.StateMachine 1.0 as DeclSM
import "WatchFace"
import "Fitness"
import "Navigation"
import "Common"
import "Style"
Item {
Image {

2
examples/quickcontrols2/wearable/qml/Navigation/NavigationMain.qml
View File

@ -50,7 +50,7 @@
import QtQuick 2.7
import QtQuick.Layouts 1.3
import "../Common"
import "../Style"
import "navigation.js" as NavigationData
Item {

2
examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml
View File

@ -49,7 +49,7 @@
****************************************************************************/
import QtQuick 2.7
import "../Common"
import "../Style"
Rectangle {
color: UIStyle.colorQtGray8

2
examples/quickcontrols2/wearable/qml/Notifications/NotificationsMain.qml
View File

@ -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 {

10
examples/quickcontrols2/wearable/qml/Settings/SettingsMain.qml
View File

@ -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

39
examples/quickcontrols2/wearable/qml/Common/WSlider.qml → examples/quickcontrols2/wearable/qml/Style/Slider.qml
View File

@ -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
}
}

50
examples/quickcontrols2/wearable/qml/Common/WSwitch.qml → examples/quickcontrols2/wearable/qml/Style/Switch.qml
View File

@ -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
indicator: Rectangle {
implicitWidth: 48
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 13
color: control.checked ? UIStyle.colorQtAuxGreen2 : "#E6173D"
border.color: control.checked ?
UIStyle.colorQtAuxGreen2
: UIStyle.colorQtGray6
implicitWidth: 48
implicitHeight: 26
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"
indicator: Rectangle {
x: control.visualPosition * (control.width - width)
y: (control.height - height) / 2
width: 26
height: 26
radius: 13
color: control.down ? UIStyle.colorQtGray6 : UIStyle.colorQtGray10
border.color: !control.checked ? "#999999"
: (control.down ? UIStyle.colorQtAuxGreen2
: UIStyle.colorQtAuxGreen1)
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
}
}

0
examples/quickcontrols2/wearable/qml/Common/UIStyle.qml → examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
View File

1
examples/quickcontrols2/wearable/qml/Style/qmldir Normal file
View File

@ -0,0 +1 @@
singleton UIStyle 1.0 UIStyle.qml

2
examples/quickcontrols2/wearable/qml/WatchFace/Clock.qml
View File

@ -49,7 +49,7 @@
****************************************************************************/
import QtQuick 2.7
import "../Common"
import "../Style"
Item {
id: clock

2
examples/quickcontrols2/wearable/qml/WatchFace/WatchFaceMain.qml
View File

@ -50,7 +50,7 @@
import QtQuick 2.7
import QtQuick.Controls 2.0 as QQC2
import "../Common"
import "../Style"
Item {
QQC2.SwipeView {

2
examples/quickcontrols2/wearable/qml/Weather/WeatherMain.qml
View File

@ -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 {

3
examples/quickcontrols2/wearable/wearable.cpp
View File

@ -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")));

2
examples/quickcontrols2/wearable/wearable.qml
View File

@ -51,7 +51,7 @@
import QtQuick 2.7
import QtQuick.Window 2.0
import "qml"
import "qml/Common"
import "qml/Style"
Window {
id: rootWindow

8
examples/quickcontrols2/wearable/wearable.qrc
View File

@ -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>