From 9fb1efc189830af7db028091d97c956e887fe4ca Mon Sep 17 00:00:00 2001
From: molan-git <mol_an@sunrise.ch>
Date: Sat, 6 Jun 2020 23:17:27 +0200
Subject: [PATCH] improved notifications UI

notifications (mentions, favs, reblogs) are distinguished by different looks (initial commits)
---
 qml/pages/ConversationPage.qml           |  6 ++--
 qml/pages/components/VisualContainer.qml | 43 +++++++++++++++++++++---
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/qml/pages/ConversationPage.qml b/qml/pages/ConversationPage.qml
index fb57082..221ae56 100644
--- a/qml/pages/ConversationPage.qml
+++ b/qml/pages/ConversationPage.qml
@@ -17,7 +17,7 @@ Page {
 	property ListModel suggestedModel
 	property string toot_id: ""
     property string toot_url: ""
-    property int tootMaxChar: 500;
+    property int tootMaxChar: 500
 	property ListModel mdl
 
 	allowedOrientations: Orientation.All
@@ -65,8 +65,8 @@ Page {
 		visible: false
 	}
 
-	SilicaListView {
-		id: conversationList
+    SilicaListView {
+        id: myList
 		header: PageHeader {
             title: headerTitle // pageTitle pushed from MainPage.qml or VisualContainer.qml
 		}
diff --git a/qml/pages/components/VisualContainer.qml b/qml/pages/components/VisualContainer.qml
index b86e715..b82044e 100644
--- a/qml/pages/components/VisualContainer.qml
+++ b/qml/pages/components/VisualContainer.qml
@@ -10,8 +10,9 @@ BackgroundItem {
     signal navigateTo(string link)
 
     width: parent.width
-    height: mnu.height +  miniHeader.height + (typeof attachments !== "undefined" && attachments.count ? media.height + Theme.paddingLarge + Theme.paddingMedium: Theme.paddingLarge) + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0)
-
+    height: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
+                mnu.height + miniHeader.height + Theme.paddingLarge + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0)
+            } else mnu.height + miniHeader.height + (typeof attachments !== "undefined" && attachments.count ? media.height + Theme.paddingLarge + Theme.paddingMedium: Theme.paddingLarge) + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0)
     Rectangle {
         id: bgDirect
         x: 0
@@ -37,6 +38,20 @@ BackgroundItem {
         }
     } */
 
+    Rectangle {
+        id: bgDelegate
+        x: 0
+        y: 0
+        visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
+        width: parent.width
+        height: parent.height
+        opacity: 0.5
+        gradient: Gradient {
+                GradientStop { position: -0.5; color: "transparent" }
+                GradientStop { position: 0.4; color: Theme.highlightDimmerColor }
+        }
+    }
+
     MiniStatus {
         id: miniStatus
         anchors {
@@ -83,6 +98,13 @@ BackgroundItem {
             }
         }
 
+        Rectangle {
+            visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
+            opacity: 0.5
+            color: Theme.highlightDimmerColor
+            anchors.fill: avatar
+        }
+
         Image {
             id: iconTR
             visible: typeof status_reblogged !== "undefined" && status_reblogged
@@ -109,6 +131,7 @@ BackgroundItem {
             }
 
             Image {
+                id: reblogAvatar
                 asynchronous: true
                 smooth: true
                 opacity: status === Image.Ready ? 1.0 : 0.0
@@ -118,6 +141,13 @@ BackgroundItem {
                 width: Theme.iconSizeSmall
                 height: width
             }
+
+            Rectangle {
+                visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
+                opacity: 0.5
+                color: Theme.highlightDimmerColor
+                anchors.fill: reblogAvatar
+            }
         }
     }
 
@@ -136,9 +166,13 @@ BackgroundItem {
         text: content.replace(new RegExp("<a ", 'g'), '<a style="text-decoration: none; color:'+(pressed ?  Theme.secondaryColor : Theme.highlightColor)+'" ')
         textFormat: Text.RichText
         font.pixelSize: Theme.fontSizeSmall
-        linkColor: Theme.highlightColor
+        linkColor: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
+                   Theme.secondaryHighlightColor
+               } else Theme.highlightColor
         wrapMode: Text.Wrap
-        color: (pressed ? Theme.highlightColor : (!highlight ? Theme.primaryColor : Theme.secondaryColor))
+        color: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
+                   (pressed ? Theme.secondaryHighlightColor : (!highlight ? Theme.secondaryColor : Theme.secondaryHighlightColor))
+               } else (pressed ? Theme.highlightColor : (!highlight ? Theme.primaryColor : Theme.secondaryColor))
         height: if (model.type === "follow") {
                     Theme.paddingLarge
                 } else content.length ? (contentWarningLabel.paintedHeight > paintedHeight ? contentWarningLabel.paintedHeight : paintedHeight) : 0
@@ -213,6 +247,7 @@ BackgroundItem {
 
     MediaBlock {
         id: media
+        visible: myList.type !== "notifications" && ( model.type !== "favourite" || model.type !== "reblog" )
         model: typeof attachments !== "undefined" ? attachments : Qt.createQmlObject('import QtQuick 2.0; ListModel {   }', Qt.application, 'InternalQmlObject');
         height: Theme.iconSizeExtraLarge * 2
         anchors {