diff --git a/README.md b/README.md
index a701a3c4..71d40fac 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
- Support for password protected `NEKO_ICESERVERS` (by @mbattista).
- Added bunch of translations (πΈπ°, πͺπΈ, πΈπͺ, π³π΄, π«π·) by various people.
- Added `m1k1o/neko:google-chrome` tag.
+- Show red dot badge on sidebar toggle if there are new messages, and user can't see them.
### Bugs
- Fixed minor gst pipeline bug.
diff --git a/client/src/components/header.vue b/client/src/components/header.vue
index 1f5977d7..7c8b59e1 100644
--- a/client/src/components/header.vue
+++ b/client/src/components/header.vue
@@ -25,6 +25,7 @@
/>
+ •
@@ -94,6 +95,40 @@
.toggle {
background: $background-primary;
}
+
+ .badge {
+ position: absolute;
+ background: red;
+ font-weight: bold;
+ font-size: 1.25em;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ pointer-events: none;
+
+ transform: translate(-50%, -25%) scale(1);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+ animation: badger-pulse 2s infinite;
+ }
+
+ @keyframes badger-pulse {
+ 0% {
+ transform: translate(-50%, -25%) scale(0.85);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+ }
+
+ 70% {
+ transform: translate(-50%, -25%) scale(1);
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+ }
+
+ 100% {
+ transform: translate(-50%, -25%) scale(0.85);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+ }
+ }
}
}
}
@@ -112,8 +147,22 @@
return this.$accessor.locked
}
+ get side() {
+ return this.$accessor.client.side
+ }
+
+ get texts() {
+ return this.$accessor.chat.texts
+ }
+
+ get showBadge() {
+ return !this.side && this.readTexts != this.texts
+ }
+
+ readTexts: number = 0
toggleMenu() {
this.$accessor.client.toggleSide()
+ this.readTexts = this.texts
}
toggleLock() {
diff --git a/client/src/store/chat.ts b/client/src/store/chat.ts
index 2ca5da96..7441db7f 100644
--- a/client/src/store/chat.ts
+++ b/client/src/store/chat.ts
@@ -23,6 +23,7 @@ interface Message {
export const state = () => ({
history: [] as Message[],
emotes: {} as Emotes,
+ texts: 0,
})
export const getters = getterTree(state, {
@@ -31,6 +32,10 @@ export const getters = getterTree(state, {
export const mutations = mutationTree(state, {
addMessage(state, message: Message) {
+ if (message.type == 'text') {
+ state.texts++
+ }
+
state.history = state.history.concat([message])
},
@@ -52,6 +57,7 @@ export const mutations = mutationTree(state, {
reset(state) {
state.emotes = {}
state.history = []
+ state.texts = 0
},
})