Wearable Demo: make use of the icon support

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

19 files changed, 67 insertions, 30 deletions

diff --git a/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc b/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
index 7d4a6a23..124984c1 100644
--- a/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
+++ b/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
@@ -99,6 +99,21 @@
     \skipto }
     \printuntil /^\}/
 
+    \section1 Icons
+
+    The demo ships a custom icon theme. The icons are bundled into the \c :/icons
+    folder in the application's resources. The \c index.theme file lists the contents
+    of the icon theme:
+
+    \quotefile wearable/icons/wearable/index.theme
+
+    Finally, the icon theme is selected in \c main():
+
+    \snippet wearable/wearable.cpp icons
+
+    The icons are used on the Launcher Page, which is presented below. See
+    \l {Icons in Qt Quick Controls 2} for more details about icons and themes.
+
     \section1 Launcher Page
 
     The application launcher is implemented using a circular PathView in
@@ -116,6 +131,9 @@
     \skipto "Settings"
     \printuntil delegate:
     \dots 8
+    \skipto icon.width
+    \printuntil icon.name
+    \dots 8
     \skipto onClicked:
     \printto path:
     \dots
diff --git a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/alarms.png
index f38b3d4e..f38b3d4e 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/alarms.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/fitness.png
index 80ec43cc..80ec43cc 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/fitness.png
diff --git a/examples/quickcontrols2/wearable/icons/wearable/36x36/navigation.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/navigation.png
new file mode 100644
index 00000000..9b8cb8e6
--- /dev/null
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/navigation.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/notifications.png
index bcbe85ef..bcbe85ef 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/notifications.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/settings.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/settings.png
index 093404f9..093404f9 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/settings.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/settings.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/weather.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/weather.png
index 07bf8187..07bf8187 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/weather.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/weather.png
diff --git a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/worldclock.png
index 91a70493..91a70493 100644
--- a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/worldclock.png
diff --git a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/alarms.png
index ba68519a..ba68519a 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/alarms.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/fitness.png
index 088c15b8..088c15b8 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/fitness.png
diff --git a/examples/quickcontrols2/wearable/icons/wearable/36x36@2/navigation.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/navigation.png
new file mode 100644
index 00000000..8d133abc
--- /dev/null
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/navigation.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/notifications.png
index c3b284ed..c3b284ed 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/notifications.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/settings@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/settings.png
index a24a1df7..a24a1df7 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/settings@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/settings.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/weather@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/weather.png
index 6e4ce2f3..6e4ce2f3 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/weather@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/weather.png
diff --git a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/worldclock.png
index 03abe162..03abe162 100644
--- a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/worldclock.png
diff --git a/examples/quickcontrols2/wearable/icons/wearable/index.theme b/examples/quickcontrols2/wearable/icons/wearable/index.theme
new file mode 100644
index 00000000..da702d4a
--- /dev/null
+++ b/examples/quickcontrols2/wearable/icons/wearable/index.theme
@@ -0,0 +1,14 @@
+[Icon Theme]
+Name=Wearable
+Comment=Qt Quick Controls 2 Wearable Demo Icon Theme
+
+Directories=36x36,36x36@2
+
+[36x36]
+Size=36
+Type=Fixed
+
+[36x36@2]
+Size=36
+Scale=2
+Type=Fixed
diff --git a/examples/quickcontrols2/wearable/qml/LauncherPage.qml b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
index 34f117c4..9d6d9ae9 100644
--- a/examples/quickcontrols2/wearable/qml/LauncherPage.qml
+++ b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 import QtQuick 2.7
-import QtQuick.Controls 2.0 as QQC2
+import QtQuick.Controls 2.1 as QQC2
 import "Style"
 
 PathView {
@@ -68,56 +68,53 @@ PathView {
     model: ListModel {
         ListElement {
             title: qsTr("World Clock")
-            icon: "WorldClock/images/worldclock.png"
+            icon: "worldclock"
             page: "WorldClock/WorldClockPage.qml"
         }
         ListElement {
             title: qsTr("Navigation")
-            icon: "Navigation/images/navigation.png"
+            icon: "navigation"
             page: "Navigation/NavigationPage.qml"
         }
         ListElement {
             title: qsTr("Weather")
-            icon: "Weather/images/weather.png"
+            icon: "weather"
             page: "Weather/WeatherPage.qml"
         }
         ListElement {
             title: qsTr("Fitness")
-            icon: "Fitness/images/fitness.png"
+            icon: "fitness"
             page: "Fitness/FitnessPage.qml"
         }
         ListElement {
             title: qsTr("Notifications")
-            icon: "Notifications/images/notifications.png"
+            icon: "notifications"
             page: "Notifications/NotificationsPage.qml"
         }
         ListElement {
             title: qsTr("Alarm")
-            icon: "Alarms/images/alarms.png"
+            icon: "alarms"
             page: "Alarms/AlarmsPage.qml"
         }
         ListElement {
             title: qsTr("Settings")
-            icon: "Settings/images/settings.png"
+            icon: "settings"
             page: "Settings/SettingsPage.qml"
         }
     }
 
-    delegate: QQC2.AbstractButton {
+    delegate: QQC2.RoundButton {
         width: circularView.itemSize
         height: circularView.itemSize
 
-        text: model.title
+        property string title: model.title
+
+        icon.width: 36
+        icon.height: 36
+        icon.name: model.icon
         opacity: PathView.itemOpacity
         padding: 12
 
-        contentItem: Image {
-            source: model.icon
-            fillMode: Image.Pad
-            sourceSize.width: parent.availableWidth
-            sourceSize.height: parent.availableHeight
-        }
-
         background: Rectangle {
             radius: width / 2
             border.width: 3
@@ -180,7 +177,7 @@ PathView {
 
         visible: currentItem ? currentItem.PathView.itemOpacity === 1.0 : 0
 
-        text: currentItem ? currentItem.text : ""
+        text: currentItem ? currentItem.title : ""
         anchors.centerIn: parent
         anchors.verticalCenterOffset: (circularView.itemSize + height) / 2
 
diff --git a/examples/quickcontrols2/wearable/wearable.cpp b/examples/quickcontrols2/wearable/wearable.cpp
index e6fdad74..e90ec413 100644
--- a/examples/quickcontrols2/wearable/wearable.cpp
+++ b/examples/quickcontrols2/wearable/wearable.cpp
@@ -51,6 +51,7 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 #include <QQuickStyle>
+#include <QIcon>
 
 int main(int argc, char *argv[])
 {
@@ -61,6 +62,10 @@ int main(int argc, char *argv[])
     QQuickStyle::setStyle(QStringLiteral("qrc:/qml/Style"));
     //! [style]
 
+    //! [icons]
+    QIcon::setThemeName(QStringLiteral("wearable"));
+    //! [icons]
+
     QQmlApplicationEngine engine;
     engine.load(QUrl(QStringLiteral("qrc:/wearable.qml")));
 
diff --git a/examples/quickcontrols2/wearable/wearable.qrc b/examples/quickcontrols2/wearable/wearable.qrc
index c8143a18..ea81edc6 100644
--- a/examples/quickcontrols2/wearable/wearable.qrc
+++ b/examples/quickcontrols2/wearable/wearable.qrc
@@ -3,18 +3,29 @@
         <file>wearable.qml</file>
         <file>qml/LauncherPage.qml</file>
         <file>qml/NaviButton.qml</file>
+        <file>icons/wearable/index.theme</file>
+        <file>icons/wearable/36x36/alarms.png</file>
+        <file>icons/wearable/36x36/fitness.png</file>
+        <file>icons/wearable/36x36/navigation.png</file>
+        <file>icons/wearable/36x36/notifications.png</file>
+        <file>icons/wearable/36x36/settings.png</file>
+        <file>icons/wearable/36x36/weather.png</file>
+        <file>icons/wearable/36x36/worldclock.png</file>
+        <file>icons/wearable/36x36@2/alarms.png</file>
+        <file>icons/wearable/36x36@2/fitness.png</file>
+        <file>icons/wearable/36x36@2/navigation.png</file>
+        <file>icons/wearable/36x36@2/notifications.png</file>
+        <file>icons/wearable/36x36@2/settings.png</file>
+        <file>icons/wearable/36x36@2/weather.png</file>
+        <file>icons/wearable/36x36@2/worldclock.png</file>
         <file>images/background.png</file>
         <file>images/back.png</file>
         <file>images/back@2x.png</file>
         <file>images/home.png</file>
         <file>images/home@2x.png</file>
         <file>qml/Alarms/AlarmsPage.qml</file>
-        <file>qml/Alarms/images/alarms.png</file>
-        <file>qml/Alarms/images/alarms@2x.png</file>
         <file>qml/Fitness/fitness.js</file>
         <file>qml/Fitness/FitnessPage.qml</file>
-        <file>qml/Fitness/images/fitness.png</file>
-        <file>qml/Fitness/images/fitness@2x.png</file>
         <file>qml/Fitness/images/man-running.png</file>
         <file>qml/Fitness/images/man-running@2x.png</file>
         <file>qml/Fitness/images/man-walking.png</file>
@@ -45,8 +56,6 @@
         <file>qml/Notifications/images/avatarm@2x.png</file>
         <file>qml/Notifications/images/missedcall.png</file>
         <file>qml/Notifications/images/missedcall@2x.png</file>
-        <file>qml/Notifications/images/notifications.png</file>
-        <file>qml/Notifications/images/notifications@2x.png</file>
         <file>qml/Settings/SettingsPage.qml</file>
         <file>qml/Settings/images/bluetooth.png</file>
         <file>qml/Settings/images/bluetooth@2x.png</file>
@@ -54,8 +63,6 @@
         <file>qml/Settings/images/brightness@2x.png</file>
         <file>qml/Settings/images/contrast.png</file>
         <file>qml/Settings/images/contrast@2x.png</file>
-        <file>qml/Settings/images/settings.png</file>
-        <file>qml/Settings/images/settings@2x.png</file>
         <file>qml/Settings/images/wifi.png</file>
         <file>qml/Settings/images/wifi@2x.png</file>
         <file>qml/Style/qmldir</file>
@@ -76,8 +83,6 @@
         <file>qml/Weather/images/sunset@2x.png</file>
         <file>qml/Weather/images/temperature.png</file>
         <file>qml/Weather/images/temperature@2x.png</file>
-        <file>qml/Weather/images/weather.png</file>
-        <file>qml/Weather/images/weather@2x.png</file>
         <file>qml/Weather/images/wind.png</file>
         <file>qml/Weather/images/wind@2x.png</file>
         <file>qml/WorldClock/Clock.qml</file>
@@ -98,7 +103,5 @@
         <file>qml/WorldClock/images/swissnighthour@2x.png</file>
         <file>qml/WorldClock/images/swissnightminute.png</file>
         <file>qml/WorldClock/images/swissnightminute@2x.png</file>
-        <file>qml/WorldClock/images/worldclock.png</file>
-        <file>qml/WorldClock/images/worldclock@2x.png</file>
     </qresource>
 </RCC>