mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-19 14:21:36 +00:00
76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
<template>
|
|
<div class="channel" :class="{notifyAnimation: hasNotifications, selected: selectedChannelID === channelData.channelID}">
|
|
<i class="material-icons">storage</i>
|
|
<div class="channel-name">
|
|
{{ channelData.name }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["channelData"],
|
|
computed: {
|
|
hasNotifications() {
|
|
const notifications = this.$store.getters.notifications;
|
|
const find = notifications.find(n => n.channelID === this.channelData.channelID)
|
|
return find
|
|
},
|
|
selectedChannelID() {
|
|
return this.$store.getters.selectedChannelID;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
.notifyAnimation{
|
|
|
|
animation: notifyAnime;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: infinite;
|
|
animation-fill-mode: forwards;
|
|
|
|
}
|
|
@keyframes notifyAnime {
|
|
0%{
|
|
background: rgba(255, 0, 0, 0.198);
|
|
}
|
|
40%{
|
|
background: rgba(255, 0, 0, 0.411);
|
|
}
|
|
60%{
|
|
background: rgba(255, 0, 0, 0.411);
|
|
}
|
|
100%{
|
|
background: rgba(255, 0, 0, 0.198);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.channel {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 5px;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
transition: 0.3s;
|
|
font-size: 14px;
|
|
}
|
|
.channel:hover {
|
|
background: rgba(139, 139, 139, 0.288);
|
|
}
|
|
.selected {
|
|
background: rgba(139, 139, 139, 0.288);
|
|
}
|
|
.channel-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|