3pp-mirror/neko
1
0
Fork 0
mirror of https://github.com/m1k1o/neko.git synced 2025-06-07 05:12:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

show badge on new messages.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

49
client/src/components/header.vue
View file

@ -25,6 +25,7 @@
/>
</li>
<li>
<span v-if="showBadge" class="badge">&bull;</span>
<i class="fas fa-bars toggle" @click="toggleMenu" />
</li>
</ul>
@ -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() {