Wearable: prepare the launcher page icons for high DPI and styling

Separate the icon and its background to make the background stylable
and to provide the icons in high DPI versions later. Some icon files
have been renamed to match the sub-app name. When this example reaches
dev, we can use the built-in icon support with named icons.

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

12 files changed, 12 insertions, 12 deletions

diff --git a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png b/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png
index 00ec663e..f38b3d4e 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png
+++ b/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png b/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png
index a8789a61..80ec43cc 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png
diff --git a/examples/quickcontrols2/wearable/qml/LauncherPage.qml b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
index 6ff118df..34f117c4 100644
--- a/examples/quickcontrols2/wearable/qml/LauncherPage.qml
+++ b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
@@ -68,12 +68,12 @@ PathView {
     model: ListModel {
         ListElement {
             title: qsTr("World Clock")
-            icon: "WorldClock/images/watch.png"
+            icon: "WorldClock/images/worldclock.png"
             page: "WorldClock/WorldClockPage.qml"
         }
         ListElement {
             title: qsTr("Navigation")
-            icon: "Navigation/images/route.png"
+            icon: "Navigation/images/navigation.png"
             page: "Navigation/NavigationPage.qml"
         }
         ListElement {
@@ -104,24 +104,24 @@ PathView {
     }
 
     delegate: QQC2.AbstractButton {
+        width: circularView.itemSize
+        height: circularView.itemSize
+
         text: model.title
         opacity: PathView.itemOpacity
+        padding: 12
 
         contentItem: Image {
             source: model.icon
             fillMode: Image.Pad
-            sourceSize.width: circularView.itemSize
-            sourceSize.height: circularView.itemSize
+            sourceSize.width: parent.availableWidth
+            sourceSize.height: parent.availableHeight
         }
 
         background: Rectangle {
             radius: width / 2
-            color: "transparent"
-
             border.width: 3
-            border.color: parent.PathView.isCurrentItem ?
-                            "transparent"
-                            : UIStyle.colorQtGray4
+            border.color: parent.PathView.isCurrentItem ? UIStyle.colorQtPrimGreen : UIStyle.colorQtGray4
         }
 
         onClicked: {
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml b/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
index bdc3e494..185f7986 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
@@ -72,7 +72,7 @@ Item {
 
                 Image {
                     anchors.verticalCenter: parent.verticalCenter
-                    source: "images/route.png"
+                    source: "images/navigation.png"
                     fillMode: Image.PreserveAspectCrop
                 }
                 Text {
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/navigation.png b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation.png
new file mode 100644
index 00000000..9b8cb8e6
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/route.png b/examples/quickcontrols2/wearable/qml/Navigation/images/route.png
deleted file mode 100644
index b8ac9d7e..00000000
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/route.png
+++ /dev/null
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png b/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png
index c5c3ffb2..bcbe85ef 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/settings.png b/examples/quickcontrols2/wearable/qml/Settings/images/settings.png
index c42f7dc6..093404f9 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/settings.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/settings.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/weather.png b/examples/quickcontrols2/wearable/qml/Weather/images/weather.png
index 0530d47b..07bf8187 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/weather.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/weather.png
diff --git a/examples/quickcontrols2/wearable/qml/WorldClock/images/watch.png b/examples/quickcontrols2/wearable/qml/WorldClock/images/watch.png
deleted file mode 100644
index 299858b7..00000000
--- a/examples/quickcontrols2/wearable/qml/WorldClock/images/watch.png
+++ /dev/null
diff --git a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock.png b/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock.png
new file mode 100644
index 00000000..91a70493
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock.png
diff --git a/examples/quickcontrols2/wearable/wearable.qrc b/examples/quickcontrols2/wearable/wearable.qrc
index a596fb63..6df0aa93 100644
--- a/examples/quickcontrols2/wearable/wearable.qrc
+++ b/examples/quickcontrols2/wearable/wearable.qrc
@@ -20,8 +20,8 @@
         <file>qml/Navigation/images/end.png</file>
         <file>qml/Navigation/images/leftturn.png</file>
         <file>qml/Navigation/images/marker.png</file>
+        <file>qml/Navigation/images/navigation.png</file>
         <file>qml/Navigation/images/rightturn.png</file>
-        <file>qml/Navigation/images/route.png</file>
         <file>qml/Navigation/images/start.png</file>
         <file>qml/Navigation/images/straight.png</file>
         <file>qml/Navigation/images/uturn.png</file>
@@ -62,6 +62,6 @@
         <file>qml/WorldClock/images/swissnightdial.png</file>
         <file>qml/WorldClock/images/swissnighthour.png</file>
         <file>qml/WorldClock/images/swissnightminute.png</file>
-        <file>qml/WorldClock/images/watch.png</file>
+        <file>qml/WorldClock/images/worldclock.png</file>
     </qresource>
 </RCC>