[NotificationItem] Minor improvements across glacier-home and timestamps added to notifications

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.itemHeightExtraLarge + 2 * toolBar.padding
+
+        Rectangle {
+            anchors.fill: parent
+            color: Theme.fillDarkColor
+            opacity: 0.3
+            border {
+                width: 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

src/qml/FeedsPage.qml

@@ -81,20 +81,33 @@ 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
             }
-            spacing: Theme.itemSpacingHuge
+            spacing: Theme.itemSpacingMedium
             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/Lockscreen.qml

@@ -80,12 +80,13 @@ 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 {
             enabled:DeviceLock.state !== DeviceLock.Locked
             scale: notificationColumn.opacity
@@ -93,11 +94,13 @@ Image {
             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/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,15 +5,18 @@ import QtQuick.Controls.Styles.Nemo 1.0
 MouseArea {
     id: notifyArea
 
-    height: childrenRect.height
+    height:  Theme.itemHeightExtraLarge*1.2
     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
 
     drag.target: notifyArea
     drag.axis: Drag.XAxis
@@ -27,6 +30,49 @@ MouseArea {
         }
     }
 
+    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()
@@ -53,10 +99,12 @@ MouseArea {
     }
 
     Rectangle {
+        id:pressBg
         anchors.fill: parent
-        color: "#11ffffff"
+        color: Theme.fillColor
         visible: notifyArea.pressed
         radius: Theme.itemSpacingMedium
+        opacity: 0.1
     }
 
     Image {
@@ -68,6 +116,7 @@ MouseArea {
         anchors{
             left: parent.left
             leftMargin: Theme.itemSpacingLarge
+            verticalCenter:parent.verticalCenter
         }
 
         source: {
@@ -82,48 +131,65 @@ MouseArea {
             }
         }
     }
+    Column {
+        id:labelColumn
+        anchors {
+            left:appIcon.right
+            leftMargin: Theme.itemSpacingLarge
+            verticalCenter: appIcon.verticalCenter
+        }
+        height: parent.height
+        width: parent.width-appIcon.width-Theme.itemSpacingLarge*2
+
         Label {
             id: appName
             text: modelData.appName
-        width: (parent.width-appIcon.width)-Theme.itemSpacingHuge
+            width: parent.width-appTimestamp.width-Theme.itemSpacingSmall
             color: Theme.textColor
-        font.pixelSize: Theme.fontSizeMedium
+            elide: Text.ElideRight
+            font.pixelSize: Theme.fontSizeSmall
             font.capitalization: Font.AllUppercase
-        font.bold: true
             anchors {
-            left: appIcon.right
-            top: parent.top
-            leftMargin: Theme.itemSpacingLarge
+                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()
         }
 
         Label {
             id: appSummary
-        text: modelData.summary
-        width: (parent.width-appIcon.width)-Theme.itemSpacingHuge
+            text: modelData.summary || modelData.previewSummary
+            width: parent.width-Theme.itemSpacingHuge
             color: Theme.textColor
-        font.pixelSize: Theme.fontSizeSmall
-        //font.bold :true
-        //font.capitalization: Font.AllUppercase
-
+            font.pixelSize: Theme.fontSizeTiny
             anchors{
-            left: appName.left
-            top: appName.bottom
-            topMargin: Theme.itemSpacingSmall
+                left: parent.left
+               // topMargin: Theme.itemSpacingSmall
             }
             elide: Text.ElideRight
         }
 
         Label {
             id: appBody
-        width: (parent.width-appIcon.width)-Theme.itemSpacingHuge
-        text: modelData.body
+            width: parent.width-Theme.itemSpacingHuge
+            text: modelData.body || modelData.previewBody
             color: Theme.textColor
-        font.pixelSize: Theme.fontSizeSmall
+            font.pixelSize: Theme.fontSizeTiny
             anchors{
-            left: appName.left
-            top: appSummary.bottom
+                left: parent.left
             }
             elide: Text.ElideRight
         }
+    }
 }

src/qml/notifications/NotificationPreview.qml

@@ -136,7 +136,7 @@ Item {
             Label {
                 id: summary
                 anchors {
-                    top: parent.top
+                    top: icon.top
                     left: icon.right
                     right: parent.right
                     topMargin: notificationArea.notificationMargin
@@ -144,11 +144,13 @@ Item {
                     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
                 elide: Text.ElideRight
+                Component.onCompleted: console.log(height, "--",  notificationPreviewPresenter.notification != null)
             }
 
             Label {
@@ -158,9 +160,10 @@ Item {
                     left: summary.left
                     right: summary.right
                 }
+                height: if(!text) 0
                 font {
-                    pixelSize: Theme.fontSizeSmall
                     bold: true
+                    pixelSize: Theme.fontSizeSmall
                 }
                 text: notificationPreviewPresenter.notification != null ? notificationPreviewPresenter.notification.previewBody : ""
                 color: Theme.textColor

src/qml/statusbar/CommonPanel.qml

@@ -55,7 +55,7 @@ Rectangle {
 
     Rectangle{
         anchors.fill: parent
-        color: "#313131"
+        color: Theme.fillDarkColor
         opacity: 0.3
 
     }

src/qml/statusbar/StatusbarItem.qml

@@ -22,7 +22,7 @@ Item {
 
     Rectangle{
         anchors.fill:parent
-        opacity: 0.8
+        opacity: 0.6
         color: Theme.fillDarkColor
         visible: panel_loader.visible && (panel_loader.sourceComponent == panel)
     }