fixed some bugs and errors in design.

src/components/app/MessagePanel.vue

@@ -9,7 +9,7 @@
     <div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
       <spinner/>
     </div>
-    <div v-else-if="selectedChannelID" class="message-logs" @wheel="invertScroll">
+    <div v-else-if="selectedChannelID" ref="msg-logs" class="message-logs" >
       <div class="scroll">
         <message
           v-for="(msg, index) in selectedChannelMessages"
@@ -98,6 +98,7 @@ import heading from "@/components/app/MessagePanel/Heading.vue";
 import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue";
 import emojiParser from "@/utils/emojiParser.js";
 import statuses from "@/utils/statuses";
+import windowProperties from '@/utils/windowProperties';
 
 const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
 const EditPanel = () => import("@/components/app/EditPanel.vue");
@@ -247,7 +248,7 @@ export default {
         }
       }, 2000)
     },
-    resize(event) {
+    resize() {
       let input = this.$refs["input-box"];
 
       if (input.scrollHeight < 50) {
@@ -255,6 +256,8 @@ export default {
       } else {
         input.style.height = "auto";
         input.style.height = `calc(${input.scrollHeight}px - 1em)`;
+        this.scrollDown(false, undefined, input.scrollHeight);
+
       }
     },
     emojiSwitchKey(event) {
@@ -308,7 +311,6 @@ export default {
       this.$store.dispatch("setEmojiArray", searchArr);
     },
     async onInput(event) {
-      this.resize(event);
       this.messageLength = this.message.length;
       const value = event.target.value.trim();
       if (value && this.postTimerID == null) {
@@ -317,7 +319,7 @@ export default {
       }
     },
     keyUp(event) {
-      this.resize(event);
+      this.resize();
       this.showEmojiPopout(event);
     },
     enterEmojiSuggestion() {
@@ -388,17 +390,6 @@ export default {
       }
 
     },
-    invertScroll(event) {
-      if (event.deltaY) {
-        event.preventDefault();
-        event.currentTarget.scrollTop -=
-          parseFloat(
-            getComputedStyle(event.currentTarget).getPropertyValue("font-size")
-          ) *
-          (event.deltaY < 0 ? -1 : 1) *
-          2;
-      }
-    },
     hideTypingStatus(data) {
       if (this.user.uniqueID === data.message.creator.uniqueID) return;
       if (!this.typingRecipients[data.channelID] || !this.typingRecipients[data.channelID][data.message.creator.uniqueID]) return;
@@ -452,7 +443,7 @@ export default {
       }
       bus.$emit("title:change", "Nertivia");
       if (!this.$store.getters.selectedChannelID) return;
-    //dismiss notification on focus
+      //dismiss notification on focus
       const find = this.$store.getters.notifications.find(notification => {
         return notification.channelID === this.$store.getters.selectedChannelID;
       });
@@ -461,6 +452,18 @@ export default {
           channelID: this.$store.getters.selectedChannelID
         });
       }
+    },
+    scrollDown(ignoreScrolledDown, el, minScroll = 100) {
+      const element = el || this.$refs['msg-logs'];
+      if (!element) return;
+      const currentScroll = element.scrollHeight - element.scrollTop; 
+      const total = element.clientHeight;
+      if ( ignoreScrolledDown || ( currentScroll <= total + minScroll ) ){
+        element.scrollTop = element.scrollHeight;
+      }
+    },
+    onResize(dimentions) {
+      this.scrollDown();
     }
   },
   mounted() {
@@ -515,12 +518,38 @@ export default {
     delete this.$options.sockets.typingStatus;
   },
   watch: {
+    selectedChannelMessages(newMessages, oldMessages){
+      let element = this.$refs['msg-logs'];
+      let currentScroll;
+      let total;
+      if (element) {
+        currentScroll = element.scrollHeight - element.scrollTop
+        total = element.clientHeight
+      }
+
+      this.$nextTick(function () {
+        if (oldMessages === undefined) {
+          this.scrollDown(true);
+        } else {
+          if (currentScroll === total) {
+            this.scrollDown(true);
+          }
+        }
+      })
+    },
     editMessage(editMessage) {
       if (!editMessage) {
         this.message = ""
       } else {
         this.message = emojiParser.emojiToShortcode(editMessage.message)
       }
+      this.$nextTick(() => {
+        this.resize();
+        this.scrollDown();
+      })
+    },
+    getWindowWidth(dimentions) {
+      this.onResize(dimentions)
     }
   },
   computed: {
@@ -584,7 +613,10 @@ export default {
       let editMessage = this.$store.getters.popouts.editMessage;
       if (!editMessage) return null;
       return editMessage;
-    }
+    },
+    getWindowWidth() {
+      return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
+    },
   }
 };
 </script>
@@ -641,7 +673,7 @@ export default {
 }
 .message-logs,
 .message-logs .scroll {
-  transform: scale(1, -1) translate3d(0,0,0);
+  /* transform: scale(1, -1) translate3d(0,0,0); */
   margin-right: 5px;
 }
 

src/components/app/MessageTemplate.vue

@@ -48,9 +48,7 @@
           </div>
         </div>
 
-        <div class="image-content"
+        <div class="image-content" ref="image" v-if="getImage">
-          v-if="getImage"
-        >
           <img
             :src="getImage"
             @click="imageClicked"
@@ -101,21 +99,12 @@ import messageFormatter from "@/utils/messageFormatter.js";
 import config from "@/config.js";
 import friendlyDate from "@/utils/date";
 import path from "path";
+import windowProperties from '@/utils/windowProperties';
 
 import { mapState } from "vuex";
 import messagesService from '../../services/messagesService';
 
 export default {
-  components: {
-    ProfilePicture,
-    messageEmbedTemplate
-  },
-  data() {
-    return {
-      dropDownVisable: false,
-      hover: false
-    }
-  },
   props: [
     "message",
     "status",
@@ -131,6 +120,16 @@ export default {
     "channelID",
     "timeEdited"
   ],
+  components: {
+    ProfilePicture,
+    messageEmbedTemplate
+  },
+  data() {
+    return {
+      dropDownVisable: false,
+      hover: false
+    }
+  },
   methods: {
     openUserInformation() {
       this.$store.dispatch("setUserInformationPopout", this.uniqueID);
@@ -155,8 +154,51 @@ export default {
     },
     contentDoubleClickEvent(event){
       if (event.target.classList.contains("content") || event.target.closest('.user-info')) this.editMessage();
+    },
+    clamp(num, min, max) {
+      return num <= min ? min : num >= max ? max : num;
+    },
+    calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
+      let ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
+      return { width: srcWidth*ratio, height: srcHeight*ratio };
+    },
+    imageSize() {
+      const messageLog = document.querySelector('.scroll');
+      const w = messageLog.offsetWidth;
+      const h = messageLog.offsetHeight;
+
+      const minWidth = w / 2;
+      const minHeight = h / 2;
+
+      const files = this.$props.files;
+      if (!files || files.length === 0 || !files[0].dimensions)
+        return undefined;
+      const dimensions = this.$props.files[0].dimensions
+      const srcWidth = dimensions.width;
+      const srcHeight = dimensions.height;
+
+      const newDimentions = this.calculateAspectRatioFit(srcWidth, srcHeight, minWidth, minHeight);
+
+      const imageTag = this.$refs['image'];
+
+      imageTag.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px"
+      imageTag.style.height = this.clamp(newDimentions.height, 0, srcHeight) + "px"
+    },
+    onResize(dimentions) {
+      this.imageSize();
     }
   },
+  watch: {
+    getWindowWidth(dimentions) {
+      this.onResize(dimentions)
+    }
+  },
+  mounted() {
+    const files = this.files;
+    if (!files || files.length === 0 || !files[0].dimensions)
+      return undefined;
+    this.imageSize();
+  },
   computed: {
     ...mapState("settingsModule", ["apperance"]),
     getImage() {
@@ -194,7 +236,10 @@ export default {
     },
     user() {
       return this.$store.getters.user;
-    }
+    },
+    getWindowWidth() {
+      return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
+    },
   }
 };
 </script>
@@ -203,7 +248,7 @@ export default {
 <style scoped>
 .container {
   position: relative;
-
+  z-index: 1;
 }
 
 .drop-down-button{
@@ -262,7 +307,6 @@ export default {
 }
 
 .ownMessageLeft .triangle-inner {
-  transition: 0.5s;
   border-left: 7px solid rgba(184, 184, 184, 0.219);
   border-right: none !important;
 }
@@ -283,7 +327,6 @@ export default {
 }
 
 .ownMessage .triangle-inner {
-  transition: 0.5s;
   border-right: 7px solid rgba(184, 184, 184, 0.219);
 }
 .ownMessage .content {
@@ -332,7 +375,7 @@ export default {
 
 @keyframes showMessage {
   from {
-    transform: translate(0px, 9px);
+    transform: translate(0px, -5px);
     opacity: 0;
   }
 }
@@ -365,7 +408,6 @@ export default {
   border-radius: 10px;
   color: rgb(231, 231, 231);
   margin: auto 0;
-  transition: 1s;
   overflow: hidden;
 }
 .image-content {
@@ -378,9 +420,8 @@ export default {
   flex-direction: column;
 }
 .image-content img {
-  width: 170px;
+  width: 100%;
-  height: auto;
+  height: 100%;
-  transition: 0.2s;
 }
 .image-content:hover img {
   filter: brightness(70%);
@@ -470,6 +511,10 @@ pre {
   background-color: rgba(0, 0, 0, 0.397);
   padding: 5px;
   border-radius: 5px;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 img.emoji {

src/components/app/MyMiniInformation.vue

@@ -164,12 +164,12 @@ export default {
 
 .show-status-list-enter-active,
 .show-status-list-leave-active {
-  transition: 0.1s;
+  transition: 0.2s;
 }
 .show-status-list-enter,
 .show-status-list-leave-to {
   opacity: 0;
-  transform: translateY(10px);
+  transform: translateY(-5px);
 }
 
 .fade-enter-active,

src/components/app/Tabs/DirectMessage.vue

@@ -67,6 +67,7 @@ export default {
     background-color: rgba(39, 39, 39, 0.97);
     bottom: 0;
     height: calc(100% - 40px);
+    z-index: 2;
   }
 }
 </style>

src/components/app/Tabs/Servers.vue

@@ -96,6 +96,7 @@ export default {
     right: 0;
     bottom: 0;
     height: calc(100% - 40px);
+    z-index: 1;
   }
 }
 
@@ -105,6 +106,7 @@ export default {
     background-color: rgba(39, 39, 39, 0.97);
     bottom: 0;
     height: calc(100% - 40px);
+    z-index: 2;
   }
 }
 </style>

src/components/app/relationships/FriendsTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{friend: true, notifyAnimation: (notifications && notifications > 0) }"
-    :style="`background: ${status.bgColor};`"
+    :style="{background: status.status !== 0 ? status.bgColor : ''}"
     @click="openChat"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -74,6 +74,7 @@ export default {
       }
 
       return {
+        status: parseInt(status),
         statusName: statuses[parseInt(status)].name,
         statusURL: statuses[parseInt(status)].url,
         statusColor: statuses[parseInt(status)].color,
@@ -114,7 +115,7 @@ export default {
 }
 .friend {
   color: white;
-  background-color: rgba(0, 0, 0, 0.137);
+  background-color: rgba(0, 0, 0, 0.100);
   margin: 5px;
   padding: 5px;
   padding-right: 0;
@@ -125,14 +126,8 @@ export default {
   overflow: hidden;
 }
 
-.notifyAnimation:before{
+.notifyAnimation{
-  content: '';
+
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   animation: notifyAnime;
   animation-duration: 1s;
   animation-iteration-count: infinite;

src/components/app/statusList.vue

@@ -66,39 +66,46 @@ export default {
 <style scoped>
 
 .status-popout{
-    position: absolute;
+  position: absolute;
-    background-color: rgba(44, 44, 44, 0.671);
+  background-color: rgba(26, 26, 26, 0.863);
-    border-radius: 10px;
+  border-radius: 10px;
-    padding: 5px;
+  padding: 5px;
-    width: 180px;
+  width: 180px;
-    z-index: 1;
+  z-index: 1;
 }
 .status-list {
-    padding: 5px;
+  padding: 5px;
-    transition: 0.3s;
+  transition: 0.3s;
-    border-radius: 5px;
+  border-radius: 5px;
-    margin: 5px;
+  margin: 5px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  flex-shrink: 0;
+
 }
 
 .status-list:hover {
-    background: rgba(0, 0, 0, 0.349);
+  background: rgba(0, 0, 0, 0.349);
 }
 
 .status-icon{
-    display: inline-block;
+  display: inline-block;
+  flex-shrink: 0;
 }
 
 .icon{
-    height: 30px;
+  height: 20px;
-    width: 30px;
+  width: 20px;
-    margin-top: 3px;
+  margin-top: 3px;
+  flex-shrink: 0;
 }
 .text{
-    display: inline-block;
+  display: inline-block;
-    vertical-align: top;
+  vertical-align: top;
-    margin-top: 9px;
+  flex-shrink: 0;
-    margin-left: 10px;
+  margin-left: 10px;
-    padding-right: 5px;
+  padding-right: 5px;
 }
 </style>
 

src/utils/changelog.js

@@ -14,6 +14,17 @@
 
 const config = [
 
+  {
+    version: 5.9,
+    title: "More Bug fixes!",
+    shortTitle: "",
+    date: "07/08/2019",
+    headColor: "rgba(255, 80, 17, 0.77)",
+    fix: [
+      "Fixed a bug where messages would appear blurry sometimes.",
+      "Fixed a bug where scrolling would be inverted in some devices.",
+    ]
+  },
   {
     version: 5.8,
     title: "Bug fixes, Change password.",

src/utils/windowProperties.js

@@ -0,0 +1,29 @@
+
+ import Vue from "vue";
+ import debounce  from "lodash/debounce";
+
+ const WindowProperties  = new Vue({
+   data () {
+     return {
+       resizeWidth: 0,
+       resizeHeight: 0,
+     }
+   },
+   created() {
+    this.resizeWidth = window.innerWidth;
+    this.resizeHeight = window.innerHeight;
+
+    this.debouncedResize =  debounce(this.onResize, 20);
+    window.addEventListener("resize", this.debouncedResize);
+
+    
+   },
+   methods: {
+     onResize() {
+      this.resizeWidth = window.innerWidth;
+      this.resizeHeight = window.innerHeight;
+     }
+   }
+ })
+
+ export default WindowProperties;

src/views/App.vue

@@ -53,7 +53,7 @@
 <script>
 import { bus } from "../main";
 import Popouts from "@/components/app/Popouts/Popouts.vue";
-
+import windowProperties from "@/utils/windowProperties";
 import changelog from "@/utils/changelog.js";
 import ConnectingScreen from "./../components/app/ConnectingScreen.vue";
 import Spinner from "./../components/Spinner.vue";
@@ -136,8 +136,6 @@ export default {
     if(currentTab) {
       this.currentTab = parseInt(currentTab);
     }
-
-
     // check if changelog is updated
     const seenVersion = localStorage.getItem("changelog-version-seen");
     if (!seenVersion || seenVersion < changelog[0].version) {