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

changed notification design

Browse source
This commit is contained in:
supertiger1234 2019-12-07 19:46:10 +00:00
parent fa3aed1e3d
commit 25f519bfc1
5 changed files with 25 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/app/MainNav.vue
View file

@ -320,7 +320,6 @@ export default {
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
opacity: 0.8;
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
background: #093b4b; background: #093b4b;
@ -345,7 +344,7 @@ export default {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 23, 23, 0.753); background: #ee3e34;
flex-shrink: 0; flex-shrink: 0;
} }

19
src/components/app/Navigation.vue
View file

@ -352,25 +352,6 @@ export default {
height: 2px; height: 2px;
} }
.notifyAnimation:before {
content: "!";
color: white;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
font-size: 15px;
position: absolute;
z-index: 115651;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 23, 23, 0.753);
flex-shrink: 0;
}
.tool-tip { .tool-tip {
color: white; color: white;

24
src/components/app/ServerTemplate/ChannelTemplate.vue
View file

@ -1,10 +1,13 @@
<template> <template>
<div <div
class="channel" class="channel"
:class="{notify: hasNotifications, selected: selectedChannelID === channelData.channelID}" :class="{selected: selectedChannelID === channelData.channelID}"
> >
<i class="material-icons">storage</i> <i class="material-icons">storage</i>
<div class="channel-name">{{ channelData.name }}</div> <div class="channel-name">{{ channelData.name }}</div>
<div class="notification" v-if="hasNotifications">
{{hasNotifications.count}}
</div>
</div> </div>
</template> </template>
@ -24,7 +27,6 @@ export default {
) { ) {
return false; return false;
} }
const find = notifications.find( const find = notifications.find(
n => n.channelID === this.channelData.channelID n => n.channelID === this.channelData.channelID
); );
@ -37,7 +39,7 @@ export default {
<style scoped> <style scoped>
.notify { .notify {
background: rgba(255, 0, 0, 0.411); background: rgba(255, 0, 0, 0.411) !important;
} }
.channel { .channel {
@ -69,4 +71,20 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
margin-left: 5px; margin-left: 5px;
} }
.notification {
position: absolute;
display: flex;
flex-direction: column;
flex-shrink: 0;
text-align: center;
justify-content: center;
background: #ee3e34;
height: 34px;
right: 0;
top: 0;
bottom: 0;
min-width: 40px;
max-width: 70px;
border-radius: 1px;
}
</style> </style>

2
src/components/app/ServerTemplate/ServerTemplate.vue
View file

@ -132,7 +132,7 @@ export default {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 23, 23, 0.753); background: #ee3e34;
} }
</style> </style>

7
src/components/app/relationships/FriendsTemplate.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div <div
class="friend" class="friend"
:class="{selected: uniqueIDSelected, notify: (notifications && notifications > 0), tree }" :class="{selected: uniqueIDSelected, tree }"
@click="openChat" @click="openChat"
@mouseover="hover = true" @mouseover="hover = true"
@mouseleave="hover = false" @mouseleave="hover = false"
@ -136,9 +136,6 @@ export default {
.tree { .tree {
padding-left: 22px; padding-left: 22px;
} }
.notify {
background: rgba(255, 0, 0, 0.411);
}
.friend:hover { .friend:hover {
@ -173,7 +170,7 @@ export default {
.notification { .notification {
position: absolute; position: absolute;
display: flex; display: flex;
background: rgba(134, 134, 134, 0.315); background: #ee3e34;
height: 100%; height: 100%;
right: 0; right: 0;
top: 0; top: 0;