fixed bugs with embed, fixed z-index + more.

package-lock.json

@@ -2792,7 +2792,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -6953,6 +6954,7 @@
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
       "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
       "dev": true,
+      "optional": true,
       "requires": {
         "prelude-ls": "~1.1.2",
         "type-check": "~0.3.2"
@@ -9083,7 +9085,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "prepend-http": {
       "version": "2.0.0",
@@ -9802,7 +9805,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",
@@ -11355,6 +11359,7 @@
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
       "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
       "dev": true,
+      "optional": true,
       "requires": {
         "prelude-ls": "~1.1.2"
       }

src/components/app/MessagePanel.vue

@@ -12,8 +12,9 @@
     <div v-else-if="selectedChannelID" ref="msg-logs" class="message-logs" >
       <div class="scroll">
         <message
+          class="message-container"
           v-for="(msg, index) in selectedChannelMessages"
-          :key="index"
+          :key="index + selectedChannelID"
           :date="msg.created"
           :admin="msg.creator.admin"
           :username="msg.creator.username"
@@ -537,6 +538,16 @@ export default {
         }
       })
     },
+    uploadQueue() {
+      let element = this.$refs['msg-logs'];
+      let currentScroll = element.scrollHeight - element.scrollTop;
+      let total = element.clientHeight;      
+      this.$nextTick(function () {
+        if (currentScroll === total) {
+          this.scrollDown(true);
+        }
+      })
+    },
     editMessage(editMessage) {
       if (!editMessage) {
         this.message = ""
@@ -549,7 +560,7 @@ export default {
       })
     },
     getWindowWidth(dimentions) {
-      this.onResize(dimentions)
+      this.onResize();
     }
   },
   computed: {
@@ -624,6 +635,8 @@ export default {
 
 
 <style scoped>
+
+
 .no-channel-selected {
   display: flex;
   flex-direction: column;

src/components/app/MessageTemplate.vue

@@ -322,7 +322,6 @@ export default {
 .message {
   margin: 10px;
   display: flex;
-
   animation: showMessage 0.3s ease-in-out;
 }
 
@@ -375,7 +374,7 @@ export default {
 
 @keyframes showMessage {
   from {
-    transform: translate(0px, -5px);
+    transform: translate(-50px, 0);
     opacity: 0;
   }
 }

src/components/app/Tabs/DirectMessage.vue

@@ -53,6 +53,9 @@ export default {
   height: 100%;
   width: 100%;
 }
+.left-panel{
+  z-index: 2;
+}
 .slidein-enter-active,
 .slidein-leave-active {
   transition: 0.5s;

src/components/app/Tabs/Servers.vue

@@ -72,6 +72,10 @@ export default {
 .direct-message-tab{
   overflow: hidden;
 }
+.left-panel{
+  z-index: 2;
+}
+
 .slide-left-enter-active,
 .slide-left-leave-active {
   transition: 0.5s;

src/components/app/messageEmbedTemplate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="embed" :class="{article: embed.type === 'article' || embed.type === 'video.other'}">
+  <div class="embed" :class="{article: embed.type === 'article' || embed.type === 'video.other', website: embed.type === 'website'}">
     <div class="right">
       <div class="image" v-if="embed.image" @click="embedImgClicked"><img :src="`//images.weserv.nl/?url=${embed.image}`" alt=""></div>
     </div>
@@ -32,10 +32,25 @@ export default {
   min-width: 200px;
   align-self: flex-start;
   margin-top: 5px;
+  text-overflow: ellipsis;
 }
 .embed.article {
   flex-direction: column;
 }
+.embed.website {
+  height: 100px;
+}
+.embed.website .image {
+  display: flex;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+}
+.embed.article .image {
+  margin-right: 0;
+}
+
 .article .left {
   order: 1;
 }
@@ -58,6 +73,10 @@ export default {
 .description {
   font-size: 14px;
   white-space: pre-wrap;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
 .image img {
   width: auto;

src/components/app/statusList.vue

@@ -71,7 +71,7 @@ export default {
   border-radius: 10px;
   padding: 5px;
   width: 180px;
-  z-index: 1;
+  z-index: 4;
 }
 .status-list {
   padding: 5px;

src/store/modules/socketIOModule.js

@@ -153,9 +153,9 @@ const actions = {
     if (context.rootState.channelModule.selectedChannelID == data.message.channelID && document.hasFocus()) {
       this._vm.$socket.emit('notification:dismiss', {channelID: data.message.channelID});
     } else {
-      bus.$emit('title:change', data.message.creator.username + " sent a message.");
       // send notification if other users message the recipient
       if (data.message.creator.uniqueID === context.getters.user.uniqueID) return;
+      bus.$emit('title:change', data.message.creator.username + " sent a message.");
       desktopNotification();
     }
     const notification  = {

src/utils/windowProperties.js

@@ -1,6 +1,6 @@
 
  import Vue from "vue";
- import debounce  from "lodash/debounce";
+ import throttle  from "lodash/throttle";
 
  const WindowProperties  = new Vue({
    data () {
@@ -13,7 +13,7 @@
     this.resizeWidth = window.innerWidth;
     this.resizeHeight = window.innerHeight;
 
-    this.debouncedResize =  debounce(this.onResize, 20);
+    this.debouncedResize =  throttle(this.onResize, 70);
     window.addEventListener("resize", this.debouncedResize);
 
     

src/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" ref="app">
     <vue-headful :title="title" description="Nertivia Chat Client"/>
     <div class="background-image"></div>
     <transition name="fade-between-two" appear>
@@ -58,6 +58,7 @@ import changelog from "@/utils/changelog.js";
 import ConnectingScreen from "./../components/app/ConnectingScreen.vue";
 import Spinner from "./../components/Spinner.vue";
 
+
 const ElectronFrameButtons = () =>
   import("./../components/ElectronJS/FrameButtons.vue");
 
@@ -129,6 +130,17 @@ export default {
         this.switchChannel(true)
       }
     },
+    resizeEvent(dimensions) {
+      const width = dimensions.width;
+      const height = dimensions.height;
+      this.$refs.app.style.height = height + 'px';
+      this.$refs.app.style.width = width + 'px';
+    }
+  },
+  watch: {
+    getWindowWidth(dimensions) {
+      this.resizeEvent(dimensions)
+    }
   },
   mounted() {
 
@@ -146,6 +158,9 @@ export default {
     bus.$on("title:change", title => {
       this.title = title;
     });
+
+
+
   },
   computed: {
     loggedIn() {
@@ -179,7 +194,10 @@ export default {
         return allFriend[key];
       });
       return result.find(friend => friend.status === 1);
-    }
+    },
+    getWindowWidth() {
+      return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
+    },
   }
 };
 </script>