diff --git a/src/App.vue b/src/App.vue index 89edd8c..bceb3d3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,20 +25,26 @@ export default { currentUser() { return this.$store.state.auth.user; }, - }, - watch: { - '$route' (to, ignoredFrom) { + title() { var title = "Keanu Weblite"; - if (to.meta.title) { - title += " - " + to.meta.title; + if (this.$matrix.notificationCount > 0) { + title += " [" + this.$matrix.notificationCount + "]"; } - if (to.meta.includeRoom) { + if (this.$route.meta.title) { + title += " - " + this.$route.meta.title; + } + if (this.$route.meta.includeRoom) { if (this.$matrix.currentRoom) { title += " - " + (this.$matrix.currentRoom.summary.info.title || this.$matrix.currentRoom.roomId); } else if (this.$matrix.currentRoomId) { title += " - " + (this.$matrix.currentRoomId); } } + return title; + } + }, + watch: { + title(title) { document.title = title; }, currentUser: { diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 2257cc3..1edd287 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -38,6 +38,8 @@ $admin-fg: white; background-color: white; border: 1px solid #e0e0e0; position: absolute; + max-height: 60%; + overflow-y: auto; z-index: 2; .v-subheader { display: none; @@ -45,6 +47,22 @@ $admin-fg: white; } } +.room-list-notification-count { + position: absolute; + top: 10px; + left: 40px; + color: white; + background-color: black; + font-size: 10px; + min-width: 20px; + height: 20px; + border-radius: 10px; + border: 2px solid white; + text-align: center; + padding-left: 4px; + padding-right: 4px; +} + .chat-root { position: absolute; left: 0px; diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue index 255c1be..62f7d7e 100644 --- a/src/components/RoomList.vue +++ b/src/components/RoomList.vue @@ -3,9 +3,10 @@ ROOMS - + +
{{ notificationCount(room) }}
{{ room.summary.info.title }} {{ room.topic }} @@ -22,9 +23,15 @@ export default { name: "RoomList", data: () => ({ - currentRoomId: -1, + currentRoomId: null, }), + methods: { + notificationCount(room) { + return room.getUnreadNotificationCount('total') || 0; + } + }, + watch: { currentRoomId() { this.$emit("close"); @@ -33,3 +40,7 @@ export default { }, }; + + \ No newline at end of file diff --git a/src/services/matrix.service.js b/src/services/matrix.service.js index 9c4a5de..05ec052 100644 --- a/src/services/matrix.service.js +++ b/src/services/matrix.service.js @@ -28,6 +28,7 @@ export default { userDisplayName: null, userAvatar: null, currentRoom: null, + notificationCount: 0 } }, mounted() { @@ -59,7 +60,7 @@ export default { handler(roomId) { this.currentRoom = this.getRoom(roomId); } - } + }, }, methods: { @@ -274,11 +275,13 @@ export default { } break; } + this.updateNotificationCount(); }, onRoom(ignoredroom) { console.log("Got room: " + ignoredroom); this.reloadRooms(); + this.updateNotificationCount(); }, onSessionLoggedOut() { @@ -411,7 +414,16 @@ export default { .catch(err => { return Promise.reject("Failed to find room: " + err); }); + }, + + updateNotificationCount() { + var count = 0; + this.rooms.forEach(room => { + count += room.getUnreadNotificationCount('total') || 0; + }); + this.notificationCount = count; } + } })