copy button, debounced scroll event.

src/components/app/MessageLogs.vue

@@ -35,7 +35,7 @@ import { bus } from "../../main";
 import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import uploadsQueue from "@/components/app/uploadsQueue.vue";
-
+import debounce from "lodash/debounce";
 
 import windowProperties from '@/utils/windowProperties';
 
@@ -59,12 +59,12 @@ export default {
     };
   },
   methods: {
-    scrollEvent(event) {
+    scrollEvent: debounce(function(event) {
-      const { currentTarget: { scrollTop, clientHeight, scrollHeight} } = event;
+      const { target: { scrollTop, clientHeight, scrollHeight} } = event;
       this.scrolledDown = Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
       this.scrolledTop = scrollTop === 0;
       this.currentScrollTopPos = scrollTop;
-    },
+    }, 20),
     scrollDown(data) {
       const element = this.$refs['msg-logs']
       const force = data && data.force ? data.force : false;

src/components/app/MessageTemplate.vue

@@ -57,12 +57,7 @@
         <message-embed-template v-if="embed && Object.keys(embed).length" :embed="embed"/>
       </div>
       <div class="other-information">
-        <div class="drop-down-button" ref="drop-down-button" @click="dropDownVisable = !dropDownVisable"><i class="material-icons">more_vert</i></div>
+        <div class="drop-down-button" ref="drop-down-button" @click="openContextMenu"><i class="material-icons">more_vert</i></div>
-        <div class="drop-down-menu" v-click-outside="closeDropDown" v-if="dropDownVisable">
-          <div class="drop-item" @click="copyMessage" >Copy</div>
-          <div class="drop-item" @click="editMessage" v-if="user.uniqueID === uniqueID">Edit</div>
-          <div class="drop-item warn" @click="deleteMessage">Delete</div>
-        </div>
         <div class="sending-status" v-if="timeEdited && (status === undefined || status === 1)" :title="`Edited ${getEditedDate}`"><i class="material-icons">edit</i></div>
         <div class="sending-status" v-else-if="status === 0"><i class="material-icons">hourglass_full</i></div>
         <div class="sending-status" v-else-if="status === 1"><i class="material-icons">done</i></div>    
@@ -127,27 +122,27 @@ export default {
   },
   data() {
     return {
-      dropDownVisable: false,
       hover: false
     }
   },
   methods: {
+    openContextMenu(event) {
+      const element = event.target;
+      const {x, y} = element.getBoundingClientRect()
+      this.$store.dispatch('setMessageContext', {
+        x,
+        y,
+        channelID: this.channelID,
+        messageID: this.messageID,
+        message: this.message
+      });
+    },
     openUserInformation() {
       this.$store.dispatch("setUserInformationPopout", this.uniqueID);
     },
     imageClicked(event) {
       this.$store.dispatch("setImagePreviewURL", event.target.src);
     },
-    closeDropDown(event) {
-      const dropDownButton = this.$refs['drop-down-button'];
-      if (!dropDownButton || dropDownButton.contains(event.target)) return;
-      this.dropDownVisable = false
-    },
-    async deleteMessage() {
-      this.dropDownVisable = false;
-      const {ok, error, result} = await messagesService.delete(this.messageID, this.channelID);
-      
-    },
     editMessage() {
       if (this.uniqueID !== this.user.uniqueID) return;
       this.dropDownVisable = false;
@@ -197,10 +192,6 @@ export default {
     onResize(dimentions) {
       this.imageSize();
     },
-    copyMessage() {
-      this.dropDownVisable = false;
-      this.$clipboard(this.message);
-    }
   },
   watch: {
     getWindowWidth(dimentions) {
@@ -271,29 +262,8 @@ export default {
   position: relative;
   z-index: 1;
 }
-.drop-down-menu {
+
-  position: absolute;
+
-  z-index: 9999999;
-  background: rgba(0, 0, 0, 0.918);
-  border-radius: 10px;
-  padding: 5px;
-  margin-top: 25px;
-  margin-left: -24px;
-  color: white;
-}
-.drop-item {
-  padding: 3px;
-  border-radius: 5px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 13px;
-}
-.drop-item:hover {
-  background: rgb(41, 41, 41);
-}
-.warn {
-  color: red;
-}
 
 .container:hover .drop-down-button{
   opacity: 1;

src/components/app/Popouts/Popouts.vue

@@ -12,6 +12,7 @@
       <server-invite key="sip" v-if="popouts.showServerInviteMenu" />
       <server-settings key="ss" v-if="popouts.serverSettings.serverID"/>
       <GenericPopout  key="gp" v-if="popouts.genericMessage"/>
+      <message-context-menu  key="mcm" v-if="popouts.messageContextMenu.messageID"/>
     </transition-group>
   </div>
 </template>
@@ -20,6 +21,7 @@
 
 //popouts
   const userInformationPopout = () => import('./Popouts/userInformationPopout.vue');
+  const messageContextMenu = () => import('./Popouts/messageContextMenu');
   const AddServer = () => import('./Popouts/AddServer.vue');
   const Settings = () => import('./Popouts/Settings.vue');
   const TakeSurveyPopout = () => import('./Popouts/TakeSurveyPopout.vue');
@@ -45,7 +47,8 @@ export default {
     AddServer,
     ServerInvite: ServerInvitePopout,
     ServerSettings,
-    GenericPopout
+    GenericPopout,
+    messageContextMenu
   },
   data() {
     return {
@@ -118,7 +121,7 @@ export default {
 <style scoped>
 .show-enter-active,
 .show-leave-active {
-  transition: opacity 0.3s;
+  transition: opacity 0.1s;
 }
 .show-enter, .show-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;

src/components/app/Popouts/Popouts/TakeSurveyPopout.vue

@@ -70,6 +70,7 @@ export default {
   height: 330px;
   width: 400px;
   display: flex;
+  flex-direction: column;
   margin: auto;
   background-color: rgba(43, 43, 43, 0.959);
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);

src/components/app/Popouts/Popouts/messageContextMenu.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="drop-down-menu" v-click-outside="outsideClick">
+    <div class="item" @click="copyMessage" >Copy</div>
+    <div class="item" @click="editMessage">Edit</div>
+    <div class="item warn" @click="deleteMessage">Delete</div>
+  </div>
+</template>
+
+
+<script>
+import messagesService from '@/services/messagesService';
+export default {
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    closeMenu() {
+      this.$store.dispatch('setMessageContext', {messageID: null, x: null, y: null});
+    },
+    outsideClick(event) {
+      const target = event.target;
+      if (target.closest('.drop-down-button')) return;
+      this.closeMenu();
+    },
+    editMessage() {
+      this.$store.dispatch("setEditMessage", {
+        channelID: this.contextDetails.channelID,
+        messageID: this.contextDetails.messageID,
+        message: this.contextDetails.message
+      });
+      this.closeMenu();
+    },
+    copyMessage() {
+      this.$clipboard(this.contextDetails.message);
+      this.closeMenu();
+    },
+    async deleteMessage() {
+      messagesService.delete(this.contextDetails.messageID, this.contextDetails.channelID);
+      this.closeMenu();
+    },
+    setPosition() {
+      const y = this.contextDetails.y + 20;
+      const x = this.contextDetails.x - 20;
+
+      this.$el.style.top = y  + "px";
+      this.$el.style.left = x + "px";
+    }
+  },
+  mounted() {
+    this.setPosition();
+  },
+  watch: {
+    contextDetails() {
+      this.setPosition();
+    }
+  },
+  computed: {
+    contextDetails() {
+      const { x, y, messageID, message, channelID } = this.$store.getters.popouts.messageContextMenu;
+      return { 
+        x,
+        y,
+        messageID,
+        message,
+        channelID
+      }
+    }
+  },
+
+};
+</script>
+
+
+<style lang="scss" scoped>
+.drop-down-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(31, 31, 31, 0.895);
+  z-index: 99999;
+  padding: 5px;
+  border-radius: 5px;
+  user-select: none;
+  color: white;
+}
+
+.item {
+  padding: 3px;
+  margin: 2px;
+  border-radius: 5px;
+  transition: 0.3s;
+  font-size: 13px;
+  cursor: pointer;
+  &:hover {
+    background: rgb(56, 56, 56);
+  }
+  &.warn {
+    &:hover {
+      background: rgba(255, 90, 90, 0.338);
+    }
+    background: rgba(255, 90, 90, 0.1);
+    color: rgb(255, 59, 59);
+  }
+}
+
+</style>

src/store/modules/popoutsModule/popoutsModule.js

@@ -28,7 +28,16 @@ const state = {
     serverID: null,
     index: null
    },
-  editMessage: null 
+  editMessage: null,
+  messageContextMenu: {
+    messageID: null, 
+    message: null,
+    channelID: null,
+    x: null,
+    y: null
+  } 
+
+  
 }
 
 const getters = {
@@ -61,10 +70,16 @@ const actions = {
   },
   setEditMessage(context, data){
     context.commit('setEditMessage', data)
+  },
+  setMessageContext(context, {messageID, x, y, channelID, message}) {
+    context.commit('setMessageContext', {messageID, x, y, channelID, message});
   }
 }
 
 const mutations = {
+  setMessageContext(state, data) {
+    Vue.set(state, 'messageContextMenu', data);
+  },
   setEditMessage(state, data){
     Vue.set(state, 'editMessage', data);
   },

src/utils/changelog.js

@@ -21,10 +21,11 @@ const config = [
     date: "17/08/2019",
     headColor: "rgba(25, 130, 255, 0.77)",
     new: [
-
+      "Added a copy button in the message context menu."
     ],
     fix: [
       "Fixed bugs with textarea not resizing properly",
+      "Fixed a bug where message context menu would be not visible.",
       "Other small bugs have been fixed."
     ]
   },