add icons to the slots managament UI

4 files changed, 64 insertions, 20 deletions

diff --git a/app/qml/pages/AppConfigPage.qml b/app/qml/pages/AppConfigPage.qml
index 10fbe05..00eb05c 100644
--- a/app/qml/pages/AppConfigPage.qml
+++ b/app/qml/pages/AppConfigPage.qml
@@ -11,6 +11,7 @@ Page {
 
     SilicaWebView {
         id: webview
+        visible: url != ""
         anchors.fill: parent
 
         header: PageHeader {
@@ -32,8 +33,17 @@ Page {
         }
     }
 
-    ViewPlaceholder {
-        enabled: url == ""
+    Text {
+        anchors.centerIn: parent
+        visible: url == ""
         text: qsTr("No configuration settings available")
+        width: parent.width - 2*Theme.paddingLarge
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.Wrap
+        font {
+            pixelSize: Theme.fontSizeLarge
+            family: Theme.fontFamilyHeading
+        }
+        color: Theme.highlightColor
     }
 }
diff --git a/app/qml/pages/InstallAppDialog.qml b/app/qml/pages/InstallAppDialog.qml
index 3a3c0b1..79283a6 100644
--- a/app/qml/pages/InstallAppDialog.qml
+++ b/app/qml/pages/InstallAppDialog.qml
@@ -27,20 +27,29 @@ Dialog {
             property string uuid: modelData.uuid
             property bool alreadyInstalled: pebbled.isAppInstalled(uuid)
 
-            Image {
-                id: appImage
+            Item {
+                id: appIcon
+                width: Theme.itemSizeSmall
+                height: Theme.itemSizeSmall
+
                 anchors {
                     top: parent.top
                     left: parent.left
                     leftMargin: Theme.paddingLarge
                 }
-                width: Theme.itemSizeSmall
+
+                Image {
+                    id: appImage
+                    anchors.centerIn: parent
+                    source: "image://pebble-app-icon/" + uuid;
+                    scale: 2
+                }
             }
 
             Label {
                 id: appName
                 anchors {
-                    left: appImage.right
+                    left: appIcon.right
                     leftMargin: Theme.paddingMedium
                     right: parent.right
                     rightMargin: Theme.paddiumLarge
diff --git a/app/qml/pages/WatchPage.qml b/app/qml/pages/WatchPage.qml
index ce9d636..3a712ab 100644
--- a/app/qml/pages/WatchPage.qml
+++ b/app/qml/pages/WatchPage.qml
@@ -77,7 +77,8 @@ Page {
             }
 
             Item {
-                height: Theme.paddingMedium
+                width: parent.width
+                height: Theme.paddingLarge
             }
 
             Label {
@@ -139,26 +140,49 @@ Page {
 
                     }
 
-                    Image {
-                        id: slotImage
+                    Item {
+                        id: slotIcon
+                        width: Theme.itemSizeSmall
+                        height: Theme.itemSizeSmall
+
                         anchors {
                             top: parent.top
                             left: parent.left
                             leftMargin: Theme.paddingLarge
                         }
-                        width: Theme.itemSizeSmall
-                    }
 
-                    BusyIndicator {
-                        id: slotBusy
-                        anchors.centerIn: slotImage
-                        running: slotDelegate.busy
+                        Image {
+                            id: slotImage
+                            anchors.centerIn: parent
+                            source: isKnownApp ? "image://pebble-app-icon/" + modelData : ""
+                            scale: 2
+                            visible: !isEmptySlot && isKnownApp && !slotBusy.running
+                        }
+
+                        Rectangle {
+                            width: 30
+                            height: 30
+                            anchors.centerIn: parent
+                            scale: 2
+                            border {
+                                width: 2
+                                color: slotDelegate.highlighted ? Theme.highlightColor : Theme.primaryColor
+                            }
+                            color: "transparent"
+                            visible: isEmptySlot && !slotBusy.running
+                        }
+
+                        BusyIndicator {
+                            id: slotBusy
+                            anchors.centerIn: parent
+                            running: slotDelegate.busy
+                        }
                     }
 
                     Label {
                         id: slotName
                         anchors {
-                            left: slotImage.right
+                            left: slotIcon.right
                             leftMargin: Theme.paddingMedium
                             right: parent.right
                             rightMargin: Theme.paddiumLarge
@@ -173,6 +197,11 @@ Page {
                         id: slotMenu
                         ContextMenu {
                             MenuItem {
+                                text: qsTr("Install app...")
+                                visible: isEmptySlot
+                                onClicked: install();
+                            }
+                            MenuItem {
                                 text: qsTr("Configure...")
                                 visible: !isEmptySlot && isKnownApp
                                 onClicked: configure();
diff --git a/app/qml/pebble.qml b/app/qml/pebble.qml
index da3bfb5..2e26ebe 100644
--- a/app/qml/pebble.qml
+++ b/app/qml/pebble.qml
@@ -38,8 +38,4 @@ ApplicationWindow
 {
     initialPage: Component { ManagerPage { } }
     cover: Qt.resolvedUrl("cover/CoverPage.qml")
-
-    PebbledInterface {
-        id: pebbled
-    }
 }