Display actions on tap if mobile

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

3 files changed, 27 insertions, 3 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 9c3cdfe16..9a1fa7ab2 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -28,6 +28,7 @@ the main body of the message as well as a quote.
 	<div
 		class="message"
 		:class="{ 'hover': hover }"
+		@click="onClick"
 		@mouseover="hover=true"
 		@mouseleave="hover=false">
 		<div v-if="isFirstMessage" class="message__author">
@@ -42,7 +43,7 @@ the main body of the message as well as a quote.
 				<h6 v-else>
 					{{ messageTime }}
 				</h6>
-				<Actions v-show="hover" class="message__main__right__actions">
+				<Actions v-show="showActions" class="message__main__right__actions">
 					<ActionButton icon="icon-delete" @click="handleDelete">
 						Delete
 					</ActionButton>
@@ -58,6 +59,7 @@ the main body of the message as well as a quote.
 <script>
 import Actions from 'nextcloud-vue/dist/Components/Actions'
 import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
+import isMobile from 'nextcloud-vue/dist/Mixins/isMobile'
 
 export default {
 	name: 'Message',
@@ -65,6 +67,9 @@ export default {
 		Actions,
 		ActionButton
 	},
+	mixins: [
+		isMobile
+	],
 	props: {
 		/**
 		 * The sender of the message.
@@ -112,17 +117,35 @@ export default {
 	},
 	data() {
 		return {
-			hover: false
+			hover: false,
+			clicked: false
 		}
 	},
 	computed: {
 		messageTime() {
 			return OC.Util.formatDate(this.timestamp * 1000, 'LT')
+		},
+		/**
+		 * Determines when actions are shown:
+		 * desktop --> on hover
+		 * mobile --> on tap
+		 * @returns {boolean}
+		 */
+		showActions() {
+			if (this.isMobile && this.clicked) {
+				return true
+			} else if (!this.isMobile && this.hover) {
+				return true
+			} else return false
 		}
 	},
 	methods: {
 		handleDelete() {
 			this.$store.dispatch('deleteMessage', this.message)
+		},
+		onClick() {
+			this.$emit('clickeddddd')
+			this.clicked = true
 		}
 	}
 }
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 1b1f42cbb..80a7b9449 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -33,7 +33,6 @@
 				:key="message.id"
 				v-bind="message"
 				:is-first-message="index === 0"
-				:hover="hover"
 				:actor-display-name="actorDisplayName"
 				:is-temporary="message.timestamp === 0" />
 		</div>
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 1292b27c6..7409a2b8b 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -28,6 +28,8 @@ the Vue virtual scroll list component, whose docs you can find [here.](https://g
 </docs>
 
 <template>
+	<!-- size and remain refer to the amount and initial height of the items that
+	are outside of the viewport -->
 	<virtual-list :size="40" :remain="8" :variable="true"
 		class="scroller">
 		<MessagesGroup