From f66f3e9cb9582c3e4979e536c705d296958c21eb Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Mon, 3 Jun 2019 13:08:06 +0100
Subject: [PATCH] Fixed all notification bugs, ready to be uploaded

---
 src/components/app/MessagePanel.vue           |  7 +++-
 .../app/ServerTemplate/ChannelTemplate.vue    | 37 ++++++++++++++++++-
 .../app/ServerTemplate/ChannelsList.vue       |  8 ++++
 src/components/app/Tabs/Servers.vue           |  8 +++-
 src/store/modules/serversModule.js            |  2 +-
 src/utils/changelog.js                        |  7 ++--
 6 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index ef08fac..e0de50a 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -192,8 +192,11 @@ export default {
           clearInterval(this.postTimerID);
           this.postTimerID = null;
         }else {
-          await typingService.post(this.selectedChannelID);
-          this.postTimer()
+          if (this.selectedChannelID)
+            await typingService.post(this.selectedChannelID);
+          
+          if (this.postTimerID)
+            this.postTimer()
         }
       }, 2000)
 
diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index d144ffa..a5c7d37 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/src/components/app/ServerTemplate/ChannelTemplate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="channel">
+  <div :class="{channel: true,  notifyAnimation: hasNotifications}">
     <i class="material-icons">storage</i>
     <div class="channel-name">{{ChannelData.name}}</div>
   </div>
@@ -7,12 +7,45 @@
 
 <script>
 export default {
-  props: ["ChannelData"]
+  props: ["ChannelData"],
+  computed: {
+    hasNotifications() {
+      const notifications = this.$store.getters.notifications;
+      const find = notifications.find(n => n.channelID === this.ChannelData.channelID)
+      return find
+    }
+  }
 };
 </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;
diff --git a/src/components/app/ServerTemplate/ChannelsList.vue b/src/components/app/ServerTemplate/ChannelsList.vue
index 01a8846..635dc86 100644
--- a/src/components/app/ServerTemplate/ChannelsList.vue
+++ b/src/components/app/ServerTemplate/ChannelsList.vue
@@ -11,12 +11,20 @@
 import Spinner from "@/components/Spinner.vue";
 import ChannelTemplate from "@/components/app/ServerTemplate/ChannelTemplate.vue";
 import ServerService from "@/services/ServerService.js";
+import {bus} from '@/main.js'
 
 export default {
   components: { ChannelTemplate, Spinner },
   props: ["serverID"],
   methods: {
     openChannel(channel) {
+      const notificationExists = this.$store.getters.notifications.find(n => n.channelID === channel.channelID)
+
+      if (notificationExists && document.hasFocus()) {
+        this.$socket.emit('notification:dismiss', {channelID: channel.channelID});
+      }
+      
+      bus.$emit('closeLeftMenu');
       this.$store.dispatch('openChannel', channel)
     }
   },
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index e7db167..8b81eab 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -68,12 +68,16 @@ export default {
 </script>
 
 <style scoped>
+
+.direct-message-tab{
+  overflow: hidden;
+}
 .slide-left-enter-active,
 .slide-left-leave-active {
   transition: 0.5s;
 }
 .slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  margin-left: -300px;
+    transform: translateX(-300px)
 }
 
 .slide-right-enter-active,
@@ -81,7 +85,7 @@ export default {
   transition: 0.5s;
 }
 .slide-right-enter, .slide-right-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  margin-right: -300px;
+  transform: translateX(300px)
 }
 
 
diff --git a/src/store/modules/serversModule.js b/src/store/modules/serversModule.js
index 0cbbc76..1e3909d 100644
--- a/src/store/modules/serversModule.js
+++ b/src/store/modules/serversModule.js
@@ -34,7 +34,7 @@ const actions = {
 const mutations = {
   SET_CHANNELS_IDS(state, {serverID, channelsIDs}) {
     const previousChannels = state.channelsIDs[serverID] || []
-    Vue.set(state.channelsIDs, serverID, [...previousChannels, ...channelsIDs]);
+    Vue.set(state.channelsIDs, serverID, [...new Set([...previousChannels, ...channelsIDs])]);
 
   },
   SET_SERVERS(state, servers) {
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 1be83aa..e2035e6 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -17,17 +17,16 @@ const config = [
     version: 4.5,
     title: "Server bug fixes",
     shortTitle: "Server bug fixes",
-    date: "27/05/2019",
-    headColor: "rgba(155, 244, 66, 0.77)",
+    date: "03/06/2019",
+    headColor: "rgba(3, 70, 115, 0.77)",
     new: [
       "Notifications for servers has been added."
     ],
     fix: [
-      "Fixed notification bug where server notification are shown in dms",
+      "Fixed notification bug where server notification are shown in dms.",
       "When switching from server to direct message tab (and vice versa), the channels should now be separated.",
       'You can now only create 30 invites per server.'
     ],
-    next: [""]
   },
   {
     version: 4,