From fa3aed1e3d9894c915544598e2cea9cb657ecea3 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Sat, 7 Dec 2019 19:13:00 +0000
Subject: [PATCH] added desktop class and removed notify animation.

---
 src/components/app/FriendsList.vue            | 26 ++++---------------
 src/components/app/MainNav.vue                | 19 +-------------
 src/components/app/Navigation.vue             | 19 +-------------
 .../app/ServerTemplate/ChannelTemplate.vue    | 23 +++-------------
 .../app/ServerTemplate/ServerTemplate.vue     | 21 ++-------------
 .../app/relationships/FriendsTemplate.vue     | 24 +++--------------
 src/views/App.vue                             | 23 ++--------------
 7 files changed, 18 insertions(+), 137 deletions(-)

diff --git a/src/components/app/FriendsList.vue b/src/components/app/FriendsList.vue
index c19202f..68fcbb0 100644
--- a/src/components/app/FriendsList.vue
+++ b/src/components/app/FriendsList.vue
@@ -6,12 +6,12 @@
       <div class="tabs">
         <div
           class="tab"
-          :class="{notifyAnimation: friendRequestExists, selected: currentTab === 0}"
+          :class="{notify: friendRequestExists, selected: currentTab === 0}"
           @click="currentTab = 0"
         ><div class="material-icons">group</div>Friends</div>
         <div
           class="tab"
-          :class="{notifyAnimation: DMNotification, selected: currentTab === 1 }"
+          :class="{notify: DMNotification, selected: currentTab === 1 }"
           @click="currentTab = 1"
         ><div class="material-icons">access_time</div>Recents</div>
       </div>
@@ -198,27 +198,11 @@ export default {
   flex-shrink: 0;
 }
 
-.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);
-  }
+.notify {
+  background: rgba(255, 0, 0, 0.568);
 }
 
+
 @media (max-width: 600px) {
   .content{
     border-radius: 0;
diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue
index e4f9df2..264f583 100644
--- a/src/components/app/MainNav.vue
+++ b/src/components/app/MainNav.vue
@@ -344,28 +344,11 @@ export default {
   right: 5px;
   width: 20px;
   height: 20px;
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
   border-radius: 50%;
   background: rgba(255, 23, 23, 0.753);
   flex-shrink: 0;
 }
-@keyframes notifyAnime {
-  0% {
-    opacity: 0.2;
-  }
-  40% {
-    opacity: 1;
-  }
-  60% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
+
 
 .tool-tip {
   color: white;
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index e163e36..f79bf46 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -366,28 +366,11 @@ export default {
   right: 5px;
   width: 20px;
   height: 20px;
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
   border-radius: 50%;
   background: rgba(255, 23, 23, 0.753);
   flex-shrink: 0;
 }
-@keyframes notifyAnime {
-  0% {
-    opacity: 0.2;
-  }
-  40% {
-    opacity: 1;
-  }
-  60% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
+
 
 .tool-tip {
   color: white;
diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index 8e97286..1304bdc 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/src/components/app/ServerTemplate/ChannelTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="channel"
-    :class="{notifyAnimation: hasNotifications, selected: selectedChannelID === channelData.channelID}"
+    :class="{notify: hasNotifications, selected: selectedChannelID === channelData.channelID}"
   >
     <i class="material-icons">storage</i>
     <div class="channel-name">{{ channelData.name }}</div>
@@ -36,25 +36,8 @@ export default {
 
 
 <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);
-  }
+.notify {
+  background: rgba(255, 0, 0, 0.411);
 }
 
 .channel {
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index d9b7467..310fba9 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -116,7 +116,7 @@ export default {
     background: #ffffffc5;
   }
 }
-.notifyAnimation:before {
+.notifyAnimation:after {
   content: "!";
   color: white;
   display: flex;
@@ -131,25 +131,8 @@ export default {
   right: 5px;
   width: 20px;
   height: 20px;
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
   border-radius: 50%;
   background: rgba(255, 23, 23, 0.753);
 }
-@keyframes notifyAnime {
-  0% {
-    opacity: 1;
-  }
-  40% {
-    opacity: 0.9;
-  }
-  60% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
+
 </style>
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 5fa82a9..04bdf45 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="friend"
-    :class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0), tree }"
+    :class="{selected: uniqueIDSelected, notify: (notifications && notifications > 0), tree }"
     @click="openChat"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -136,27 +136,11 @@ export default {
 .tree {
   padding-left: 22px;
 }
-.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);
-  }
+.notify {
+  background: rgba(255, 0, 0, 0.411);
 }
 
+
 .friend:hover {
   background: #053c4c;
 }
diff --git a/src/views/App.vue b/src/views/App.vue
index f920742..7f82571 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" ref="app">
+  <div id="app" ref="app" :class="{desktop: isElectron}">
     <vue-headful :title="title" description="Nertivia Chat Client" />
     <div class="background-image"></div>
     <transition name="fade-between-two" appear>
@@ -238,32 +238,13 @@ export default {
   height: 100%;
 }
 
-.notifyAnimation {
-  animation: notifyAnime;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-}
 .box {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
 }
-@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 {
   display: flex;