Commit 0df0bfa4 authored by eekkelund's avatar eekkelund

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

parent 354a94dd
...@@ -74,7 +74,7 @@ Item { ...@@ -74,7 +74,7 @@ Item {
Flickable { Flickable {
id: flickable id: flickable
contentHeight: gridview.height 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 { MouseArea {
height: flickable.contentHeight > flickable.height ? flickable.contentHeight : flickable.height height: flickable.contentHeight > flickable.height ? flickable.contentHeight : flickable.height
width: flickable.width width: flickable.width
...@@ -88,17 +88,17 @@ Item { ...@@ -88,17 +88,17 @@ Item {
anchors { anchors {
top: parent.top top: parent.top
topMargin: closeMode ? Theme.itemSpacingLarge : 0 topMargin: closeMode ? Theme.itemSpacingLarge : Theme.itemSpacingSmall
bottom: toolBar.top bottom: toolBar.top
left: parent.left left: parent.left
// no right anchor to avoid double margin (complicated math) // no right anchor to avoid double margin (complicated math)
leftMargin: closeMode ? Theme.itemSpacingLarge : 0 leftMargin: closeMode ? Theme.itemSpacingLarge : Theme.itemSpacingSmall
} }
Grid { Grid {
id: gridview id: gridview
columns: 2 columns: 2
spacing: closeMode ? Theme.itemSpacingLarge : 0 spacing: closeMode ? Theme.itemSpacingLarge : Theme.itemSpacingSmall
move: Transition { move: Transition {
NumberAnimation { NumberAnimation {
properties: "x,y" properties: "x,y"
...@@ -159,17 +159,9 @@ Item { ...@@ -159,17 +159,9 @@ Item {
closeMode = false closeMode = false
} }
} }
Rectangle { Item {
id: toolBar id: toolBar
color: Theme.backgroundColor
border {
width: 1
color: Theme.fillDarkColor
}
z: 202
height:Theme.itemHeightExtraLarge + 2*padding
property int padding: Theme.itemSpacingSmall property int padding: Theme.itemSpacingSmall
anchors { anchors {
left: parent.left left: parent.left
right: parent.right right: parent.right
...@@ -177,8 +169,20 @@ Item { ...@@ -177,8 +169,20 @@ Item {
margins: -1 margins: -1
bottomMargin: switcherRoot.closeMode ? statusbar.height : -height bottomMargin: switcherRoot.closeMode ? statusbar.height : -height
} }
Behavior on anchors.bottomMargin { PropertyAnimation { duration: 100 } } 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 { Row {
anchors { anchors {
top: parent.top top: parent.top
...@@ -187,7 +191,7 @@ Item { ...@@ -187,7 +191,7 @@ Item {
left: parent.left left: parent.left
bottom: parent.bottom bottom: parent.bottom
} }
spacing: toolBar.padding*2 spacing: toolBar.padding * 2
Button { Button {
id: toolBarDone id: toolBarDone
...@@ -222,7 +226,7 @@ Item { ...@@ -222,7 +226,7 @@ Item {
top: parent.top top: parent.top
bottom: parent.bottom bottom: parent.bottom
} }
width: parent.width / 2 - toolBar.padding width: parent.width / 2 - toolBar.padding
onClicked: { onClicked: {
// TODO: use close animation inside item // TODO: use close animation inside item
for (var i = gridRepeater.count - 1; i >= 0; i--) { for (var i = gridRepeater.count - 1; i >= 0; i--) {
......
...@@ -81,22 +81,35 @@ Flickable { ...@@ -81,22 +81,35 @@ Flickable {
} }
} }
} }
Timer {
id: timestampTimer
interval: 60000
running: true
repeat: true
}
Column { Column {
id: notificationColumn id: notificationColumn
width: parent.width width: parent.width
anchors{ anchors{
top: daterow.bottom top: daterow.bottom
topMargin: Theme.itemSpacingHuge topMargin: Theme.itemHeightLarge
} }
spacing: Theme.itemSpacingHuge spacing: Theme.itemSpacingMedium
Repeater { Repeater {
model: NotificationListModel { model: NotificationListModel {
id: notifmodel id: notifmodel
} }
delegate: NotificationItem{} delegate: NotificationItem{
id: notifItem
Connections {
target: timestampTimer
onTriggered: notifItem.refreshTimestamp()
onRunningChanged: if (timestampTimer.running) notifItem.refreshTimestamp()
}
} }
} }
} }
}
} }
...@@ -80,12 +80,13 @@ Image { ...@@ -80,12 +80,13 @@ Image {
right:parent.right right:parent.right
rightMargin: Theme.itemSpacingLarge rightMargin: Theme.itemSpacingLarge
} }
interactive:false interactive:DeviceLock.state !== DeviceLock.Locked
spacing: 0 spacing: Theme.itemSpacingExtraSmall
model: NotificationListModel { model: NotificationListModel {
id: notifmodel id: notifmodel
} }
clip:true
delegate: NotificationItem { delegate: NotificationItem {
enabled:DeviceLock.state !== DeviceLock.Locked enabled:DeviceLock.state !== DeviceLock.Locked
scale: notificationColumn.opacity scale: notificationColumn.opacity
...@@ -93,11 +94,13 @@ Image { ...@@ -93,11 +94,13 @@ Image {
iconSize: Theme.itemHeightMedium iconSize: Theme.itemHeightMedium
appName.font.pixelSize: Theme.fontSizeSmall appName.font.pixelSize: Theme.fontSizeSmall
appName.visible: DeviceLock.state !== DeviceLock.Locked appName.visible: DeviceLock.state !== DeviceLock.Locked
appName.anchors.verticalCenter: appIcon.verticalCenter appName.anchors.verticalCenter: labelColumn.verticalCenter
appName.anchors.top: null
appBody.font.pixelSize: Theme.fontSizeTiny appBody.font.pixelSize: Theme.fontSizeTiny
appBody.visible: false appBody.visible: false
appTimestamp.visible: false
appSummary.visible: false appSummary.visible: false
pressBg.visible: DeviceLock.state !== DeviceLock.Locked
pressBg.opacity: 0.3
} }
} }
} }
...@@ -100,7 +100,7 @@ MouseArea { ...@@ -100,7 +100,7 @@ MouseArea {
CloseButton { CloseButton {
id: closeButton id: closeButton
width: parent.width/4 width: rotateWindowContent ? parent.width/4 :parent.height/4
height: width height: width
Behavior on scale { PropertyAnimation { duration: 300; easing.type: Easing.OutBack } } Behavior on scale { PropertyAnimation { duration: 300; easing.type: Easing.OutBack } }
scale: switcherRoot.closeMode ? 1 : 0 scale: switcherRoot.closeMode ? 1 : 0
......
...@@ -5,15 +5,18 @@ import QtQuick.Controls.Styles.Nemo 1.0 ...@@ -5,15 +5,18 @@ import QtQuick.Controls.Styles.Nemo 1.0
MouseArea { MouseArea {
id: notifyArea id: notifyArea
height: childrenRect.height height: Theme.itemHeightExtraLarge*1.2
width: parent.width width: parent.width
property alias appIcon: appIcon property alias appIcon: appIcon
property alias appBody: appBody property alias appBody: appBody
property alias appName: appName property alias appName: appName
property alias appSummary: appSummary 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.target: notifyArea
drag.axis: Drag.XAxis drag.axis: Drag.XAxis
...@@ -27,6 +30,49 @@ MouseArea { ...@@ -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: { onClicked: {
if (modelData.userRemovable) { if (modelData.userRemovable) {
slideAnimation.start() slideAnimation.start()
...@@ -53,10 +99,12 @@ MouseArea { ...@@ -53,10 +99,12 @@ MouseArea {
} }
Rectangle { Rectangle {
id:pressBg
anchors.fill: parent anchors.fill: parent
color: "#11ffffff" color: Theme.fillColor
visible: notifyArea.pressed visible: notifyArea.pressed
radius: Theme.itemSpacingMedium radius: Theme.itemSpacingMedium
opacity: 0.1
} }
Image { Image {
...@@ -68,6 +116,7 @@ MouseArea { ...@@ -68,6 +116,7 @@ MouseArea {
anchors{ anchors{
left: parent.left left: parent.left
leftMargin: Theme.itemSpacingLarge leftMargin: Theme.itemSpacingLarge
verticalCenter:parent.verticalCenter
} }
source: { source: {
...@@ -82,48 +131,65 @@ MouseArea { ...@@ -82,48 +131,65 @@ MouseArea {
} }
} }
} }
Label { Column {
id: appName id:labelColumn
text: modelData.appName
width: (parent.width-appIcon.width)-Theme.itemSpacingHuge
color: Theme.textColor
font.pixelSize: Theme.fontSizeMedium
font.capitalization: Font.AllUppercase
font.bold: true
anchors { anchors {
left: appIcon.right left:appIcon.right
top: parent.top
leftMargin: Theme.itemSpacingLarge leftMargin: Theme.itemSpacingLarge
verticalCenter: appIcon.verticalCenter
} }
} height: parent.height
width: parent.width-appIcon.width-Theme.itemSpacingLarge*2
Label { Label {
id: appSummary id: appName
text: modelData.summary text: modelData.appName
width: (parent.width-appIcon.width)-Theme.itemSpacingHuge width: parent.width-appTimestamp.width-Theme.itemSpacingSmall
color: Theme.textColor color: Theme.textColor
font.pixelSize: Theme.fontSizeSmall elide: Text.ElideRight
//font.bold :true font.pixelSize: Theme.fontSizeSmall
//font.capitalization: Font.AllUppercase font.capitalization: Font.AllUppercase
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{ Label {
left: appName.left id: appSummary
top: appName.bottom text: modelData.summary || modelData.previewSummary
topMargin: Theme.itemSpacingSmall width: parent.width-Theme.itemSpacingHuge
color: Theme.textColor
font.pixelSize: Theme.fontSizeTiny
anchors{
left: parent.left
// topMargin: Theme.itemSpacingSmall
}
elide: Text.ElideRight
} }
elide: Text.ElideRight
}
Label { Label {
id: appBody id: appBody
width: (parent.width-appIcon.width)-Theme.itemSpacingHuge width: parent.width-Theme.itemSpacingHuge
text: modelData.body text: modelData.body || modelData.previewBody
color: Theme.textColor color: Theme.textColor
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeTiny
anchors{ anchors{
left: appName.left left: parent.left
top: appSummary.bottom }
elide: Text.ElideRight
} }
elide: Text.ElideRight
} }
} }
...@@ -136,7 +136,7 @@ Item { ...@@ -136,7 +136,7 @@ Item {
Label { Label {
id: summary id: summary
anchors { anchors {
top: parent.top top: icon.top
left: icon.right left: icon.right
right: parent.right right: parent.right
topMargin: notificationArea.notificationMargin topMargin: notificationArea.notificationMargin
...@@ -144,11 +144,13 @@ Item { ...@@ -144,11 +144,13 @@ Item {
rightMargin: notificationArea.notificationMargin rightMargin: notificationArea.notificationMargin
//bottomMargin: notificationArea.notificationMargin //bottomMargin: notificationArea.notificationMargin
} }
font.pixelSize: Theme.fontSizeMedium height: if(!text) 0
font.pixelSize: Theme.fontSizeTiny
text: notificationPreviewPresenter.notification != null ? notificationPreviewPresenter.notification.previewSummary : "" text: notificationPreviewPresenter.notification != null ? notificationPreviewPresenter.notification.previewSummary : ""
color: Theme.textColor color: Theme.textColor
clip: true clip: true
elide: Text.ElideRight elide: Text.ElideRight
Component.onCompleted: console.log(height, "--", notificationPreviewPresenter.notification != null)
} }
Label { Label {
...@@ -158,9 +160,10 @@ Item { ...@@ -158,9 +160,10 @@ Item {
left: summary.left left: summary.left
right: summary.right right: summary.right
} }
height: if(!text) 0
font { font {
pixelSize: Theme.fontSizeSmall
bold: true bold: true
pixelSize: Theme.fontSizeSmall
} }
text: notificationPreviewPresenter.notification != null ? notificationPreviewPresenter.notification.previewBody : "" text: notificationPreviewPresenter.notification != null ? notificationPreviewPresenter.notification.previewBody : ""
color: Theme.textColor color: Theme.textColor
......
...@@ -55,7 +55,7 @@ Rectangle { ...@@ -55,7 +55,7 @@ Rectangle {
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: "#313131" color: Theme.fillDarkColor
opacity: 0.3 opacity: 0.3
} }
......
...@@ -22,7 +22,7 @@ Item { ...@@ -22,7 +22,7 @@ Item {
Rectangle{ Rectangle{
anchors.fill:parent anchors.fill:parent
opacity: 0.8 opacity: 0.6
color: Theme.fillDarkColor color: Theme.fillDarkColor
visible: panel_loader.visible && (panel_loader.sourceComponent == panel) visible: panel_loader.visible && (panel_loader.sourceComponent == panel)
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment