Merge branch 'notifications-improvements' into ui-improvements

harbour-tooter.pro

@@ -53,6 +53,7 @@ HEADERS += src/dbusAdaptor.h
 HEADERS += src/dbus.h
 
 DISTFILES += qml/harbour-tooter.qml \
+    qml/images/tooter-cover.svg \
     qml/pages/ConversationPage.qml \
     qml/pages/ProfilePage.qml \
     qml/pages/SettingsPage.qml \
@@ -75,7 +76,6 @@ DISTFILES += qml/harbour-tooter.qml \
     qml/pages/Browser.qml \
     qml/lib/API.js \
     qml/images/icon-s-following \
-    qml/images/tooter.svg \
     qml/images/icon-m-emoji.svg \
     qml/images/icon-m-profile.svg \
     qml/images/icon-l-profile.svg \

qml/cover/CoverPage.qml

@@ -46,19 +46,21 @@ CoverBackground {
             break;
         }
     }
+
     Image {
         id: bg
+        source: "../images/tooter-cover.svg"
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignBottom
+        fillMode: Image.PreserveAspectFit
         anchors {
             bottom : parent.bottom
             left: parent.left
             right: parent.right
             top: parent.top
         }
-        horizontalAlignment: Image.AlignLeft
-        verticalAlignment: Image.AlignBottom
-        fillMode: Image.PreserveAspectFit
-        source: "../images/tooter.svg"
     }
+
     Timer {
         id: timer
         interval: 60*1000
@@ -69,34 +71,34 @@ CoverBackground {
 
     Image {
         id: iconNot
+        source: "image://theme/icon-s-alarm?" + Theme.highlightColor
         anchors {
             left: parent.left
             top: parent.top
             leftMargin: Theme.paddingLarge
             topMargin: Theme.paddingLarge
         }
-        source: "image://theme/icon-s-alarm?" + Theme.highlightColor
     }
 
     Label {
         id: notificationsLbl
+        text: " "
+        color: Theme.highlightColor
         anchors {
             left: iconNot.right
             leftMargin: Theme.paddingMedium
             verticalCenter: iconNot.verticalCenter
         }
-        text: " "
-        color: Theme.highlightColor
     }
 
     Label {
+        text: "Tooter"
+        color: Theme.secondaryColor
         anchors {
             right: parent.right
             rightMargin: Theme.paddingLarge
             verticalCenter: iconNot.verticalCenter
         }
-        text: "Tooter"
-        color: Theme.primaryColor
     }
 
     signal activateapp(string person, string notice)

qml/pages/ConversationPage.qml

@@ -66,8 +66,8 @@ Page {
 		visible: false
 	}
 
-	SilicaListView {
+    SilicaListView {
-		id: conversationList
+        id: myList
 		header: PageHeader {
             title: headerTitle // pageTitle pushed from MainPage.qml or VisualContainer.qml
 		}

qml/pages/components/MediaFullScreen.qml

@@ -5,12 +5,12 @@ import QtMultimedia 5.0
 
 FullscreenContentPage {
     id: mediaPage
-    allowedOrientations: Orientation.All
 
     property string type: ""
     property string previewURL: ""
     property string mediaURL: ""
 
+    allowedOrientations: Orientation.All
     Component.onCompleted: function(){
         console.log(type)
         console.log(previewURL)
@@ -27,12 +27,12 @@ FullscreenContentPage {
     }
 
     Flickable {
-        id: videoFlickable
+        id: videoFlickable        
         visible: false
-        anchors.fill: parent
+        clip: true
         contentWidth: imageContainer.width
         contentHeight: imageContainer.height
-        clip: true
+        anchors.fill: parent
 
         Image {
             id: videoPreview
@@ -45,7 +45,7 @@ FullscreenContentPage {
             id: video
             anchors.fill: parent
             onErrorStringChanged: function(){
-                videoError.visible = true;
+                videoError.visible = true
             }
             onStatusChanged: {
                 console.log(status)
@@ -83,19 +83,22 @@ FullscreenContentPage {
                     playerProgress.value = position
                 }
             }
-            onStopped: function(){
+            onStopped: function() {
-                stop()
+                if (video.duration < 30000)
+                    video.play()
+                else
+                    video.stop()
             }
 
             IconButton {
                 id: playerIcon
+                icon.source: "image://theme/icon-m-play"
                 anchors {
                     left: parent.left
                     bottom: parent.bottom
                     leftMargin: Theme.horizontalPageMargin
                     bottomMargin: Theme.horizontalPageMargin
                 }
-                icon.source: "image://theme/icon-m-play"
                 onClicked: function() {
                     if (video.playbackState === MediaPlayer.PlayingState)
                         video.pause()
@@ -161,7 +164,7 @@ FullscreenContentPage {
         clip: true
         anchors.fill: parent
         onHeightChanged: if (imagePreview.status === Image.Ready) {
-                             imagePreview.fitToScreen();
+                             imagePreview.fitToScreen()
                          }
 
         Item {
@@ -218,11 +221,11 @@ FullscreenContentPage {
 
         PinchArea {
             id: pinchArea
-            opacity: 0.3
 
             property real minScale: 1.0
             property real maxScale: 3.0
 
+            opacity: 0.3
             anchors.fill: parent
             enabled: imagePreview.status === Image.Ready
             pinch.target: imagePreview

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) + (iconDirectMsg.visible ? iconDirectMsg.height : 0)
     Rectangle {
         id: bgDirect
         x: 0
@@ -37,6 +38,20 @@ BackgroundItem {
         }
     } */
 
+    Rectangle {
+        id: bgNotifications
+        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
@@ -96,8 +118,23 @@ BackgroundItem {
             }
         }
 
+        Image {
+            id: iconDirectMsg
+            visible: status_visibility == 'direct'
+            width: Theme.iconSizeMedium
+            height: width
+            source: "image://theme/icon-m-mail"
+            anchors {
+                horizontalCenter: avatar.horizontalCenter
+                top: avatar.bottom
+                topMargin: Theme.paddingMedium
+                left: avatar.left
+            }
+        }
+
         Rectangle {
-            color: Theme.highlightDimmerColor
+            id: bgReblogAvatar
+            color: Theme.secondaryColor
             width: Theme.iconSizeSmall
             height: width
             visible: typeof status_reblog !== "undefined" && status_reblog
@@ -109,6 +146,7 @@ BackgroundItem {
             }
 
             Image {
+                id: reblogAvatar
                 asynchronous: true
                 smooth: true
                 opacity: status === Image.Ready ? 1.0 : 0.0
@@ -136,9 +174,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 +255,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 {