From 9fb1efc189830af7db028091d97c956e887fe4ca Mon Sep 17 00:00:00 2001 From: molan-git Date: Sat, 6 Jun 2020 23:17:27 +0200 Subject: [PATCH 1/3] 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(" 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 { From d0125d86acc486d43198132480730e47142d4a63 Mon Sep 17 00:00:00 2001 From: molan-git Date: Mon, 8 Jun 2020 17:34:32 +0200 Subject: [PATCH 2/3] improved notifications UI - small changes / additions --- harbour-tooter.pro | 2 +- qml/cover/CoverPage.qml | 20 +++++---- qml/images/{tooter.svg => tooter-cover.svg} | 0 qml/pages/components/MediaFullScreen.qml | 23 +++++----- qml/pages/components/VisualContainer.qml | 50 ++++++++++++++++++--- 5 files changed, 68 insertions(+), 27 deletions(-) rename qml/images/{tooter.svg => tooter-cover.svg} (100%) diff --git a/harbour-tooter.pro b/harbour-tooter.pro index fc04db3..bd4e9d9 100644 --- a/harbour-tooter.pro +++ b/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 \ diff --git a/qml/cover/CoverPage.qml b/qml/cover/CoverPage.qml index 63b9d01..70879fc 100644 --- a/qml/cover/CoverPage.qml +++ b/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) diff --git a/qml/images/tooter.svg b/qml/images/tooter-cover.svg similarity index 100% rename from qml/images/tooter.svg rename to qml/images/tooter-cover.svg diff --git a/qml/pages/components/MediaFullScreen.qml b/qml/pages/components/MediaFullScreen.qml index fda8df1..cd182f1 100644 --- a/qml/pages/components/MediaFullScreen.qml +++ b/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(){ - 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 diff --git a/qml/pages/components/VisualContainer.qml b/qml/pages/components/VisualContainer.qml index b82044e..d023566 100644 --- a/qml/pages/components/VisualContainer.qml +++ b/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 - color: Theme.highlightDimmerColor - anchors.fill: reblogAvatar + Rectangle { + id: bgBotIcon + color: Theme.highlightDimmerColor + 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 { From 092c7d880f1963b2b60a165eba51f6f123fd017a Mon Sep 17 00:00:00 2001 From: molan-git Date: Tue, 9 Jun 2020 08:52:22 +0200 Subject: [PATCH 3/3] revert bgBotIcon --- qml/pages/components/VisualContainer.qml | 30 +----------------------- 1 file changed, 1 insertion(+), 29 deletions(-) diff --git a/qml/pages/components/VisualContainer.qml b/qml/pages/components/VisualContainer.qml index d023566..afe3ce9 100644 --- a/qml/pages/components/VisualContainer.qml +++ b/qml/pages/components/VisualContainer.qml @@ -134,7 +134,7 @@ BackgroundItem { Rectangle { id: bgReblogAvatar - color: Theme.highlightDimmerColor + color: Theme.secondaryColor width: Theme.iconSizeSmall height: width visible: typeof status_reblog !== "undefined" && status_reblog @@ -157,34 +157,6 @@ BackgroundItem { height: width } } - - Rectangle { - id: bgBotIcon - color: Theme.highlightDimmerColor - 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 {