[statusbar] Statusbar as Row with StatusbarItems.

src/qml/Statusbar.qml

@@ -48,35 +48,6 @@ Item {
         z: 200
     }
 
-    Connections {
-        target: batteryChargePercentage
-        onValueChanged: {
-            if(batteryChargePercentage.value > 85) {
-                batteryimg.source = "images/battery6.png"
-            } else if (batteryChargePercentage.value <= 5) {
-                batteryimg.source = "images/battery0.png"
-            } else if (batteryChargePercentage.value <= 10) {
-                batteryimg.source = "images/battery1.png"
-            } else if (batteryChargePercentage.value <= 25) {
-                batteryimg.source = "images/battery2.png"
-            } else if (batteryChargePercentage.value <= 40) {
-                batteryimg.source = "images/battery3.png"
-            } else if (batteryChargePercentage.value <= 65) {
-                batteryimg.source = "images/battery4.png"
-            } else if (batteryChargePercentage.value <= 80) {
-                batteryimg.source = "images/battery5.png"
-            }
-        }
-    }
-
-    Connections {
-        target: cellularSignalBars
-        onValueChanged: {
-            cellularbars.text = cellularSignalBars.value
-        }
-    }
-
-
     ContextProperty {
         id: batteryChargePercentage
         key: "Battery.ChargePercentage"
@@ -93,88 +64,29 @@ Item {
         key: "Cellular.RegistrationStatus"
     }
 
-    Rectangle {
-        id: cellular
-        anchors.left: parent.left
-        color: "transparent"
-        height: 48
-        width: 48
-        anchors.margins: 8
-        Label {
-            id: cellularbars
-            width: 32
-            height: 32
-            font.pointSize: 8
-        }
-    }
-    Rectangle {
-        id: wifi
-        anchors.left: cellular.right
-        color: "transparent"
-        height: 48
-        width: 48
-        anchors.margins: 8
-    }
-    Rectangle {
-        id: bluetooth
-        anchors.left: wifi.right
-        color: "transparent"
-        height: 48
-        width: 48
-        anchors.margins: 8
-        Image {
-            source: bluetoothConnected.value !== undefined && bluetoothConnected.value ? "image://theme/icon-status-bluetooth-connected" : "image://theme/icon-status-bluetooth"
-
-            ContextProperty {
-                id: bluetoothEnabled
-                key: "Bluetooth.Enabled"
+    Row {
+        spacing: 16
+        StatusbarItem {
+            source: "image://theme/icon_cell" + cellularSignalBars.value
         }
-            ContextProperty {
-                id: bluetoothConnected
-                key: "Bluetooth.Connected"
+        StatusbarItem {
+            source: {
+                return "image://theme/icon_wifi_normal1"
             }
         }
+        StatusbarItem {
+            source: "image://theme/icon_bt_normal"
         }
-    Rectangle {
-        id: nfc
-        anchors.left: bluetooth.right
-        color: "transparent"
-        height: 48
-        width: 48
-        anchors.margins: 8
-        Image {
-            source: "image://theme/icon-nfc-enabled"
+        StatusbarItem {
+            source: "image://theme/icon_nfc_normal"
         }
+        StatusbarItem {
+            source: "image://theme/icon_gps_normal"
         }
-    Rectangle {
-        id: gps
-        anchors.left: nfc.right
-        color: "transparent"
-        height: 48
-        width: 48
-        anchors.margins: 8
-        Image {
-            source: "image://theme/icon-gps-enabled"
+        StatusbarItem {
+            source: "image://theme/icon_play_pause"
         }
-    }
-    Rectangle {
-        id: playlist
-        anchors.left: gps.right
-        color: "transparent"
-        height: 48
-        width: 48
-        anchors.margins: 8
-        Image {
-            source: "image://theme/icon-playlist-playpause"
-        }
-    }
-    Rectangle {
-        id: clock
-        anchors.left: playlist.right
-        color: "transparent"
-        height: 48
-        width: 48
-        anchors.margins: 8
+        StatusbarItem {
             Label {
                 id: hours
                 width: 16
@@ -193,16 +105,24 @@ Item {
             }
         }
 
-    Rectangle {
-        anchors.right: parent.right
-        height: 48
-        width: 48
-        color: "transparent"
-        anchors.margins: 8
-        Image {
-            id: batteryimg
-            width: 32
-            height: 32
+        StatusbarItem {
+            source: {
+                if(batteryChargePercentage.value > 85) {
+                    return "images/battery6.png"
+                } else if (batteryChargePercentage.value <= 5) {
+                    return "images/battery0.png"
+                } else if (batteryChargePercentage.value <= 10) {
+                    return "images/battery1.png"
+                } else if (batteryChargePercentage.value <= 25) {
+                    return "images/battery2.png"
+                } else if (batteryChargePercentage.value <= 40) {
+                    return "images/battery3.png"
+                } else if (batteryChargePercentage.value <= 65) {
+                    return "images/battery4.png"
+                } else if (batteryChargePercentage.value <= 80) {
+                    return "images/battery5.png"
+                }
+            }
         }
     }
 }

src/qml/StatusbarItem.qml

+import QtQuick 2.0
+
+Item {
+    height: 48
+    width: 48
+    property alias source: icon.source
+
+    Image {
+        id: icon
+        anchors.centerIn: parent
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (icon.source.toString().match("normal")) {
+                icon.source = icon.source.toString().replace("normal","focused")
+            } else {
+                icon.source = icon.source.toString().replace("focused","normal")
+            }
+        }
+    }
+}

src/resources-qml.qrc

@@ -38,5 +38,6 @@
         <file>qml/FeedsPage.qml</file>
         <file>qml/Statusbar.qml</file>
         <file>qml/images/wallpaper-portrait-bubbles.png</file>
+        <file>qml/StatusbarItem.qml</file>
     </qresource>
 </RCC>

src/src.pro

@@ -44,6 +44,7 @@ OTHER_FILES += qml/*.qml \
     qml/NotificationPreview.qml \
     qml/scripts/desktop.js \
     qml/FeedsPage.qml \
-    qml/Statusbar.qml
+    qml/Statusbar.qml \
+    qml/StatusbarItem.qml