Scroll up to load more. (needs more work.)

src/components/app/MessagePanel.vue

@@ -125,6 +125,7 @@ export default {
       typingRecipients: {},
       showEmojiPanel: false,
       scrolledDown: true,
+      scrolledTop: false,
     };
   },
   methods: {
@@ -458,6 +459,7 @@ export default {
     scrollEvent(event) {
       const { currentTarget: { scrollTop, clientHeight, scrollHeight} } = event;
       this.scrolledDown = Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
+      this.scrolledTop = scrollTop === 0;
     },
     scrollDown() {
       if (!this.scrolledDown) return;
@@ -467,6 +469,25 @@ export default {
     },
     onResize(dimentions) {
       this.scrollDown();
+    },
+    async loadMoreMessages() {
+      const msgLogs = this.$refs['msg-logs'];
+      const scrollTop = msgLogs.scrollTop;
+      const scrollHeight = msgLogs.scrollHeight;
+
+      const continueMessageID = this.selectedChannelMessages[0].messageID;
+
+      const {ok, result, error} = await messagesService.get(this.selectedChannelID, continueMessageID)
+      if (ok) {
+        if (!result.data.messages.length) return
+        this.$store.dispatch('addMessages', result.data.messages)
+        this.$nextTick(_ => {
+          msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight; 
+        })
+      }
+    },
+    scrolledUpEvent() {
+      this.loadMoreMessages();
     }
   },
   mounted() {
@@ -548,6 +569,10 @@ export default {
     },
     getWindowWidth(dimentions) {
       this.onResize();
+    },
+    scrolledTop(scrolledTop) {
+      if (scrolledTop)
+        this.scrolledUpEvent();
     }
   },
   computed: {

src/components/app/Tabs/News.vue

@@ -112,6 +112,9 @@ export default {
   margin-bottom: 10px;
   border-radius: 10px;
 }
+.information {
+  overflow-wrap: break-word;
+}
 .heading.latest {
   background: rgba(38, 139, 255, 0.87);
 }
@@ -140,12 +143,4 @@ export default {
   margin-bottom: 10px;
 }
 
-@media (max-width: 840px) {
-  .news {
-    flex-direction: column;
-  }
-  .todo-list {
-    margin-left: 0;
-  }
-}
 </style>

src/services/messagesService.js

@@ -2,8 +2,8 @@ import {instance, wrapper} from './Api';
 import filesize from "filesize";
 export default {
   // TODO: add ?continue=id
-  get ( channelID )  {
+  get ( channelID, continueMessageID )  {
-    return wrapper(instance().get(`messages/channels/${channelID}`));
+    return wrapper(instance().get(`messages/channels/${channelID}${continueMessageID ? '?continue=' + continueMessageID : ''}`));
   },
   delete ( messageID, channelID )  {
     return wrapper(instance().delete(`messages/${messageID}/channels/${channelID}`));

src/store/modules/messageModule.js

@@ -74,6 +74,14 @@ const actions = {
     // send notification if message is not ours
     context.commit("addMessage", data);
   },
+  addMessages(context, messagesArr){
+    const channelID = messagesArr[0].channelID;
+    const messages = context.state.messages[channelID];
+
+    const join = [ ...messagesArr.reverse(), ...messages,  ];
+
+    context.commit('messages', {messages: join, channelID});
+  },
   replaceMessage(context, data) {
     context.commit("replaceMessage", data);
   },

src/utils/changelog.js

@@ -14,6 +14,22 @@
 
 const config = [
 
+  {
+    version: 6.1,
+    title: "Download button, bug fixes",
+    shortTitle: "",
+    date: "13/08/2019",
+    headColor: "rgba(205, 80, 87, 0.77)",
+    new: [
+      "Added download button.",
+
+    ],
+    fix: [
+      "Fixed emoji size (2emx2em).",
+      "Fixed a mistake in tag in profile panel.",
+      "Fixed a bug where when logging out, the local storage data used to be present."
+    ]
+  },
   {
     version: 6.0,
     title: "Desktop app!",