d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-29 14:18:49 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make notification count bubbles expand some more

Browse source
This commit is contained in:
Loren Burkholder 2021-12-13 19:05:35 -05:00
parent 45b150fb58
commit 6e7e22b0e7
1 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
resources/qml/RoomList.qml
View file

@ -31,7 +31,7 @@ Page {
anchors.right: parent.right anchors.right: parent.right
height: parent.height height: parent.height
model: Rooms model: Rooms
reuseItems: true reuseItems: false
ScrollHelper { ScrollHelper {
flickable: parent flickable: parent
@ -139,7 +139,7 @@ Page {
height: avatarSize + 2 * Nheko.paddingMedium height: avatarSize + 2 * Nheko.paddingMedium
width: ListView.view.width width: ListView.view.width
state: "normal" state: "normal"
ToolTip.visible: hovered && collapsed ToolTip.visible: hovered && collapsed && !collapsedBubbleHover.hovered && !notificationBubbleHover.hovered
ToolTip.text: roomName ToolTip.text: roomName
onClicked: { onClicked: {
console.log("tapped " + roomId); console.log("tapped " + roomId);
@ -236,21 +236,27 @@ Page {
enabled: false enabled: false
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
height: fontMetrics.averageCharacterWidth * 3 height: fontMetrics.averageCharacterWidth * 3
width: height width: Math.min(Math.max(collapsedBubbleText.width + Nheko.paddingMedium, height), parent.width)
radius: height / 2 radius: height / 2
color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground
ToolTip.text: notificationCount
ToolTip.visible: collapsedBubbleHover.hovered && (notificationCount > 9999)
Label { Label {
id: collapsedBubbleText
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width * 0.8
height: parent.height * 0.8
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
fontSizeMode: Text.Fit fontSizeMode: Text.Fit
font.bold: true font.bold: true
font.pixelSize: fontMetrics.font.pixelSize * 0.8 font.pixelSize: fontMetrics.font.pixelSize * 0.8
color: hasLoudNotification ? "white" : roomItem.bubbleText color: hasLoudNotification ? "white" : roomItem.bubbleText
text: notificationCount > 99 ? "99+" : notificationCount text: notificationCount > 9999 ? "9999+" : notificationCount
}
HoverHandler {
id: collapsedBubbleHover
} }
} }
@ -320,22 +326,35 @@ Page {
visible: notificationCount > 0 visible: notificationCount > 0
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
height: fontMetrics.averageCharacterWidth * 3 height: notificationBubbleText.height + Nheko.paddingMedium
width: height Layout.preferredWidth: Math.max(notificationBubbleText.width + Nheko.paddingMedium, height)
radius: height / 2 radius: height / 2
color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground
ToolTip.text: notificationCount
ToolTip.visible: notificationBubbleHover.hovered && (notificationCount > 9999)
Label { Label {
id: notificationBubbleText
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width * 0.8
height: parent.height * 0.8
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
fontSizeMode: Text.Fit fontSizeMode: Text.Fit
font.bold: true font.bold: true
font.pixelSize: fontMetrics.font.pixelSize * 0.8 font.pixelSize: fontMetrics.font.pixelSize * 0.8
color: hasLoudNotification ? "white" : roomItem.bubbleText color: hasLoudNotification ? "white" : roomItem.bubbleText
text: notificationCount > 99 ? "99+" : notificationCount text: notificationCount > 9999 ? "9999+" : notificationCount
onTextChanged: {
let old = parent.width
parent.width = Math.max(probableWidth + Nheko.paddingMedium, parent.height)
console.log(old + " changed to " + parent.width)
}
HoverHandler {
id: notificationBubbleHover
}
} }
} }