dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-24 17:11:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

nottification progress

Browse source
This commit is contained in:
supertiger1234 2019-06-02 19:28:21 +01:00
parent 830ae0f9f5
commit 0fe79d64bd
1 changed files with 44 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/views/App.vue
View file

@ -7,17 +7,17 @@
<div class="box" v-if="loggedIn"> <div class="box" v-if="loggedIn">
<div class="frame"> <div class="frame">
<div class="tabs"> <div class="tabs">
<div :class="`tab ${currentTab === 0 ? 'selected' : ''}`" @click="switchTab(0)"> <div :class="`tab ${currentTab === 0 ? 'selected' : ''}`" @click="switchTab(0)">
<i class="material-icons">list_alt</i> <i class="material-icons">list_alt</i>
Changelog Changelog
</div> </div>
<div :class="`tab ${currentTab === 1 ? 'selected' : ''}`" @click="switchTab(1)"> <div :class="{tab: true, selected: currentTab === 0, notifyAnimation: DMNotification}" @click="switchTab(1)">
<i class="material-icons">chat</i> <i class="material-icons">chat</i>
Direct Message Direct Message
</div> </div>
<div :class="`tab ${currentTab === 2 ? 'selected' : ''}`" @click="switchTab(2)"> <div :class="{tab: true, selected: currentTab === 0, notifyAnimation: serverNotification}" @click="switchTab(2)">
<i class="material-icons">forum</i> <i class="material-icons">forum</i>
Servers Servers
</div> </div>
@ -128,6 +128,22 @@ export default {
computed: { computed: {
loggedIn() { loggedIn() {
return this.$store.getters.loggedIn; return this.$store.getters.loggedIn;
},
serverNotification() {
const notifications = this.$store.getters.notifications;
const channels = this.$store.getters.channels
const notification = notifications.find(e => {
return channels[e.channelID] && channels[e.channelID].server_id
})
return notification;
},
DMNotification() {
const notifications = this.$store.getters.notifications;
const channels = this.$store.getters.channels
const notification = notifications.find(e => {
return channels[e.channelID] && !channels[e.channelID].server_id
})
return notification;
} }
} }
}; };
@ -140,6 +156,31 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.notifyAnimation{
animation: notifyAnime;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes notifyAnime {
0%{
background: rgba(121, 3, 3, 0.541);
}
40%{
background: rgba(255, 0, 0, 0.568);
}
60%{
background: rgba(255, 0, 0, 0.568);
}
100%{
background: rgba(121, 3, 3, 0.541);
}
}
.coming-soon { .coming-soon {
display: flex; display: flex;
align-items: center; align-items: center;