harbour-fernschreiber/qml/components/PhotoTextsListItem.qml
Peter G 3ab0b94831
Highlight unread Converstations (#513)
* Highlight unread conversations

See: #512

* make highlighting configurable

* more verbose variable names

* remove the rectangle gain, it is too annoying

* respect the setting

---------

Co-authored-by: nephros <nemo@pgxperiiia10>
2023-11-18 22:40:12 +01:00

222 lines
8.3 KiB
QML

import QtQuick 2.6
import Sailfish.Silica 1.0
import WerkWolf.Fernschreiber 1.0
import "../js/functions.js" as Functions
ListItem {
id: chatListViewItem
property alias primaryText: primaryText //usually chat name
property alias prologSecondaryText: prologSecondaryText //usually last sender name
property alias secondaryText: secondaryText //usually last message
property alias tertiaryText: tertiaryText //usually last message date
property int unreadCount: 0
property int unreadMentionCount: 0
property int unreadReactionCount: 0
property bool isSecret: false
property bool isVerified: false
property bool isMarkedAsUnread: false
property bool isPinned: false
property bool isMuted: false
property alias pictureThumbnail: pictureThumbnail
contentHeight: Theme.itemSizeExtraLarge
contentWidth: parent.width
ShaderEffectSource {
id: pictureItem
height: Theme.itemSizeLarge
width: height
anchors {
left: parent.left
leftMargin: Theme.horizontalPageMargin
verticalCenter: parent.verticalCenter
}
sourceItem: Item {
width: pictureItem.width
height: pictureItem.width
ProfileThumbnail {
id: pictureThumbnail
replacementStringHint: primaryText.text
width: parent.width
height: parent.width
}
Rectangle {
id: chatPinnedBackground
color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityFaint)
width: Theme.fontSizeLarge
height: Theme.fontSizeLarge
anchors.top: parent.top
radius: parent.width / 2
visible: chatListViewItem.isPinned
}
Icon {
source: "../../images/icon-s-pin.svg"
height: Theme.iconSizeExtraSmall
width: Theme.iconSizeExtraSmall
highlighted: chatListViewItem.highlighted
sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall)
anchors.centerIn: chatPinnedBackground
visible: chatListViewItem.isPinned
}
Rectangle {
id: chatSecretBackground
color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityFaint)
width: Theme.fontSizeLarge
height: Theme.fontSizeLarge
anchors.bottom: parent.bottom
radius: parent.width / 2
visible: chatListViewItem.isSecret
}
Icon {
source: "image://theme/icon-s-secure"
height: Theme.iconSizeExtraSmall
width: Theme.iconSizeExtraSmall
highlighted: chatListViewItem.highlighted
anchors.centerIn: chatSecretBackground
visible: chatListViewItem.isSecret
}
Rectangle {
id: chatUnreadMessagesCountBackground
color: isMuted ? ((Theme.colorScheme === Theme.DarkOnLight) ? "lightgray" : "dimgray") : Theme.highlightBackgroundColor
width: Theme.fontSizeLarge
height: Theme.fontSizeLarge
anchors.right: parent.right
anchors.bottom: parent.bottom
radius: parent.width / 2
visible: chatListViewItem.unreadCount > 0 || chatListViewItem.isMarkedAsUnread
}
Text {
id: chatUnreadMessagesCount
font.pixelSize: Theme.fontSizeExtraSmall
font.bold: true
color: Theme.primaryColor
anchors.centerIn: chatUnreadMessagesCountBackground
visible: chatListViewItem.unreadCount > 0
opacity: isMuted ? Theme.opacityHigh : 1.0
text: Functions.formatUnreadCount(chatListViewItem.unreadCount)
}
Rectangle {
id: chatUnreadReactionCountBackground
color: isMuted ? ((Theme.colorScheme === Theme.DarkOnLight) ? "lightgray" : "dimgray") : Theme.highlightBackgroundColor
width: Theme.fontSizeLarge
height: Theme.fontSizeLarge
anchors.right: parent.right
anchors.top: parent.top
radius: parent.width / 2
visible: chatListViewItem.unreadReactionCount > 0
}
Icon {
source: "image://theme/icon-s-favorite"
height: Theme.iconSizeExtraSmall
width: Theme.iconSizeExtraSmall
highlighted: chatListViewItem.highlighted
anchors.centerIn: chatUnreadReactionCountBackground
visible: chatListViewItem.unreadReactionCount > 0
}
}
}
Column {
id: contentColumn
anchors {
verticalCenter: parent.verticalCenter
left: pictureItem.right
leftMargin: Theme.paddingSmall
right: parent.right
rightMargin: Theme.horizontalPageMargin
}
spacing: Theme.paddingSmall / 2
Row {
id: primaryTextRow
spacing: Theme.paddingMedium
Label {
id: primaryText
textFormat: Text.StyledText
font.pixelSize: Theme.fontSizeMedium
truncationMode: TruncationMode.Fade
anchors.verticalCenter: parent.verticalCenter
width: Math.min(contentColumn.width - (verifiedImage.visible ? (verifiedImage.width + primaryTextRow.spacing) : 0) - (mutedImage.visible ? (mutedImage.width + primaryTextRow.spacing) : 0), implicitWidth)
font.bold: appSettings.highlightUnreadConversations && ( !chatListViewItem.isMuted && (chatListViewItem.unreadCount > 0 || chatListViewItem.isMarkedAsUnread) )
font.italic: appSettings.highlightUnreadConversations && (chatListViewItem.unreadReactionCount > 0)
color: (appSettings.highlightUnreadConversations && (chatListViewItem.unreadCount > 0)) ? Theme.highlightColor : Theme.primaryColor
}
Image {
id: verifiedImage
anchors.verticalCenter: parent.verticalCenter
source: chatListViewItem.isVerified ? "../../images/icon-verified.svg" : ""
sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall)
width: Theme.iconSizeSmall
height: Theme.iconSizeSmall
visible: status === Image.Ready
}
Image {
id: mutedImage
anchors.verticalCenter: parent.verticalCenter
source: chatListViewItem.isMuted ? "../js/emoji/1f507.svg" : ""
sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall)
width: Theme.iconSizeSmall
height: Theme.iconSizeSmall
visible: status === Image.Ready
}
}
Row {
width: parent.width
spacing: Theme.paddingSmall
Label {
id: prologSecondaryText
font.pixelSize: Theme.fontSizeExtraSmall
width: Math.min(implicitWidth, parent.width)
color: Theme.highlightColor
textFormat: Text.StyledText
truncationMode: TruncationMode.Fade
}
Label {
id: secondaryText
font.pixelSize: Theme.fontSizeExtraSmall
width: parent.width - Theme.paddingMedium - prologSecondaryText.width
truncationMode: TruncationMode.Fade
textFormat: Text.StyledText
visible: prologSecondaryText.width < ( parent.width - Theme.paddingLarge )
}
}
Label {
id: tertiaryText
width: parent.width
font.pixelSize: Theme.fontSizeTiny
color: Theme.secondaryColor
truncationMode: TruncationMode.Fade
}
}
Separator {
id: separator
anchors {
bottom: parent.bottom
bottomMargin: -1
}
width: parent.width
color: Theme.primaryColor
horizontalAlignment: Qt.AlignHCenter
}
}