diff --git a/resources/qml/CommunitiesList.qml b/resources/qml/CommunitiesList.qml
index 371e347e..1775e5fd 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
@@ -57,19 +58,29 @@ Page {
property color unimportantText: Nheko.colors.buttonText
property color bubbleBackground: Nheko.colors.highlight
property color bubbleText: Nheko.colors.highlightedText
+ required property string avatarUrl
+ required property string displayName
+ required property string tooltip
+ required property bool collapsed
+ required property bool collapsible
+ required property bool hidden
+ required property int depth
+ required property string id
+ required property int unreadMessages
+ required property bool hasLoudNotification
height: avatarSize + 2 * Nheko.paddingMedium
width: ListView.view.width
state: "normal"
ToolTip.visible: hovered && collapsed
- ToolTip.text: model.tooltip
+ ToolTip.text: communityItem.tooltip
ToolTip.delay: Nheko.tooltipDelay
- onClicked: Communities.setCurrentTagId(model.id)
- onPressAndHold: communityContextMenu.show(model.id)
+ onClicked: Communities.setCurrentTagId(communityItem.id)
+ onPressAndHold: communityContextMenu.show(communityItem.id)
states: [
State {
name: "highlight"
- when: (communityItem.hovered || model.hidden) && !(Communities.currentTagId == model.id)
+ when: (communityItem.hovered || communityItem.hidden) && !(Communities.currentTagId === communityItem.id)
PropertyChanges {
target: communityItem
@@ -83,7 +94,7 @@ Page {
},
State {
name: "selected"
- when: Communities.currentTagId == model.id
+ when: Communities.currentTagId == communityItem.id
PropertyChanges {
target: communityItem
@@ -102,7 +113,7 @@ Page {
TapHandler {
acceptedButtons: Qt.RightButton
- onSingleTapped: communityContextMenu.show(model.id)
+ onSingleTapped: communityContextMenu.show(communityItem.id)
gesturePolicy: TapHandler.ReleaseWithinBounds
acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus | PointerDevice.TouchPad
}
@@ -114,27 +125,27 @@ Page {
spacing: Nheko.paddingMedium
anchors.fill: parent
anchors.margins: Nheko.paddingMedium
- anchors.leftMargin: Nheko.paddingMedium + (communitySidebar.collapsed ? 0 : (fontMetrics.lineSpacing * model.depth))
+ anchors.leftMargin: Nheko.paddingMedium + (communitySidebar.collapsed ? 0 : (fontMetrics.lineSpacing * communityItem.depth))
ImageButton {
- visible: !communitySidebar.collapsed && model.collapsible
+ visible: !communitySidebar.collapsed && communityItem.collapsible
Layout.preferredHeight: fontMetrics.lineSpacing
Layout.preferredWidth: fontMetrics.lineSpacing
Layout.alignment: Qt.AlignVCenter
height: fontMetrics.lineSpacing
width: fontMetrics.lineSpacing
- image: model.collapsed ? ":/icons/icons/ui/collapsed.svg" : ":/icons/icons/ui/expanded.svg"
+ image: communityItem.collapsed ? ":/icons/icons/ui/collapsed.svg" : ":/icons/icons/ui/expanded.svg"
ToolTip.visible: hovered
ToolTip.delay: Nheko.tooltipDelay
- ToolTip.text: model.collapsed ? qsTr("Expand") : qsTr("Collapse")
+ ToolTip.text: communityItem.collapsed ? qsTr("Expand") : qsTr("Collapse")
hoverEnabled: true
- onClicked: model.collapsed = !model.collapsed
+ onClicked: communityItem.collapsed = !communityItem.collapsed
}
Item {
Layout.preferredWidth: fontMetrics.lineSpacing
- visible: !communitySidebar.collapsed && !model.collapsible && Communities.containsSubspaces
+ visible: !communitySidebar.collapsed && !communityItem.collapsible && Communities.containsSubspaces
}
Avatar {
@@ -145,48 +156,25 @@ Page {
height: avatarSize
width: avatarSize
url: {
- if (model.avatarUrl.startsWith("mxc://"))
- return model.avatarUrl.replace("mxc://", "image://MxcImage/");
+ if (communityItem.avatarUrl.startsWith("mxc://"))
+ return communityItem.avatarUrl.replace("mxc://", "image://MxcImage/");
else
- return "image://colorimage/" + model.avatarUrl + "?" + communityItem.unimportantText;
+ return "image://colorimage/" + communityItem.avatarUrl + "?" + communityItem.unimportantText;
}
- roomid: model.id
- displayName: model.displayName
+ roomid: communityItem.id
+ displayName: communityItem.displayName
color: communityItem.backgroundColor
- Rectangle {
- id: collapsedNotificationBubble
-
- visible: model.unreadMessages > 0 && communitySidebar.collapsed
+ NotificationBubble {
+ notificationCount: communityItem.unreadMessages
+ hasLoudNotification: communityItem.hasLoudNotification
+ bubbleBackgroundColor: communityItem.bubbleBackground
+ bubbleTextColor: communityItem.bubbleText
+ font.pixelSize: fontMetrics.font.pixelSize * 0.6
+ mayBeVisible: communitySidebar.collapsed
anchors.right: avatar.right
anchors.bottom: avatar.bottom
anchors.margins: -Nheko.paddingSmall
- height: collapsedNotificationBubbleText.height + Nheko.paddingMedium
- width: Math.max(collapsedNotificationBubbleText.width, height)
- radius: height / 2
- color: model.hasLoudNotification ? Nheko.theme.red : communityItem.bubbleBackground
- ToolTip.text: model.unreadMessages
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.visible: collapsedNotificationBubbleHover.hovered && (model.unreadMessages > 9999)
-
- Label {
- id: collapsedNotificationBubbleText
-
- 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.6
- color: model.hasLoudNotification ? "white" : communityItem.bubbleText
- text: model.unreadMessages > 9999 ? "9999+" : model.unreadMessages
-
- HoverHandler {
- id: collapsedNotificationBubbleHover
- }
-
- }
-
}
}
@@ -197,7 +185,7 @@ Page {
color: communityItem.importantText
Layout.fillWidth: true
elideWidth: width
- fullText: model.displayName
+ fullText: communityItem.displayName
textFormat: Text.PlainText
}
@@ -205,44 +193,20 @@ Page {
Layout.fillWidth: true
}
- Rectangle {
- id: notificationBubble
-
- visible: model.unreadMessages > 0 && !communitySidebar.collapsed
+ NotificationBubble {
+ notificationCount: communityItem.unreadMessages
+ hasLoudNotification: communityItem.hasLoudNotification
+ bubbleBackgroundColor: communityItem.bubbleBackground
+ bubbleTextColor: communityItem.bubbleText
+ mayBeVisible: !communitySidebar.collapsed
Layout.alignment: Qt.AlignRight
Layout.leftMargin: Nheko.paddingSmall
- height: notificationBubbleText.height + Nheko.paddingMedium
- Layout.preferredWidth: Math.max(notificationBubbleText.width, height)
- radius: height / 2
- color: model.hasLoudNotification ? Nheko.theme.red : communityItem.bubbleBackground
- ToolTip.text: model.unreadMessages
- ToolTip.delay: Nheko.tooltipDelay
- ToolTip.visible: notificationBubbleHover.hovered && (model.unreadMessages > 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: model.hasLoudNotification ? "white" : communityItem.bubbleText
- text: model.unreadMessages > 9999 ? "9999+" : model.unreadMessages
-
- HoverHandler {
- id: notificationBubbleHover
- }
-
- }
-
}
}
background: Rectangle {
- color: backgroundColor
+ color: communityItem.backgroundColor
}
}
diff --git a/resources/qml/components/NotificationBubble.qml b/resources/qml/components/NotificationBubble.qml
new file mode 100644
index 00000000..07dd76a8
--- /dev/null
+++ b/resources/qml/components/NotificationBubble.qml
@@ -0,0 +1,42 @@
+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 6e3023ea..94901b2b 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -182,6 +182,7 @@
qml/voip/PlaceCall.qml
qml/voip/ScreenShare.qml
qml/voip/VideoCall.qml
+ qml/components/NotificationBubble.qml
media/ring.ogg