From 5e661954c8e81f654f4e0e0f1f805da48ce01610 Mon Sep 17 00:00:00 2001 From: supertiger1234 Date: Sat, 17 Aug 2019 21:39:21 +0100 Subject: [PATCH] copy button, debounced scroll event. --- src/components/app/MessageLogs.vue | 8 +- src/components/app/MessageTemplate.vue | 58 +++------- src/components/app/Popouts/Popouts.vue | 7 +- .../app/Popouts/Popouts/TakeSurveyPopout.vue | 1 + .../Popouts/Popouts/messageContextMenu.vue | 108 ++++++++++++++++++ .../modules/popoutsModule/popoutsModule.js | 17 ++- src/utils/changelog.js | 3 +- 7 files changed, 150 insertions(+), 52 deletions(-) create mode 100644 src/components/app/Popouts/Popouts/messageContextMenu.vue diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue index e80ce06..ee7174b 100644 --- a/src/components/app/MessageLogs.vue +++ b/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) { - const { currentTarget: { scrollTop, clientHeight, scrollHeight} } = event; + scrollEvent: debounce(function(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; diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue index 1feb4c8..8d36617 100644 --- a/src/components/app/MessageTemplate.vue +++ b/src/components/app/MessageTemplate.vue @@ -57,12 +57,7 @@
-
more_vert
-
-
Copy
-
Edit
-
Delete
-
+
more_vert
edit
hourglass_full
done
@@ -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; diff --git a/src/components/app/Popouts/Popouts.vue b/src/components/app/Popouts/Popouts.vue index be81856..edf64e6 100644 --- a/src/components/app/Popouts/Popouts.vue +++ b/src/components/app/Popouts/Popouts.vue @@ -12,6 +12,7 @@ +
@@ -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 { diff --git a/src/store/modules/popoutsModule/popoutsModule.js b/src/store/modules/popoutsModule/popoutsModule.js index 54c4a65..b61a781 100644 --- a/src/store/modules/popoutsModule/popoutsModule.js +++ b/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); }, diff --git a/src/utils/changelog.js b/src/utils/changelog.js index fba8d20..a50b0d8 100644 --- a/src/utils/changelog.js +++ b/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." ] },