medvedych/harbour-tooter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improved notifications UI

Browse source 
notifications (mentions, favs, reblogs) are distinguished by different looks (initial commits)
This commit is contained in:
molan-git 2020-06-06 23:17:27 +02:00
parent 5f4dae2a2d
commit 9fb1efc189
2 changed files with 42 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
qml/pages/ConversationPage.qml
View file

@ -17,7 +17,7 @@ Page {
property ListModel suggestedModel property ListModel suggestedModel
property string toot_id: "" property string toot_id: ""
property string toot_url: "" property string toot_url: ""
property int tootMaxChar: 500; property int tootMaxChar: 500
property ListModel mdl property ListModel mdl
allowedOrientations: Orientation.All allowedOrientations: Orientation.All
@ -65,8 +65,8 @@ Page {
visible: false visible: false
} }
SilicaListView { SilicaListView {
id: conversationList id: myList
header: PageHeader { header: PageHeader {
title: headerTitle // pageTitle pushed from MainPage.qml or VisualContainer.qml title: headerTitle // pageTitle pushed from MainPage.qml or VisualContainer.qml
} }

43
qml/pages/components/VisualContainer.qml
View file

@ -10,8 +10,9 @@ BackgroundItem {
signal navigateTo(string link) signal navigateTo(string link)
width: parent.width 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 { Rectangle {
id: bgDirect id: bgDirect
x: 0 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 { MiniStatus {
id: miniStatus id: miniStatus
anchors { 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 { Image {
id: iconTR id: iconTR
visible: typeof status_reblogged !== "undefined" && status_reblogged visible: typeof status_reblogged !== "undefined" && status_reblogged
@ -109,6 +131,7 @@ BackgroundItem {
} }
Image { Image {
id: reblogAvatar
asynchronous: true asynchronous: true
smooth: true smooth: true
opacity: status === Image.Ready ? 1.0 : 0.0 opacity: status === Image.Ready ? 1.0 : 0.0
@ -118,6 +141,13 @@ BackgroundItem {
width: Theme.iconSizeSmall width: Theme.iconSizeSmall
height: width 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)+'" ') text: content.replace(new RegExp("<a ", 'g'), '<a style="text-decoration: none; color:'+(pressed ? Theme.secondaryColor : Theme.highlightColor)+'" ')
textFormat: Text.RichText textFormat: Text.RichText
font.pixelSize: Theme.fontSizeSmall 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 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") { height: if (model.type === "follow") {
Theme.paddingLarge Theme.paddingLarge
} else content.length ? (contentWarningLabel.paintedHeight > paintedHeight ? contentWarningLabel.paintedHeight : paintedHeight) : 0 } else content.length ? (contentWarningLabel.paintedHeight > paintedHeight ? contentWarningLabel.paintedHeight : paintedHeight) : 0
@ -213,6 +247,7 @@ BackgroundItem {
MediaBlock { MediaBlock {
id: media 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'); model: typeof attachments !== "undefined" ? attachments : Qt.createQmlObject('import QtQuick 2.0; ListModel { }', Qt.application, 'InternalQmlObject');
height: Theme.iconSizeExtraLarge * 2 height: Theme.iconSizeExtraLarge * 2
anchors { anchors {