Archived
2
0

show badge on new messages.

This commit is contained in:
Miroslav Šedivý 2021-07-17 12:38:12 +02:00
parent 429fc7eb68
commit 2cff2a340f
3 changed files with 56 additions and 0 deletions

View File

@ -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). - Support for password protected `NEKO_ICESERVERS` (by @mbattista).
- Added bunch of translations (🇸🇰, 🇪🇸, 🇸🇪, 🇳🇴, 🇫🇷) by various people. - Added bunch of translations (🇸🇰, 🇪🇸, 🇸🇪, 🇳🇴, 🇫🇷) by various people.
- Added `m1k1o/neko:google-chrome` tag. - 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 ### Bugs
- Fixed minor gst pipeline bug. - Fixed minor gst pipeline bug.

View File

@ -25,6 +25,7 @@
/> />
</li> </li>
<li> <li>
<span v-if="showBadge" class="badge">&bull;</span>
<i class="fas fa-bars toggle" @click="toggleMenu" /> <i class="fas fa-bars toggle" @click="toggleMenu" />
</li> </li>
</ul> </ul>
@ -94,6 +95,40 @@
.toggle { .toggle {
background: $background-primary; 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 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() { toggleMenu() {
this.$accessor.client.toggleSide() this.$accessor.client.toggleSide()
this.readTexts = this.texts
} }
toggleLock() { toggleLock() {

View File

@ -23,6 +23,7 @@ interface Message {
export const state = () => ({ export const state = () => ({
history: [] as Message[], history: [] as Message[],
emotes: {} as Emotes, emotes: {} as Emotes,
texts: 0,
}) })
export const getters = getterTree(state, { export const getters = getterTree(state, {
@ -31,6 +32,10 @@ export const getters = getterTree(state, {
export const mutations = mutationTree(state, { export const mutations = mutationTree(state, {
addMessage(state, message: Message) { addMessage(state, message: Message) {
if (message.type == 'text') {
state.texts++
}
state.history = state.history.concat([message]) state.history = state.history.concat([message])
}, },
@ -52,6 +57,7 @@ export const mutations = mutationTree(state, {
reset(state) { reset(state) {
state.emotes = {} state.emotes = {}
state.history = [] state.history = []
state.texts = 0
}, },
}) })