Merge pull request #1062 from Nheko-Reborn/perSpaceNotifs

Per-space notification bubbles

4 files changed, 116 insertions, 64 deletions

diff --git a/resources/qml/CommunitiesList.qml b/resources/qml/CommunitiesList.qml
index 61287789..ca63bffd 100644
--- a/resources/qml/CommunitiesList.qml
+++ b/resources/qml/CommunitiesList.qml
@@ -3,6 +3,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import "./components"
 import "./dialogs"
 import Qt.labs.platform 1.1 as Platform
 import QtQml 2.12
@@ -36,14 +37,27 @@ Page {
             id: communityContextMenu
 
             property string tagId
+            property bool hidden
+            property bool muted
 
-            function show(id_, tags_) {
+            function show(id_, hidden_, muted_) {
                 tagId = id_;
+                hidden = hidden_;
+                muted = muted_;
                 open();
             }
 
             Platform.MenuItem {
+                text: qsTr("Do not show notification counts for this space or tag.")
+                checkable: true
+                checked: communityContextMenu.muted
+                onTriggered: Communities.toggleTagMute(communityContextMenu.tagId)
+            }
+
+            Platform.MenuItem {
                 text: qsTr("Hide rooms with this tag or from this space by default.")
+                checkable: true
+                checked: communityContextMenu.hidden
                 onTriggered: Communities.toggleTagId(communityContextMenu.tagId)
             }
 
@@ -57,6 +71,7 @@ Page {
             property color unimportantText: Nheko.colors.buttonText
             property color bubbleBackground: Nheko.colors.highlight
             property color bubbleText: Nheko.colors.highlightedText
+            required property var model
 
             height: avatarSize + 2 * Nheko.paddingMedium
             width: ListView.view.width
@@ -65,11 +80,11 @@ Page {
             ToolTip.text: model.tooltip
             ToolTip.delay: Nheko.tooltipDelay
             onClicked: Communities.setCurrentTagId(model.id)
-            onPressAndHold: communityContextMenu.show(model.id)
+            onPressAndHold: communityContextMenu.show(model.id, model.hidden, model.muted)
             states: [
                 State {
                     name: "highlight"
-                    when: (communityItem.hovered || model.hidden) && !(Communities.currentTagId == model.id)
+                    when: (communityItem.hovered || model.hidden) && !(Communities.currentTagId === model.id)
 
                     PropertyChanges {
                         target: communityItem
@@ -102,7 +117,7 @@ Page {
 
                 TapHandler {
                     acceptedButtons: Qt.RightButton
-                    onSingleTapped: communityContextMenu.show(model.id)
+                    onSingleTapped: communityContextMenu.show(model.id, model.hidden, model.muted)
                     gesturePolicy: TapHandler.ReleaseWithinBounds
                     acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus | PointerDevice.TouchPad
                 }
@@ -153,6 +168,19 @@ Page {
                     roomid: model.id
                     displayName: model.displayName
                     color: communityItem.backgroundColor
+
+                    NotificationBubble {
+                        notificationCount: model.unreadMessages
+                        hasLoudNotification: model.hasLoudNotification
+                        bubbleBackgroundColor: communityItem.bubbleBackground
+                        bubbleTextColor: communityItem.bubbleText
+                        font.pixelSize: fontMetrics.font.pixelSize * 0.6
+                        mayBeVisible: communitySidebar.collapsed && !model.muted && Settings.spaceNotifications
+                        anchors.right: avatar.right
+                        anchors.bottom: avatar.bottom
+                        anchors.margins: -Nheko.paddingSmall
+                    }
+
                 }
 
                 ElidedLabel {
@@ -169,10 +197,20 @@ Page {
                     Layout.fillWidth: true
                 }
 
+                NotificationBubble {
+                    notificationCount: model.unreadMessages
+                    hasLoudNotification: model.hasLoudNotification
+                    bubbleBackgroundColor: communityItem.bubbleBackground
+                    bubbleTextColor: communityItem.bubbleText
+                    mayBeVisible: !communitySidebar.collapsed && !model.muted && Settings.spaceNotifications
+                    Layout.alignment: Qt.AlignRight
+                    Layout.leftMargin: Nheko.paddingSmall
+                }
+
             }
 
             background: Rectangle {
-                color: backgroundColor
+                color: communityItem.backgroundColor
             }
 
         }
diff --git a/resources/qml/RoomList.qml b/resources/qml/RoomList.qml
index a86ca725..1e61b68b 100644
--- a/resources/qml/RoomList.qml
+++ b/resources/qml/RoomList.qml
@@ -3,6 +3,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import "./components"
 import "./dialogs"
 import "./ui"
 import Qt.labs.platform 1.1 as Platform
@@ -294,9 +295,6 @@ Page {
                 anchors.margins: Nheko.paddingMedium
 
                 Avatar {
-                    // In the future we could show an online indicator by setting the userid for the avatar
-                    //userid: Nheko.currentUser.userid
-
                     id: avatar
 
                     enabled: false
@@ -308,33 +306,17 @@ Page {
                     userid: isDirect ? directChatOtherUserId : ""
                     roomid: roomId
 
-                    Rectangle {
+                    NotificationBubble {
                         id: collapsedNotificationBubble
 
+                        notificationCount: roomItem.notificationCount
+                        hasLoudNotification: roomItem.hasLoudNotification
+                        bubbleBackgroundColor: roomItem.bubbleBackground
+                        bubbleTextColor: roomItem.bubbleText
                         anchors.right: parent.right
                         anchors.bottom: parent.bottom
                         anchors.margins: -Nheko.paddingSmall
-                        visible: collapsed && notificationCount > 0
-                        enabled: false
-                        Layout.alignment: Qt.AlignRight
-                        height: fontMetrics.averageCharacterWidth * 3
-                        width: Math.max(collapsedBubbleText.width, height)
-                        radius: height / 2
-                        color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground
-
-                        Label {
-                            id: collapsedBubbleText
-
-                            anchors.centerIn: parent
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            width: Math.max(implicitWidth + Nheko.paddingMedium, parent.height)
-                            font.bold: true
-                            font.pixelSize: fontMetrics.font.pixelSize * 0.8
-                            color: hasLoudNotification ? "white" : roomItem.bubbleText
-                            text: notificationCount > 9999 ? "9999+" : notificationCount
-                        }
-
+                        mayBeVisible: collapsed && (isSpace ? Settings.spaceNotifications : true)
                     }
 
                 }
@@ -351,7 +333,24 @@ Page {
                     height: avatar.height
                     spacing: Nheko.paddingSmall
 
+                    NotificationBubble {
+                        id: notificationBubble
+
+                        parent: isSpace ? titleRow : subtextRow
+                        notificationCount: roomItem.notificationCount
+                        hasLoudNotification: roomItem.hasLoudNotification
+                        bubbleBackgroundColor: roomItem.bubbleBackground
+                        bubbleTextColor: roomItem.bubbleText
+                        Layout.alignment: Qt.AlignRight
+                        Layout.leftMargin: Nheko.paddingSmall
+                        Layout.preferredWidth: implicitWidth
+                        Layout.preferredHeight: implicitHeight
+                        mayBeVisible: !collapsed && (isSpace ? Settings.spaceNotifications : true)
+                    }
+
                     RowLayout {
+                        id: titleRow
+
                         Layout.alignment: Qt.AlignTop
                         Layout.fillWidth: true
                         spacing: Nheko.paddingSmall
@@ -380,6 +379,8 @@ Page {
                     }
 
                     RowLayout {
+                        id: subtextRow
+
                         Layout.fillWidth: true
                         spacing: 0
                         visible: !isSpace
@@ -395,40 +396,6 @@ Page {
                             Layout.fillWidth: true
                         }
 
-                        Rectangle {
-                            id: notificationBubble
-
-                            visible: notificationCount > 0
-                            Layout.alignment: Qt.AlignRight
-                            Layout.leftMargin: Nheko.paddingSmall
-                            height: notificationBubbleText.height + Nheko.paddingMedium
-                            Layout.preferredWidth: Math.max(notificationBubbleText.width, height)
-                            radius: height / 2
-                            color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground
-                            ToolTip.text: notificationCount
-                            ToolTip.delay: Nheko.tooltipDelay
-                            ToolTip.visible: notificationBubbleHover.hovered && (notificationCount > 9999)
-
-                            Label {
-                                id: notificationBubbleText
-
-                                anchors.centerIn: parent
-                                horizontalAlignment: Text.AlignHCenter
-                                verticalAlignment: Text.AlignVCenter
-                                width: Math.max(implicitWidth + Nheko.paddingMedium, parent.height)
-                                font.bold: true
-                                font.pixelSize: fontMetrics.font.pixelSize * 0.8
-                                color: hasLoudNotification ? "white" : roomItem.bubbleText
-                                text: notificationCount > 9999 ? "9999+" : notificationCount
-
-                                HoverHandler {
-                                    id: notificationBubbleHover
-                                }
-
-                            }
-
-                        }
-
                     }
 
                 }
diff --git a/resources/qml/components/NotificationBubble.qml b/resources/qml/components/NotificationBubble.qml
new file mode 100644
index 00000000..ca0ae6cb
--- /dev/null
+++ b/resources/qml/components/NotificationBubble.qml
@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: 2022 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import im.nheko 1.0
+
+Rectangle {
+    id: bubbleRoot
+
+    required property int notificationCount
+    required property bool hasLoudNotification
+    required property color bubbleBackgroundColor
+    required property color bubbleTextColor
+    property bool mayBeVisible: true
+    property alias font: notificationBubbleText.font
+
+    visible: mayBeVisible && notificationCount > 0
+    implicitHeight: notificationBubbleText.height + Nheko.paddingMedium
+    implicitWidth: Math.max(notificationBubbleText.width, height)
+    radius: height / 2
+    color: hasLoudNotification ? Nheko.theme.red : bubbleBackgroundColor
+    ToolTip.text: notificationCount
+    ToolTip.delay: Nheko.tooltipDelay
+    ToolTip.visible: notificationBubbleHover.hovered && (notificationCount > 9999)
+
+    Label {
+        id: notificationBubbleText
+
+        anchors.centerIn: bubbleRoot
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        width: Math.max(implicitWidth + Nheko.paddingMedium, bubbleRoot.height)
+        font.bold: true
+        font.pixelSize: fontMetrics.font.pixelSize * 0.8
+        color: bubbleRoot.hasLoudNotification ? "white" : bubbleRoot.bubbleTextColor
+        text: bubbleRoot.notificationCount > 9999 ? "9999+" : bubbleRoot.notificationCount
+
+        HoverHandler {
+            id: notificationBubbleHover
+        }
+
+    }
+
+}
diff --git a/resources/res.qrc b/resources/res.qrc
index 3ec24238..7f08c29d 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -185,6 +185,7 @@
         <file>qml/voip/PlaceCall.qml</file>
         <file>qml/voip/ScreenShare.qml</file>
         <file>qml/voip/VideoCall.qml</file>
+        <file>qml/components/NotificationBubble.qml</file>
     </qresource>
     <qresource prefix="/media">
         <file>media/ring.ogg</file>