Fixed all notification bugs, ready to be uploaded

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)
 

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;

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)
     }
   },

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)
 }
 
 

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) {

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,