[StatusBar] Statusbar functions like in spec. Sliding, animation and settings...

[StatusBar] Statusbar functions like in spec. Sliding, animation and settings icon added. Fix battery icon in statusbar

src/qml/FeedsPage.qml

@@ -33,7 +33,7 @@ import "notifications"
 
 Flickable {
     id: mainFlickable
-
+    clip: true
     contentHeight: rootitem.height
     contentWidth: parent.width
     Item {

src/qml/SearchListView.qml

@@ -183,7 +183,6 @@ Item {
                     found = existingTitleObject.hasOwnProperty(iconTitle)
                     if (!found) {
                         // for simplicity, just adding to end instead of corresponding position in original list
-                        console.log(iconTitle)
                         listModel.append({'title':iconTitle, 'iconSource':iconId, 'id':id, 'category':category})
                     }
                 }

src/qml/Statusbar.qml

@@ -45,6 +45,7 @@ Item {
     height: Theme.itemHeightLarge
     width: parent.width
     anchors.bottom: parent.bottom
+    enabled: !lockscreenVisible()
 
     Rectangle {
         id: statusbar
@@ -53,10 +54,37 @@ Item {
         opacity: 0.5
         z: 200
     }
-    //Just to capture clicks that don't hit statusbaritem
     MouseArea {
-        anchors.fill: parent
+        property int oldX
+        property int oldY
+        anchors.fill: row
+        z: row.z + 10
+        enabled: !lockscreenVisible()
+        onClicked: {
+            if(oldX != mouseX && oldY !== mouseY && row.childAt(mouseX, mouseY) && row.currentChild !== row.childAt(mouseX, mouseY)) {
+                row.currentChild = row.childAt(mouseX, mouseY)
+                row.currentChild.clicked()
+            }else {
+                 row.currentChild = null
+            }
+        }
+
+        onPositionChanged: {
+            oldX = mouseX
+            oldY = mouseY
+            if(pressed && row.childAt(mouseX, mouseY)) {
+                if(row.currentChild !== row.childAt(mouseX, mouseY)) {
+                    row.currentChild = row.childAt(mouseX, mouseY)
+                    if(panel_loader.visible) panel_loader.visible = false
+                    row.currentChild.clicked()
+                }
+            } else {
+                row.currentChild = null
+            }
+        }
     }
+
+
     Connections {
         target: lipstickSettings;
         onLockscreenVisibleChanged: {
@@ -135,14 +163,39 @@ Item {
     Loader {
         id: panel_loader
         anchors.bottom: root.top
-        height: 240
+        height: 0
         width: parent.width
         visible: false
+        onVisibleChanged: {
+            if(visible) riseUp.start()
+            else closeDown.start()
+        }
+
+        NumberAnimation {
+            id:riseUp
+            target: panel_loader
+            property: "height"
+            duration: 200
+            from:0
+            to:Theme.itemWidthMedium
+            easing.type: Easing.InOutQuad
+        }
+        NumberAnimation {
+            id:closeDown
+            target: panel_loader
+            property: "height"
+            duration: 200
+            from: panel_loader.height
+            to: 0
+            easing.type: Easing.InOutQuad
+        }
     }
 
     RowLayout {
+        id:row
         anchors.fill: statusbar
         spacing: root.height/4
+        property var currentChild
         StatusbarItem {
             iconSize: root.height/2
             source: (cellularSignalBars.value > 0) ? "image://theme/icon_cell" + cellularSignalBars.value : "image://theme/icon_cell1"

src/qml/notifications/NotificationItem.qml

 import QtQuick 2.6
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
-import org.nemomobile.notifications 1.0
-
 
 MouseArea {
     id: notifyArea

src/qml/statusbar/BatteryIndicator.qml

@@ -10,6 +10,11 @@ StatusbarItem {
         id: batteryChargePercentage
         key: "Battery.ChargePercentage"
         value: "100"
+        onValueChanged: {
+            if(batteryStateContextProperty.value != "charging") {
+                chargeIcon();
+            }
+        }
     }
 
     ContextProperty {

src/qml/statusbar/CommonPanel.qml

@@ -46,9 +46,10 @@ Rectangle {
     onClick: {
         panel_loader.sourceComponent = parent.panel
         panel_loader.visible = !panel_loader.visible
+        row.currentChild=null
     }
 
-    height: 240
+    height: Theme.itemWidthMedium
     width: root.width
     color: "transparent"
 
@@ -80,7 +81,7 @@ Rectangle {
         id: actionColumn
         anchors{
             top: commonPanel.top
-            topMargin: 20
+            topMargin: Theme.itemSpacingLarge
         }
         width: parent.width
         Label{
@@ -88,7 +89,7 @@ Rectangle {
             text: name
             anchors{
                 left: actionColumn.left
-                leftMargin: 20
+                leftMargin: Theme.itemSpacingLarge
             }
             wrapMode: Text.Wrap
             font.pointSize: 8
@@ -101,7 +102,7 @@ Rectangle {
             visible: enabled
             anchors{
                 right: actionColumn.right
-                rightMargin: 20
+                rightMargin: Theme.itemSpacingLarge
                 verticalCenter: nameLabel.verticalCenter
             }
         }
@@ -109,12 +110,30 @@ Rectangle {
 
     Column{
         id: dataColumn
-        width: parent.width-40
+        width: parent.width-settingsIcon.width
         anchors{
             left: parent.left
-            leftMargin: 20
+            leftMargin: Theme.itemSpacingLarge
             top: actionColumn.bottom
-            topMargin: 60
+            topMargin: Theme.itemSpacingHuge*1.5
+        }
+    }
+    //Just placeholder until IconButton will get merged
+    Image {
+        id:settingsIcon
+        fillMode: Image.PreserveAspectFit
+        height: Theme.itemHeightMedium
+        visible: parent.height > Theme.itemSpacingMedium
+        source: "image://theme/icon-app-settings" //maybe better icon? settings.png from statusbar spec
+        anchors{
+            right: parent.right
+            rightMargin: Theme.itemSpacingLarge
+            bottom:parent.bottom
+            bottomMargin: Theme.itemSpacingLarge
+        }
+        MouseArea {
+            anchors.fill:parent
+            onClicked: console.log("open right settings page...")
         }
     }
     Connections {

src/qml/statusbar/StatusbarItem.qml

@@ -9,6 +9,17 @@ Item {
     property double iconSize
     Layout.fillWidth: true
     Layout.fillHeight: true
+    function clicked() {
+        if (panel_source !== "" && !panel) {
+            panel_loader.source = panel_source
+            panel_loader.visible = !panel_loader.visible
+        }
+        if (panel && panel_source === "") {
+            panel_loader.sourceComponent = panel
+            panel_loader.visible = !panel_loader.visible
+        }
+    }
+
     Rectangle{
         anchors.fill:parent
         opacity: 0.8
@@ -25,16 +36,8 @@ Item {
     MouseArea {
         id:mouse
         anchors.fill: parent
-        onClicked: {
-            if (panel_source !== "" && !panel) {
-                panel_loader.source = panel_source
-                panel_loader.visible = !panel_loader.visible
-            }
-            if (panel && panel_source === "") {
-                panel_loader.sourceComponent = panel
-                panel_loader.visible = !panel_loader.visible
-            }
-        }
+        enabled: !lockscreenVisible()
+        onClicked: parent.clicked()
     }
 
 }