Merge pull request #64 from eekkelund/master

[Scaling][Notification][Search] Fix scaling to use newly calculated Theme.sizes

src/qml/AppLauncher.qml

@@ -41,7 +41,7 @@ GridView {
     property alias deleter: deleter
     property var switcher: null
     property string searchString
-    property int minCellSize: Theme.iconSizeLauncher + Theme.itemSpacingHuge
+    property int minCellSize: Theme.iconSizeLauncher +  Theme.iconSizeLauncher/2
     property int rows: Math.floor(parent.height / minCellSize)
     property int columns:  Math.floor(parent.width / minCellSize)
 
@@ -55,7 +55,7 @@ GridView {
     clip: true
 
     onContentYChanged: {
-        if( contentY < -140 ) {
+        if( contentY < -Theme.itemHeightHuge*2 ) {
             headerItem.visible = true;
             timer.running = true;
         }

src/qml/AppSwitcher.qml

@@ -74,7 +74,7 @@ Item {
     Flickable {
         id: flickable
         contentHeight: gridview.height
-        width: closeMode ? parent.width - Theme.itemSpacingLarge : parent.width // see comment re right anchor below
+        width: closeMode ? parent.width - Theme.itemSpacingLarge : parent.width - Theme.itemSpacingSmall // see comment re right anchor below
         MouseArea {
             height: flickable.contentHeight > flickable.height ? flickable.contentHeight : flickable.height
             width: flickable.width
@@ -88,17 +88,17 @@ Item {
 
         anchors {
             top: parent.top
-            topMargin: closeMode ? Theme.itemSpacingLarge : 0
+            topMargin: closeMode ? Theme.itemSpacingLarge : Theme.itemSpacingSmall
             bottom: toolBar.top
             left: parent.left
             // no right anchor to avoid double margin (complicated math)
-            leftMargin: closeMode ? Theme.itemSpacingLarge : 0
+            leftMargin: closeMode ? Theme.itemSpacingLarge : Theme.itemSpacingSmall
         }
 
         Grid {
             id: gridview
             columns: 2
-            spacing: closeMode ? Theme.itemSpacingLarge : 0
+            spacing: closeMode ? Theme.itemSpacingLarge : Theme.itemSpacingSmall
             move: Transition {
                 NumberAnimation {
                     properties: "x,y"
@@ -159,17 +159,9 @@ Item {
             closeMode = false
         }
     }
-    Rectangle {
+    Item {
         id: toolBar
-        color: Theme.backgroundColor
-        border {
-            width: 1
-            color: Theme.fillDarkColor
-        }
-        z: 202
-        height:Theme.itemHeightExtraLarge + 2*padding
         property int padding: Theme.itemSpacingSmall
-
         anchors {
             left: parent.left
             right: parent.right
@@ -177,8 +169,20 @@ Item {
             margins: -1
             bottomMargin: switcherRoot.closeMode ? statusbar.height : -height
         }
-
         Behavior on anchors.bottomMargin { PropertyAnimation { duration: 100 } }
+        z: 202
+        height:Theme.itemHeightLarge + 2 * toolBar.padding
+
+        Rectangle {
+            anchors.fill: parent
+            color: Theme.fillDarkColor
+            opacity: 0.3
+            border {
+                width: size.ratio(1)
+                color: Theme.backgroundColor
+            }
+        }
+
         Row {
             anchors {
                 top: parent.top
@@ -187,7 +191,7 @@ Item {
                 left: parent.left
                 bottom:  parent.bottom
             }
-            spacing: toolBar.padding*2
+            spacing: toolBar.padding * 2
 
             Button {
                 id: toolBarDone
@@ -200,20 +204,6 @@ Item {
                     switcherRoot.closeMode = false;
                 }
                 text: qsTr("Done")
-                //Untill fontSizes are fixed
-                style: ButtonStyle {
-                    label: Text {
-                        renderType: Text.NativeRendering
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                        text: control.text
-                        color: Theme.textColor
-                        font.family: Theme.fontFamily
-                        font.pixelSize: Theme.fontSizeMedium
-                        font.weight: control.primary ? Theme.fontWeightLarge : Theme.fontWeightMedium
-                        opacity: control.enabled ? 1.0 : 0.3
-                    }
-                }
             }
 
             Button {
@@ -222,7 +212,7 @@ Item {
                     top: parent.top
                     bottom: parent.bottom
                 }
-                 width: parent.width / 2 - toolBar.padding
+                width: parent.width / 2 - toolBar.padding
                 onClicked: {
                     // TODO: use close animation inside item
                     for (var i = gridRepeater.count - 1; i >= 0; i--) {
@@ -230,20 +220,7 @@ Item {
                     }
                 }
                 text: qsTr("Close All")
-                //Untill fontSizes are fixed
-                style: ButtonStyle {
-                    label: Text {
-                        renderType: Text.NativeRendering
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                        text: control.text
-                        color: Theme.textColor
-                        font.family: Theme.fontFamily
-                        font.pixelSize: Theme.fontSizeMedium
-                        font.weight: control.primary ? Theme.fontWeightLarge : Theme.fontWeightMedium
-                        opacity: control.enabled ? 1.0 : 0.3
-                    }
-                }
+                primary: true
             }
         }
     }

src/qml/FeedsPage.qml

@@ -60,7 +60,6 @@ Flickable {
                 text: Qt.formatDateTime(wallClock.time, "dddd")
                 color: Theme.textColor
                 font.pixelSize: Theme.fontSizeLarge
-                font.weight: Font.Bold
                 anchors {
                     top: parent.top
                     horizontalCenter: parent.horizontalCenter
@@ -81,22 +80,35 @@ Flickable {
                 }
             }
         }
+        Timer {
+            id: timestampTimer
+            interval: 60000
+            running: true
+            repeat: true
+        }
 
         Column {
             id: notificationColumn
             width: parent.width
             anchors{
                 top: daterow.bottom
-                topMargin: Theme.itemSpacingHuge
+                topMargin: Theme.itemHeightLarge*1.5
             }
-            spacing: Theme.itemSpacingHuge
+            spacing: Theme.itemSpacingExtraSmall
             Repeater {
                 model: NotificationListModel {
                     id: notifmodel
                 }
-                delegate: NotificationItem{}
+                delegate: NotificationItem{
+                    id: notifItem
+                    Connections {
+                        target: timestampTimer
+                        onTriggered: notifItem.refreshTimestamp()
+                        onRunningChanged: if (timestampTimer.running) notifItem.refreshTimestamp()
+                    }
                 }
             }
         }
+    }
 }
 

src/qml/LauncherItemDelegate.qml

@@ -89,8 +89,8 @@ Item {
             Spinner {
                 id: spinnerr
                 anchors.centerIn:  iconImage
-                width: iconWrapper.width
-                height: width
+                width: height
+                height: parent.height - Theme.itemSpacingHuge
                 enabled: (modelData.object.type === LauncherModel.Application) ? modelData.object.isLaunching ? switcher.switchModel.getWindowIdForTitle(modelData.object.title) == 0 : false : false
 
                 Connections {

src/qml/Lockscreen.qml

@@ -80,24 +80,28 @@ Image {
             right:parent.right
             rightMargin: Theme.itemSpacingLarge
         }
-        interactive:false
-        spacing: 0
+        interactive:DeviceLock.state !== DeviceLock.Locked
+        spacing: Theme.itemSpacingExtraSmall
 
         model: NotificationListModel {
             id: notifmodel
         }
+        clip:true
         delegate: NotificationItem {
+            height: Theme.itemHeightLarge
             enabled:DeviceLock.state !== DeviceLock.Locked
             scale: notificationColumn.opacity
             transformOrigin: Item.Left
             iconSize: Theme.itemHeightMedium
             appName.font.pixelSize: Theme.fontSizeSmall
             appName.visible: DeviceLock.state !== DeviceLock.Locked
-            appName.anchors.verticalCenter: appIcon.verticalCenter
-            appName.anchors.top: null
+            appName.anchors.verticalCenter: labelColumn.verticalCenter
             appBody.font.pixelSize: Theme.fontSizeTiny
             appBody.visible: false
+            appTimestamp.visible: false
             appSummary.visible: false
+            pressBg.visible: DeviceLock.state !== DeviceLock.Locked
+            pressBg.opacity: 0.3
         }
     }
 }

src/qml/LockscreenClock.qml

@@ -54,7 +54,6 @@ Rectangle {
                 font.pixelSize: Theme.fontSizeMedium
                 color: Theme.textColor
                 horizontalAlignment: Text.AlignHCenter
-                font.weight: Font.Bold
                 anchors {
                     horizontalCenter: parent.horizontalCenter
                 }

src/qml/SearchListView.qml

@@ -35,6 +35,7 @@ import QtQuick.Controls.Styles.Nemo 1.0
 import org.nemomobile.contacts 1.0
 
 Item {
+    id:rootItem
     height: (searchField.text.length > 0 ?  listView.height+searchField.height : searchField.height) + (visible ? Theme.itemSpacingHuge + margin.height : 0)
     visible: false
     anchors.bottomMargin:Theme.itemSpacingHuge
@@ -48,8 +49,10 @@ Item {
 
 
     onVisibleChanged: {
-        if( visible) searchField.focus = true
-        else searchField.focus = false
+        if( visible){
+            searchField.focus = true
+            searchField.forceActiveFocus()
+        } else searchField.focus = false
         oldHeight=height
     }
 
@@ -68,25 +71,30 @@ Item {
             rightMargin: Theme.itemSpacingMedium
             bottomMargin:Theme.itemSpacingHuge
         }
-    Image {
-        id:searchIcon
-        anchors.verticalCenter: parent.verticalCenter
-        width:height
-        height: searchField.height
-        fillMode: Image.PreserveAspectFit
-        source: "image://theme/search"
-    }
+        Image {
+            id:searchIcon
+            anchors.verticalCenter: parent.verticalCenter
+            width:height
+            height: searchField.height
+            fillMode: Image.PreserveAspectFit
+            source: "image://theme/search"
+        }
 
-    TextField {
-        id:searchField
-        width:parent.width - searchIcon.width - Theme.itemSpacingMedium
-        placeholderText: qsTr("Search")
-        Binding {
-            target: gridview
-            property: "searchString"
-            value: searchField.text.toLowerCase().trim()
+        TextField {
+            id:searchField
+            width:parent.width - searchIcon.width - Theme.itemSpacingMedium
+            placeholderText: qsTr("Search")
+            Binding {
+                target: gridview
+                property: "searchString"
+                value: searchField.text.toLowerCase().trim()
+            }
+            onTextChanged: {
+                if(tex.lenght>0) {
+                    searchField.forceActiveFocus()
+                }
+            }
         }
-}
 
     }
     ListView {
@@ -180,7 +188,13 @@ Item {
                 var titles = []
                 var contacts = []
                 for (i = 0; i < searchLauncherModel.itemCount; ++i) {
-                    titles.push({'iconTitle':searchLauncherModel.get(i).title, 'iconSource':searchLauncherModel.get(i).iconId, 'id':i, 'category':qsTr("Application")})
+                    if (searchLauncherModel.get(i).type === LauncherModel.Folder) {
+                        for(var j = 0; j< searchLauncherModel.get(i).itemCount; ++j ) {
+                            titles.push({'iconTitle':searchLauncherModel.get(i).get(j).title, 'iconSource':searchLauncherModel.get(i).get(j).iconId, 'id':i, 'folderId':j, 'category':qsTr("Application")})
+                        }
+                    } else {
+                        titles.push({'iconTitle':searchLauncherModel.get(i).title, 'iconSource':searchLauncherModel.get(i).iconId, 'id':i, 'folderId':-1, 'category':qsTr("Application")})
+                    }
                 }
                 for (i = 0; i < peopleModel.count; ++i) {
                     if(peopleModel.get(i).firstName && peopleModel.get(i).lastName) {
@@ -217,11 +231,12 @@ Item {
                     iconTitle = filteredTitles[i].iconTitle
                     iconId =  filteredTitles[i].iconSource
                     var id = filteredTitles[i].id
+                    var folderId = filteredTitles[i].folderId
                     category = filteredTitles[i].category
                     found = existingTitleObject.hasOwnProperty(iconTitle)
                     if (!found) {
                         // for simplicity, just adding to end instead of corresponding position in original list
-                        listModel.append({'title':iconTitle, 'iconSource':iconId, 'id':id, 'category':category})
+                        listModel.append({'title':iconTitle, 'iconSource':iconId, 'id':id, 'folderId':folderId, 'category':category})
                     }
                 }
                 for (i = 0; i < contacts.length; ++i) {
@@ -273,13 +288,19 @@ Item {
                 id: spinner
                 anchors {
                     centerIn:  iconImage
-                    top: iconImage.top
-                    topMargin: Theme.itemSpacingExtraSmall
                 }
-                width: iconImage.width
-                height: width
-                enabled: (searchLauncherModel.get(model.id).type === LauncherModel.Application) ? searchLauncherModel.get(model.id).isLaunching ? switcher.switchModel.getWindowIdForTitle(model.title) == 0 : false : false
-
+                width: height
+                height: parent.height - Theme.itemSpacingHuge
+                enabled: {
+                    if(searchLauncherModel.get(model.id).type === LauncherModel.Application) {
+                        if(searchLauncherModel.get(model.id).isLaunching)
+                            return switcher.switchModel.getWindowIdForTitle(model.title) == 0
+                    } else if (searchLauncherModel.get(model.id).type === LauncherModel.Folder && model.folderId > -1) {
+                        if (searchLauncherModel.get(model.id).get(model.folderId).isLaunching)
+                            return switcher.switchModel.getWindowIdForTitle(model.title) == 0
+                    }
+                    return false
+                }
                 Connections {
                     target: Lipstick.compositor
                     onWindowAdded: {
@@ -330,14 +351,21 @@ Item {
                 onClicked: {
                     switch (category ) {
                     case "Application":
+                        var winId
                         if (searchLauncherModel.get(model.id).type !== LauncherModel.Folder) {
-                            var winId = switcher.switchModel.getWindowIdForTitle(model.title)
+                            winId = switcher.switchModel.getWindowIdForTitle(model.title)
                             if (winId == 0 || !searchLauncherModel.get(model.id).isLaunching)
                                 searchLauncherModel.get(model.id).launchApplication()
                             else
                                 Lipstick.compositor.windowToFront(winId)
+                        } else  if (searchLauncherModel.get(model.id).type === LauncherModel.Folder && model.folderId > -1) {
+                            winId = switcher.switchModel.getWindowIdForTitle(model.title)
+                            if (winId == 0 || !searchLauncherModel.get(model.id).get(model.folderId).isLaunching)
+                                searchLauncherModel.get(model.id).get(model.folderId).launchApplication()
+                            else
+                                Lipstick.compositor.windowToFront(winId)
                         }
-                        context.state=""
+
                         break
                     case "Contact":
                         console.log("Call to person. Or open contextmenu where sms and call")

src/qml/Statusbar.qml

@@ -42,7 +42,7 @@ import "statusbar"
 Item {
     id: root
     z: 201
-    height: Theme.itemHeightLarge
+    height: Theme.itemHeightMedium
     width: parent.width
     anchors.bottom: parent.bottom
     enabled: !lockscreenVisible()
@@ -54,6 +54,7 @@ Item {
         opacity: 0.5
         z: 200
     }
+
     MouseArea {
         property int oldX
         property int oldY
@@ -65,7 +66,7 @@ Item {
                 row.currentChild = row.childAt(mouseX, mouseY)
                 row.currentChild.clicked()
             }else {
-                 row.currentChild = null
+                row.currentChild = null
             }
         }
 
@@ -194,10 +195,10 @@ Item {
     RowLayout {
         id:row
         anchors.fill: statusbar
-        spacing: root.height/4
+        spacing: Theme.itemSpacingSmall
         property var currentChild
         StatusbarItem {
-            iconSize: root.height/2
+            iconSize: Theme.itemHeightExtraSmall
             source: (cellularSignalBars.value > 0) ? "image://theme/icon_cell" + cellularSignalBars.value : "image://theme/icon_cell1"
 
             MouseArea{
@@ -213,33 +214,44 @@ Item {
         }
 
         StatusbarItem {
-            iconSize: root.height/2
-            Label {
-                id: tech
-                width: root.height/4
-                height: root.height/4
-                font.pixelSize: root.height/4+root.height/5
-                font.bold: true
-                wrapMode: Text.ElideRight
-                text: (cellularNetworkName.value !== "") ? cellularNetworkName.value.substring(0,3).toUpperCase() : "NA"
-            }
+            iconSize: root.height
+            Item {
+                anchors.centerIn: parent
+                width: parent.width
+                height: tech.font.pixelSize*2
+                Label {
+                    id: tech
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment:Text.AlignBottom
+                    width: parent.width
+                    height: paintedHeight
+                    font.pixelSize: Theme.fontSizeSmall
+                    elide:Text.ElideNone
+                    maximumLineCount: 1
+                    clip:true
+                    text: (cellularNetworkName.value !== "") ? cellularNetworkName.value.substring(0,3).toUpperCase() : "NA"
+                }
 
-            Label {
-                anchors.top: tech.bottom
-                anchors.topMargin: root.height/8
-                width: root.height/4
-                height: root/height/4
-                font.pixelSize: root.height/4+root.height/5
-                text: {
-                    var techToG = {gprs: "2", egprs: "2.5", umts: "3", hspa: "3.5", lte: "4", unknown: "0"}
-                    return techToG[cellularDataTechnology.value ? cellularDataTechnology.value : "unknown"] + "G"
+                Label {
+                    y: -contentHeight + font.pixelSize*2 + tech.y
+                    horizontalAlignment: Text.AlignHCenter
+                    width: parent.width
+                    height: paintedHeight
+                    font.pixelSize: Theme.fontSizeSmall
+                    elide:Text.ElideNone
+                    maximumLineCount: 1
+                    text: {
+                        var techToG = {gprs: "2", egprs: "2.5", umts: "3", hspa: "3.5", lte: "4", unknown: "0"}
+                        return techToG[cellularDataTechnology.value ? cellularDataTechnology.value : "unknown"] + "G"
+                    }
                 }
             }
             panel: SimPanel {}
         }
 
         StatusbarItem {
-            iconSize: root.height/2
+            id:wifiStatus
+            iconSize: Theme.itemHeightExtraSmall
             source: {
                 if (wlan.connected) {
                     if (networkManager.defaultRoute.type !== "wifi")
@@ -265,40 +277,50 @@ Item {
         }
         StatusbarItem {
             id: bluetootIndicator
-            iconSize: root.height/2
+            iconSize: Theme.itemHeightExtraSmall
             source: (bluetoothConnected.value) ? "image://theme/icon_bt_focused" : "image://theme/icon_bt_normal"
             visible: bluetoothEnabled.value
         }
         StatusbarItem {
-            iconSize: root.height/2
+            iconSize: Theme.itemHeightExtraSmall
             source: "image://theme/icon_nfc_normal"
         }
         StatusbarItem {
-            iconSize: root.height/2
+            iconSize: Theme.itemHeightExtraSmall
             source: "image://theme/icon_gps_normal"
         }
         StatusbarItem {
-            iconSize: root.height/2
+            iconSize: Theme.itemHeightExtraSmall
             source: "image://theme/icon_play_pause"
         }
         StatusbarItem {
-            iconSize: root.height/2
-            anchors.verticalCenter: parent.verticalCenter
-            Label {
-                id: hours
-                width: root.height/4
-                height: root.height/4
-                font.pixelSize: root.height/4+root.height/5
-                text: Qt.formatDateTime(wallClock.time, "hh")
-            }
-            Label {
-                id: minutes
-                anchors.top: hours.bottom
-                anchors.topMargin: root.height/8
-                width: root.height/4
-                height: root.height/4
-                font.pixelSize: root.height/4+root.height/5
-                text: Qt.formatDateTime(wallClock.time, "mm")
+            iconSize: root.height
+            Item {
+                anchors.centerIn: parent
+                width: parent.width
+                height: hours.font.pixelSize*2
+                Label {
+                    id: hours
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment:Text.AlignBottom
+                    width: parent.width
+                    height: paintedHeight
+                    font.pixelSize: Theme.fontSizeSmall
+                    elide:Text.ElideNone
+                    maximumLineCount: 1
+                    text: Qt.formatDateTime(wallClock.time, "hh")
+                }
+                Label {
+                    id: minutes
+                    y: -contentHeight + font.pixelSize*2 + hours.y
+                    horizontalAlignment: Text.AlignHCenter
+                    width: parent.width
+                    height: paintedHeight
+                    font.pixelSize: Theme.fontSizeSmall
+                    elide:Text.ElideNone
+                    maximumLineCount: 1
+                    text: Qt.formatDateTime(wallClock.time, "mm")
+                }
             }
         }
 

src/qml/SwitcherItem.qml

@@ -100,7 +100,7 @@ MouseArea {
 
     CloseButton {
         id: closeButton
-        width: parent.width/4
+        width: rotateWindowContent ? parent.width/4 :parent.height/4
         height: width
         Behavior on scale { PropertyAnimation { duration: 300; easing.type: Easing.OutBack } }
         scale: switcherRoot.closeMode ? 1 : 0

src/qml/notifications/NotificationItem.qml

@@ -5,31 +5,84 @@ import QtQuick.Controls.Styles.Nemo 1.0
 MouseArea {
     id: notifyArea
 
-    height: childrenRect.height
+    height:  Theme.itemHeightExtraLarge
     width: parent.width
 
     property alias appIcon: appIcon
     property alias appBody: appBody
     property alias appName: appName
     property alias appSummary: appSummary
-    property int iconSize: Theme.itemHeightExtraLarge
+    property alias labelColumn: labelColumn
+    property alias appTimestamp: appTimestamp
+    property alias pressBg: pressBg
+    property int iconSize:Math.min(Theme.iconSizeLauncher, height-Theme.itemSpacingMedium)
+    property string timeAgo
+    property int swipeTreshold: notifyArea.width/3
 
-
-    drag.target: notifyArea
+    drag.target: modelData.userRemovable ? notifyArea : null
     drag.axis: Drag.XAxis
-    drag.minimumX: 0-Theme.itemHeightMedium
+    drag.minimumX: -notifyArea.width
     drag.maximumX: notifyArea.width
     drag.onActiveChanged: {
         if(!drag.active ) {
-            if((notifyArea.x > notifyArea.width/3)) {
+            if((notifyArea.x > swipeTreshold)) {
                 slideAnimation.start()
-            }else slideBackAnimation.start()
+            }else if (notifyArea.x < -swipeTreshold){
+                slideReverseAnimation.start()
+            } else {
+                slideBackAnimation.start()
+            }
+        }
+    }
+
+    function refreshTimestamp() {
+        var seconds = Math.floor((new Date() - modelData.timestamp) / 1000)
+        var years = Math.floor(seconds / (365*24*60*60))
+        var months = Math.floor(seconds / (30*24*60*60))
+        var days = Math.floor(seconds / (24*60*60))
+        var hours = Math.floor(seconds / (60*60))
+        var minutes = Math.floor(seconds / 60)
+
+        if (years >= 1) {
+            if(years > 1) {
+                timeAgo = years + " " + qsTr("years ago")
+            } else {
+                timeAgo = years + " " + qsTr("year ago")
+            }
+        }else if (months >= 1) {
+            if (months > 1) {
+                timeAgo =  months +" " + qsTr("months ago")
+            } else {
+                timeAgo =  months +" " + qsTr("month ago")
+            }
+        }else if (days >= 1) {
+            if (days > 1) {
+                timeAgo =  days + " " + qsTr("days ago")
+            } else {
+                timeAgo =  days + " " + qsTr("day ago")
+            }
+        }else if (hours >= 1) {
+            if (hours > 1) {
+                timeAgo =  hours + " " + qsTr("hours ago")
+            } else {
+                timeAgo =  hours + " " + qsTr("hour ago")
+            }
+        } else if (minutes >= 1) {
+            if (minutes > 1) {
+                timeAgo =  minutes + " " + qsTr("minutes ago")
+            } else {
+                timeAgo =  minutes + " " + qsTr("minute ago")
+            }
+        } else {
+            timeAgo = qsTr("Just now")
         }
     }
 
     onClicked: {
         if (modelData.userRemovable) {
             slideAnimation.start()
+        } else {
+            modelData.actionInvoked("default")
         }
     }
     NumberAnimation {
@@ -42,6 +95,16 @@ MouseArea {
         easing.type: Easing.InOutQuad
         onStopped: modelData.actionInvoked("default")
     }
+    NumberAnimation {
+        id:slideReverseAnimation
+        target: notifyArea
+        property: "x"
+        duration: 200
+        from: notifyArea.x
+        to: -notifyArea.width
+        easing.type: Easing.InOutQuad
+        onStopped: modelData.removeRequested()
+    }
     NumberAnimation {
         id:slideBackAnimation
         target: notifyArea
@@ -53,10 +116,12 @@ MouseArea {
     }
 
     Rectangle {
+        id:pressBg
         anchors.fill: parent
-        color: "#11ffffff"
+        color: Theme.fillColor
         visible: notifyArea.pressed
         radius: Theme.itemSpacingMedium
+        opacity: 0.1
     }
 
     Image {
@@ -68,13 +133,21 @@ MouseArea {
         anchors{
             left: parent.left
             leftMargin: Theme.itemSpacingLarge
+            verticalCenter:parent.verticalCenter
         }
 
         source: {
-            if (modelData.icon)
-                return "image://theme/" + modelData.icon
-            else
-                return defaultIcon
+            if (modelData.icon) {
+                if(modelData.icon.indexOf("/") == 0)
+                    return "file://" + modelData.icon
+                else
+                    return "image://theme/" + modelData.icon
+            } else if (modelData.appIcon) {
+                if(modelData.appIcon.indexOf("/") == 0)
+                    return "file://" + modelData.appIcon
+                else
+                    return "image://theme/" + modelData.appIcon
+            } else return defaultIcon
         }
         onStatusChanged: {
             if (appIcon.status == Image.Error) {
@@ -82,48 +155,65 @@ MouseArea {
             }
         }
     }
-    Label {
-        id: appName
-        text: modelData.appName
-        width: (parent.width-appIcon.width)-Theme.itemSpacingHuge
-        color: Theme.textColor
-        font.pixelSize: Theme.fontSizeMedium
-        font.capitalization: Font.AllUppercase
-        font.bold: true
+    Column {
+        id:labelColumn
         anchors {
-            left: appIcon.right
-            top: parent.top
+            left:appIcon.right
             leftMargin: Theme.itemSpacingLarge
+            verticalCenter: appIcon.verticalCenter
         }
-    }
+        height: parent.height
+        width: parent.width-appIcon.width-Theme.itemSpacingLarge*2
 
-    Label {
-        id: appSummary
-        text: modelData.summary
-        width: (parent.width-appIcon.width)-Theme.itemSpacingHuge
-        color: Theme.textColor
-        font.pixelSize: Theme.fontSizeSmall
-        //font.bold :true
-        //font.capitalization: Font.AllUppercase
+        Label {
+            id: appName
+            text: modelData.appName
+            width: Math.min(implicitWidth,  parent.width-appTimestamp.width-Theme.itemSpacingSmall)
+            color: Theme.textColor
+            elide: Text.ElideRight
+            font.pixelSize: Theme.fontSizeSmall
+            anchors {
+                left: parent.left
+            }
+        }
+        Label {
+            id:appTimestamp
+            color: Theme.textColor
+            font.pixelSize: Theme.fontSizeTiny
+            text: if(timeAgo) timeAgo
+            horizontalAlignment: Text.AlignRight
+            anchors {
+                verticalCenter: appName.verticalCenter
+                rightMargin: Theme.itemSpacingSmall
+                right:labelColumn.right
+            }
+            Component.onCompleted: refreshTimestamp()
+        }
 
-        anchors{
-            left: appName.left
-            top: appName.bottom
-            topMargin: Theme.itemSpacingSmall
+        Label {
+            id: appSummary
+            text: modelData.summary || modelData.previewSummary
+            width: parent.width-Theme.itemSpacingHuge
+            color: Theme.textColor
+            font.pixelSize: Theme.fontSizeTiny
+            anchors{
+                left: parent.left
+            }
+            maximumLineCount: 1
+            elide: Text.ElideRight
         }
-        elide: Text.ElideRight
-    }
 
-    Label {
-        id: appBody
-        width: (parent.width-appIcon.width)-Theme.itemSpacingHuge
-        text: modelData.body
-        color: Theme.textColor
-        font.pixelSize: Theme.fontSizeSmall
-        anchors{
-            left: appName.left
-            top: appSummary.bottom
+        Label {
+            id: appBody
+            width: parent.width-Theme.itemSpacingHuge
+            text: modelData.body || modelData.previewBody
+            color: Theme.textColor
+            font.pixelSize: Theme.fontSizeTiny
+            anchors{
+                left: parent.left
+            }
+            maximumLineCount: 1
+            elide: Text.ElideRight
         }
-        elide: Text.ElideRight
     }
 }

src/qml/notifications/NotificationPreview.qml

@@ -22,7 +22,7 @@
 // Copyright (C) 2012 Jolla Ltd.
 // Contact: Vesa Halttunen <vesa.halttunen@jollamobile.com>
 
-import QtQuick 2.0
+import QtQuick 2.6
 import org.nemomobile.lipstick 0.1
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
@@ -43,7 +43,7 @@ Item {
 
     MouseArea {
         id: notificationArea
-        property int notificationHeight: Theme.itemHeightExtraLarge
+        property int notificationHeight: Theme.itemHeightLarge
         property int notificationMargin: Theme.itemSpacingExtraSmall
         property int notificationIconSize: Theme.itemHeightMedium
         anchors.top: parent.top
@@ -122,6 +122,7 @@ Item {
 
             Image {
                 id: icon
+                property string defaultIcon: "/usr/share/lipstick-glacier-home-qt5/qml/images/notification-circle.png"
                 anchors {
                     top: parent.top
                     left: parent.left
@@ -130,21 +131,41 @@ Item {
                 }
                 width: notificationArea.notificationIconSize
                 height: width
-                source: "/usr/share/lipstick-glacier-home-qt5/qml/images/notification-circle.png"
+                source: {
+                    if(notificationPreviewPresenter.notification) {
+                        if (notificationPreviewPresenter.notification.icon) {
+                            if (notificationPreviewPresenter.notification.icon.indexOf("/") == 0)
+                                return "file://" + notificationPreviewPresenter.notification.icon
+                            else
+                                return "image://theme/" + notificationPreviewPresenter.notification.icon
+                        }else if (notificationPreviewPresenter.notification.appIcon) {
+                            if (notificationPreviewPresenter.notification.appIcon.indexOf("/") == 0)
+                                return "file://" + notificationPreviewPresenter.notification.appIcon
+                            else
+                                return "image://theme/" + notificationPreviewPresenter.notification.appIcon
+                        } else return defaultIcon
+                    } else return defaultIcon
+                }
+                onStatusChanged: {
+                    if (icon.status == Image.Error) {
+                        icon.source = defaultIcon
+                    }
+
+                }
             }
 
             Label {
                 id: summary
                 anchors {
-                    top: parent.top
+                    top: icon.top
                     left: icon.right
                     right: parent.right
                     topMargin: notificationArea.notificationMargin
                     leftMargin: notificationArea.notificationMargin*2
                     rightMargin: notificationArea.notificationMargin
-                    //bottomMargin: notificationArea.notificationMargin
                 }
-                font.pixelSize: Theme.fontSizeMedium
+                height: if(!text) 0
+                font.pixelSize: Theme.fontSizeTiny
                 text: notificationPreviewPresenter.notification != null ? notificationPreviewPresenter.notification.previewSummary : ""
                 color: Theme.textColor
                 clip: true
@@ -158,10 +179,8 @@ Item {
                     left: summary.left
                     right: summary.right
                 }
-                font {
-                    pixelSize: Theme.fontSizeSmall
-                    bold: true
-                }
+                height: if(!text) 0
+                font.pixelSize: Theme.fontSizeSmall
                 text: notificationPreviewPresenter.notification != null ? notificationPreviewPresenter.notification.previewBody : ""
                 color: Theme.textColor
                 clip: true

src/qml/statusbar/BatteryIndicator.qml

@@ -38,9 +38,9 @@ StatusbarItem {
         }
     }
 
-    iconSize: root.height/2
+    iconSize: Theme.itemHeightExtraSmall
     panel: BatteryPanel {}
-    source: "/usr/share/lipstick-glacier-home-qt5/qml/images/battery"+chargeValue+".png"
+    source: "/usr/share/lipstick-glacier-home-qt5/qml/images/battery"+chargeValue+".png" //+ (chargeValue === 0 ? "?red" : "")
 
     Timer{
         id: chargingTimer

src/qml/statusbar/CommonPanel.qml

@@ -30,7 +30,7 @@
 **
 ****************************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.6
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Nemo 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
@@ -46,6 +46,7 @@ Rectangle {
     onClick: {
         panel_loader.sourceComponent = parent.panel
         panel_loader.visible = !panel_loader.visible
+        row.currentChild._reopenTimer.start()
         row.currentChild=null
     }
 
@@ -55,24 +56,20 @@ Rectangle {
 
     Rectangle{
         anchors.fill: parent
-        color: "#313131"
+        color: Theme.fillDarkColor
         opacity: 0.3
 
     }
+
     InverseMouseArea {
         anchors.fill: parent
         enabled: parent.visible
+        parent:commonPanel
         onPressed: {
             parent.click()
         }
     }
 
-    MouseArea {
-        id:mouseArea
-        anchors.fill:parent
-        onClicked: parent.click()
-    }
-
     clip: true
 
     default property alias contentItem: dataColumn.children
@@ -94,8 +91,7 @@ Rectangle {
             }
             wrapMode: Text.Wrap
             font.pixelSize: Theme.fontSizeMedium
-            font.bold: true
-            color: "#ffffff"
+            color: Theme.textColor
         }
 
         CheckBox {
@@ -119,7 +115,7 @@ Rectangle {
             topMargin: Theme.itemSpacingMedium
         }
     }
-    //Just placeholder until IconButton will get merged
+
     Image {
         id:settingsIcon
         fillMode: Image.PreserveAspectFit

src/qml/statusbar/StatusbarItem.qml

-import QtQuick 2.0
+import QtQuick 2.6
 import QtQuick.Layouts 1.0
 
 Item {
     property alias source: icon.source
     property alias pressed: mouse.pressed
+    property alias _reopenTimer: reopenTimer
     property string panel_source
     property Component panel
     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
+        if(reopenTimer.running){
+            panel_loader.visible = false
+            row.currentChild = null
+        } else {
+            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
+        opacity: 0.6
         color: Theme.fillDarkColor
         visible: panel_loader.visible && (panel_loader.sourceComponent == panel)
     }
@@ -30,6 +36,7 @@ Item {
     Image {
         fillMode: Image.PreserveAspectFit
         height: iconSize
+        width: iconSize
         id: icon
         anchors.centerIn: parent
     }
@@ -41,5 +48,10 @@ Item {
         enabled: !lockscreenVisible()
         onClicked: parent.clicked()
     }
+    Timer {
+        id: reopenTimer
+        interval: 300
+        running: false
+    }
 
 }

src/qml/statusbar/WifiPanel.qml

@@ -38,12 +38,12 @@ import MeeGo.Connman 0.2
 Component {
     CommonPanel {
         id: wifiPanel
-        name: "Wifi"
+        name: qsTr("Wifi")
         switcherEnabled: true
         switcherChecked: wifimodel.powered
 
         onSwitcherCheckedChanged: {
-             wifimodel.setPowered(switcherChecked)
+            wifimodel.setPowered(switcherChecked)
         }
 
         property list<QtObject> _data: [
@@ -53,9 +53,12 @@ Component {
             }
         ]
 
-        Repeater {
+        ListView {
             anchors.top: parent.top
             model: wifimodel
+            width: parent.width
+            height: wifiPanel.height
+            clip: true
             delegate: Item {
                 width: wifiPanel.width
                 height: Theme.itemHeightSmall
@@ -76,7 +79,7 @@ Component {
                     spacing: Theme.itemSpacingSmall
                     Image {
                         id: statusImage
-                       source: (getStrengthIndex(modelData.strength) === "0")? "image://theme/icon_wifi_0" : (modelData.state === "online" ? "image://theme/icon_wifi_focused" : "image://theme/icon_wifi_normal")+ getStrengthIndex(modelData.strength)
+                        source: (getStrengthIndex(modelData.strength) === "0")? "image://theme/icon_wifi_0" : (modelData.state === "online" ? "image://theme/icon_wifi_focused" : "image://theme/icon_wifi_normal")+ getStrengthIndex(modelData.strength)
                     }
 
                     Label {