show badge on new messages.
This commit is contained in:
parent
429fc7eb68
commit
2cff2a340f
@ -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.
|
||||||
|
@ -25,6 +25,7 @@
|
|||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
|
<span v-if="showBadge" class="badge">•</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() {
|
||||||
|
@ -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
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user