improved notifications UI

- small changes / additions

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/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)
@@ -29,10 +29,10 @@ FullscreenContentPage {
     Flickable {
         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(){
-                stop()
+            onStopped: function() {
+                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

@@ -12,7 +12,7 @@ BackgroundItem {
     width: parent.width
     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)
+            } 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
@@ -39,7 +39,7 @@ BackgroundItem {
     } */
 
     Rectangle {
-        id: bgDelegate
+        id: bgNotifications
         x: 0
         y: 0
         visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
@@ -118,7 +118,22 @@ 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 {
+            id: bgReblogAvatar
             color: Theme.highlightDimmerColor
             width: Theme.iconSizeSmall
             height: width
@@ -141,14 +156,35 @@ BackgroundItem {
                 width: Theme.iconSizeSmall
                 height: width
             }
+        }
 
         Rectangle {
-                visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
-                opacity: 0.5
+            id: bgBotIcon
             color: Theme.highlightDimmerColor
-                anchors.fill: reblogAvatar
+            radius: Theme.paddingSmall
+            width: Theme.iconSizeSmall
+            height: width
+            visible: true //typeof status_reblog !== "undefined" && status_reblog
+            anchors {
+                top: parent.top
+                topMargin: -width/3
+                left: parent.left
+                leftMargin: -width/3
+            }
+
+            Image {
+                id: botIcon
+                asynchronous: true
+                smooth: true
+                opacity: status === Image.Ready ? 1.0 : 0.0
+                Behavior on opacity { FadeAnimator {} }
+                source: "image://theme/icon-s-alarm?" //typeof reblog_account_avatar !== "undefined" ? reblog_account_avatar : ''
+                visible: typeof bot === true //typeof status_reblog !== "undefined" && status_reblog
+                width: Theme.iconSizeSmall
+                height: width
             }
         }
+
     }
 
     MiniHeader {