status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-30 00:05:37 +00:00
Code Issues Projects Releases Wiki Activity

feat(StatusChatListItem): introduce muted badge visuals

Browse Source 
Also ensure title font weight stays `normal` when item is `muted`.

Closes #258, #259
This commit is contained in:
Pascal Precht 2021-07-15 14:22:26 +02:00 committed by Michał Cieślak
parent bca231f8c7
commit c17383ce9c
2 changed files with 47 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/StatusQ/sandbox/ListItems.qml
View File

@ -95,11 +95,20 @@ GridLayout {
onUnmute: muted = false onUnmute: muted = false
} }
StatusChatListItem {
name: "muted-with-mentions"
type: StatusChatListItem.Type.PublicChat
muted: true
hasUnreadMessages: true
badge.value: 1
}
StatusChatListItem { StatusChatListItem {
name: "selected-channel" name: "selected-channel"
type: StatusChatListItem.Type.PublicChat type: StatusChatListItem.Type.PublicChat
selected: true selected: true
} }
StatusChatListItem { StatusChatListItem {
name: "selected-muted-channel" name: "selected-muted-channel"
type: StatusChatListItem.Type.PublicChat type: StatusChatListItem.Type.PublicChat
@ -107,6 +116,24 @@ GridLayout {
muted: true muted: true
} }
StatusChatListItem {
name: "selected-muted-channel-with-unread-messages"
type: StatusChatListItem.Type.PublicChat
selected: true
muted: true
hasUnreadMessages: true
}
StatusChatListItem {
name: "selected-muted-with-mentions"
type: StatusChatListItem.Type.PublicChat
selected: true
muted: true
hasUnreadMessages: true
badge.value: 1
}
StatusListItem { StatusListItem {
title: "Title" title: "Title"
} }

37
ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml
View File

@ -143,8 +143,8 @@ Rectangle {
id: chatName id: chatName
anchors.left: statusIcon.visible ? statusIcon.right : identicon.right anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
anchors.leftMargin: statusIcon.visible ? 1 : 8 anchors.leftMargin: statusIcon.visible ? 1 : 8
anchors.right: statusBadge.visible ? statusBadge.left : anchors.right: mutedIcon.visible ? mutedIcon.left :
mutedIcon.visible ? mutedIcon.left : parent.right statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 6 anchors.rightMargin: 6
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -164,27 +164,16 @@ Rectangle {
sensor.containsMouse || sensor.containsMouse ||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4 statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
} }
font.weight: statusChatListItem.hasMention || font.weight: !statusChatListItem.muted &&
(statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages || statusChatListItem.hasUnreadMessages ||
statusBadge.visible ? Font.Bold : Font.Medium statusBadge.visible) ? Font.Bold : Font.Medium
font.pixelSize: 15 font.pixelSize: 15
} }
StatusBadge {
id: statusBadge
anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
border.width: 4
border.color: color
visible: statusBadge.value > 0
}
StatusIcon { StatusIcon {
id: mutedIcon id: mutedIcon
anchors.right: parent.right anchors.right: statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 8 anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 14 width: 14
@ -205,5 +194,19 @@ Rectangle {
visible: mutedIconSensor.containsMouse visible: mutedIconSensor.containsMouse
} }
} }
StatusBadge {
id: statusBadge
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 8
color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
border.width: 4
border.color: color
visible: statusBadge.value > 0
}
} }
} }