[notification] Show long notifications in NotificationCenter

- Long notification is wrapped on multiple lines in NotificationCenter
  and ListItem height is expanded according to text length
- Use indicator for NeptuneIconLabel in ListItemBasics to avoid binding
  loop
- Separate NotificationToast and NotificationCenter for that those can
  be displayed and animated separately.

Change-Id: I02bae7b7c09d3c80928aa2ba024aedbcafcd074b
Reviewed-by: Alexandra Betouni <ABetouni@luxoft.com>
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

5 files changed, 55 insertions, 75 deletions

diff --git a/imports/shared/controls/ListItemBasic.qml b/imports/shared/controls/ListItemBasic.qml
index 9587fa88..ed693d1d 100644
--- a/imports/shared/controls/ListItemBasic.qml
+++ b/imports/shared/controls/ListItemBasic.qml
@@ -160,29 +160,28 @@ ItemDelegate {
                         ) + topPadding + bottomPadding
     implicitWidth: NeptuneStyle.dp(100)
 
-
+    indicator: NeptuneIconLabel {
+        height: root.height
+        opacity: NeptuneStyle.opacityHigh
+        iconScale: NeptuneStyle.scale
+        spacing: root.spacing
+        mirrored: root.mirrored
+        display: root.display
+        icon: root.icon
+    }
 
     contentItem: Item {
 
-        NeptuneIconLabel {
-            id: iconItem
-            height: parent.height
-            opacity: NeptuneStyle.opacityHigh
-            iconScale: NeptuneStyle.scale
-            spacing: root.spacing
-            mirrored: root.mirrored
-            display: root.display
-            icon: root.icon
-        }
-
         RowLayout {
-            anchors.fill: parent
-            anchors.leftMargin: iconItem.width + root.spacing
+            anchors.left: parent.left
+            anchors.right: parent.right
+
             ColumnLayout {
                 Layout.fillWidth: true
                 Label {
                     id: listItemText
                     Layout.fillWidth: true
+                    Layout.leftMargin: indicator ? indicator.width + root.spacing : 0
                     text: root.text
                     font: root.font
                     elide: Text.ElideRight
@@ -197,7 +196,7 @@ ItemDelegate {
                 Label {
                     id: subtitle
                     Layout.fillWidth: true
-                    rightPadding: iconItem ? iconItem.width + root.spacing : 0
+                    Layout.leftMargin: indicator ? indicator.width + root.spacing : 0
                     elide: Text.ElideRight
                     wrapMode: root.wrapText ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap
                     horizontalAlignment: Text.AlignLeft
diff --git a/sysui/notification/NotificationCenter.qml b/sysui/notification/NotificationCenter.qml
index 9a2c1a68..ae30fcd1 100644
--- a/sysui/notification/NotificationCenter.qml
+++ b/sysui/notification/NotificationCenter.qml
@@ -40,6 +40,8 @@ import com.pelagicore.styles.neptune 3.0
 Item {
     id: root
 
+    y: root.notificationCenterVisible ? root.dragMaximumY : -root.dragMinimumY
+
     height: {
         var totalHeight = notificationList.height + root.notificationBottomMargin + root.notificationTopMargin;
         if (totalHeight > NeptuneStyle.dp(1720)) {
@@ -49,36 +51,30 @@ Item {
     }
 
     property NotificationModel notificationModel
+    readonly property int notificationCenterMaxHeight: notificationList.height + root.notificationTopMargin + root.notificationBottomMargin
+    readonly property int listviewMaxHeight: NeptuneStyle.dp(1720) - root.notificationTopMargin - root.notificationBottomMargin
     readonly property int notificationTopMargin: NeptuneStyle.dp(80)
     readonly property int notificationBottomMargin: NeptuneStyle.dp(144)
-    readonly property int dragMaximumY: NeptuneStyle.dp(130)
-    readonly property int dragMinimumY: root.height - NeptuneStyle.dp(130)
+    readonly property int dragMaximumY: 0
+    readonly property int dragMinimumY: root.height
     readonly property bool notificationCenterVisible: root.notificationModel.notificationCenterVisible
-    property Item notificationCenterParent
-    property int toastHeight: 0
-
-    y: root.notificationCenterVisible ? root.dragMaximumY : - root.dragMinimumY
-    Behavior on y { DefaultNumberAnimation { } }
 
-    onYChanged: {
-        if (root.y > - root.dragMinimumY && !root.notificationModel.notificationToastVisible) {
-            notificationCenterBg.opacity = 1.0;
-        } else if (root.y === - root.dragMinimumY && !root.notificationCenterVisible) {
-            notificationCenterBg.opacity = 0.0;
-        }
+    Behavior on y {
+        enabled: !root.notificationModel.notificationToastVisible
+        DefaultNumberAnimation { }
+    }
+    Behavior on height {
+        enabled: !root.notificationModel.notificationToastVisible
+        DefaultNumberAnimation { }
     }
 
     function closeNotificationCenter() {
         root.notificationModel.notificationCenterVisible = !root.notificationModel.notificationCenterVisible;
-        if (!root.notificationModel.notificationCenterVisible) {
-            notificationCenterBg.opacity = 0.0;
-        }
     }
 
     Rectangle {
         id: notificationCenterBg
         anchors.fill: parent
-        opacity: 0.0
         Behavior on opacity { DefaultNumberAnimation { } }
         color: NeptuneStyle.offMainColor
     }
@@ -97,31 +93,19 @@ Item {
         ListView {
             id: notificationList
             width: parent.width
-            height: {
-                var maxHeight = NeptuneStyle.dp(1720) - root.notificationTopMargin - root.notificationBottomMargin
-                if (delegatedHeight > maxHeight) {
-                    return maxHeight;
-                } else {
-                    return delegatedHeight;
-                }
-            }
+            height: Math.min(contentHeight, root.listviewMaxHeight)
+            interactive: contentHeight > root.listviewMaxHeight
             opacity: notificationCenterBg.opacity
-
-            readonly property int delegatedHeight: NeptuneStyle.dp(110) * (notificationList.count)
-
             model: root.notificationModel.model
-
             clip: true
             ScrollIndicator.vertical: ScrollIndicator {}
             delegate: NotificationItem {
                 id: delegatedItem
-                implicitWidth: notificationList.width
-                implicitHeight: NeptuneStyle.dp(110)
+                width: notificationList.width
                 notificationIcon: icon
                 notificationText: title
                 notificationSubtext: description
                 notificationAccessoryButtonIcon: image
-                wrapText: false
                 onCloseClicked: { root.notificationModel.removeNotification(id); }
                 onButtonClicked: { root.notificationModel.buttonClicked(); }
             }
@@ -157,14 +141,11 @@ Item {
 
     NotificationHandle {
         id: notificationHandle
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.horizontalCenter: root.horizontalCenter
         anchors.top: root.bottom
-        anchors.topMargin: root.notificationModel.notificationToastVisible ? root.toastHeight - root.dragMaximumY : 0
-        dragTarget: root.notificationModel.notificationToastVisible ? root.notificationCenterParent : root
-
+        dragTarget: root
         drag.minimumY: root.notificationModel.notificationToastVisible ? - NeptuneStyle.dp(130) : - root.dragMinimumY
         drag.maximumY: root.notificationModel.notificationToastVisible ? 0 : root.dragMaximumY
-
         drag.onActiveChanged: {
             notificationHandle.prevDragY = notificationHandle.dragTarget.y;
         }
@@ -183,8 +164,7 @@ Item {
         }
 
         onReleased: {
-            if (root.notificationCenterParent.y === - root.notificationCenterParent.height
-                    && !root.notificationModel.notificationToastVisible) {
+            if (!root.notificationModel.notificationToastVisible) {
                 if (!notificationHandle.drag.active && notificationHandle.swipe) {
                     if (root.notificationModel.notificationCenterVisible && notificationHandle.dragDelta > 0) {
                         root.notificationModel.notificationCenterVisible = true;
diff --git a/sysui/notification/NotificationContent.qml b/sysui/notification/NotificationContent.qml
index 5c8cbcfc..5f902d7d 100644
--- a/sysui/notification/NotificationContent.qml
+++ b/sysui/notification/NotificationContent.qml
@@ -41,20 +41,17 @@ ModalOverlay {
     showModalOverlay: notificationCenter.notificationCenterVisible
     onOverlayClicked: notificationCenter.closeNotificationCenter()
 
+    NotificationCenter {
+        id: notificationCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        notificationModel: NotificationModel { }
+    }
     NotificationToast {
         leftPadding: NeptuneStyle.dp(40)
         rightPadding: NeptuneStyle.dp(40)
         anchors.left: parent.left
         anchors.right: parent.right
         notificationModel: notificationCenter.notificationModel
-
-        NotificationCenter {
-            id: notificationCenter
-            anchors.left: parent.left
-            anchors.right: parent.right
-            notificationCenterParent: parent
-            notificationModel: NotificationModel { }
-            toastHeight: parent.height
-        }
     }
 }
diff --git a/sysui/notification/NotificationItem.qml b/sysui/notification/NotificationItem.qml
index 02e38e1e..dd97b445 100644
--- a/sysui/notification/NotificationItem.qml
+++ b/sysui/notification/NotificationItem.qml
@@ -41,9 +41,7 @@ Control {
     property string notificationSubtext
     property url notificationIcon
     property string notificationAccessoryButtonIcon
-    property real contentOpacity: 1.0
     property bool dividerVisible: false
-    property bool wrapText: true
 
     signal buttonClicked()
     signal closeClicked()
@@ -54,19 +52,16 @@ Control {
 
     background: Rectangle {
         color: NeptuneStyle.offMainColor
-        opacity: root.contentOpacity
     }
 
     contentItem: ListItemTwoButtons {
-        opacity: root.contentOpacity
-        wrapText: root.wrapText
+        wrapText: true
         icon.source: root.notificationIcon
         text: root.notificationText
         subText: root.notificationSubtext
         symbolAccessoryButton1: root.notificationAccessoryButtonIcon
         symbolAccessoryButton2: "ic-close"
         dividerVisible: root.dividerVisible
-
         onAccessoryButton1Clicked: root.buttonClicked()
         onAccessoryButton2Clicked: root.closeClicked()
     }
diff --git a/sysui/notification/NotificationToast.qml b/sysui/notification/NotificationToast.qml
index 9e71cce6..51ba5f8a 100644
--- a/sysui/notification/NotificationToast.qml
+++ b/sysui/notification/NotificationToast.qml
@@ -44,16 +44,25 @@ NotificationItem {
        && !root.notificationModel.notificationCenterVisible ? 0 : -root.height
     Behavior on y { DefaultNumberAnimation { } }
 
-    contentOpacity: root.notificationModel.notificationToastVisible ? 1.0 : 0.0
-    Behavior on contentOpacity { DefaultNumberAnimation { } }
+    opacity: root.notificationModel.notificationToastVisible ? 1.0 : 0.0
+    Behavior on opacity { DefaultNumberAnimation { } }
 
-    notificationIcon: root.notificationModel.currentNotification.icon
-    notificationText: root.notificationModel.currentNotification.title
-    notificationSubtext: root.notificationModel.currentNotification.description
-    notificationAccessoryButtonIcon: root.notificationModel.currentNotification.image
     onButtonClicked: { root.notificationModel.buttonClicked(); }
+
     onCloseClicked: {
         root.notificationModel.removeNotification(root.notificationModel.currentNotification.id);
         root.notificationModel.closeNotification()
     }
+
+    Connections {
+        target: root.notificationModel
+        onNotificationToastVisibleChanged: {
+            if (root.notificationModel.notificationToastVisible) {
+                root.notificationIcon = root.notificationModel.currentNotification.icon
+                root.notificationText = root.notificationModel.currentNotification.title
+                root.notificationSubtext = root.notificationModel.currentNotification.description
+                root.notificationAccessoryButtonIcon = root.notificationModel.currentNotification.image
+            }
+        }
+    }
 }