fix(envelope menu): prevent modals from closing automatically

Signed-off-by: Johannes Merkel <[email protected]>

package.json

@@ -78,7 +78,6 @@
     "vue": "^2.7.14",
     "vue-autosize": "^1.0.2",
     "vue-click-outside": "^1.1.0",
-    "vue-frag": "^1.4.3",
     "vue-material-design-icons": "^5.2.0",
     "vue-on-click-outside": "^1.0.3",
     "vue-router": "^3.6.5",

src/components/MenuEnvelope.vue

@@ -60,7 +60,7 @@
 			</ActionButton>
 			<ActionButton v-if="hasWriteAcl"
 				:close-after-click="true"
-				@click.prevent="onOpenTagModal">
+				@click.prevent="$emit('open-tag-modal')">
 				<template #icon>
 					<TagIcon
 						:title="t('mail', 'Edit tags')"
@@ -83,7 +83,7 @@
 			<ActionButton
 				v-if="hasDeleteAcl"
 				:close-after-click="true"
-				@click.prevent="onOpenMoveModal">
+				@click.prevent="$emit('open-move-modal')">
 				<template #icon>
 					<OpenInNewIcon
 						:title="t('mail', 'Move message')"
@@ -148,7 +148,7 @@
 				{{ t('mail', 'Edit as new message') }}
 			</ActionButton>
 			<ActionButton :close-after-click="true"
-				@click.prevent="showEventModal = true">
+				@click.prevent="$emit('open-event-modal')">
 				<template #icon>
 					<CalendarBlankIcon
 						:title="t('mail', 'Create event')"
@@ -157,7 +157,7 @@
 				{{ t('mail', 'Create event') }}
 			</ActionButton>
 			<ActionButton :close-after-click="true"
-				@click.prevent="showTaskModal = true">
+				@click.prevent="$emit('open-task-modal')">
 				<template #icon>
 					<TaskIcon
 						:title="t('mail', 'Create task')"
@@ -167,7 +167,7 @@
 			</ActionButton>
 			<ActionButton v-if="withShowSource"
 				:close-after-click="true"
-				@click.prevent="onShowSourceModal">
+				@click.prevent="$emit('show-source-modal')">
 				<template #icon>
 					<InformationIcon
 						:title="t('mail', 'View source')"
@@ -237,40 +237,14 @@
 				{{ t('spreed', 'Set custom snooze') }}
 			</NcActionButton>
 		</template>
-		<Modal v-if="showSourceModal" class="source-modal" @close="onCloseSourceModal">
-			<div class="source-modal-content">
-				<div class="section">
-					<h2>{{ t('mail', 'Message source') }}</h2>
-					<pre class="message-source">{{ rawMessage }}</pre>
-				</div>
-			</div>
-		</Modal>
-		<MoveModal v-if="showMoveModal"
-			:account="account"
-			:envelopes="[envelope]"
-			@move="onMove"
-			@close="onCloseMoveModal" />
-		<EventModal v-if="showEventModal"
-			:envelope="envelope"
-			@close="showEventModal = false" />
-		<TaskModal v-if="showTaskModal"
-			:envelope="envelope"
-			@close="showTaskModal = false" />
-		<TagModal
-			v-if="showTagModal"
-			:account="account"
-			:envelopes="[envelope]"
-			@close="onCloseTagModal" />
 	</div>
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
 import {
 	NcActionButton,
 	NcActionButton as ActionButton,
 	NcActionLink as ActionLink,
-	NcModal as Modal,
 } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'
 import { Base64 } from 'js-base64'
@@ -280,13 +254,10 @@ import CheckIcon from 'vue-material-design-icons/Check'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
 import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal'
 import DownloadIcon from 'vue-material-design-icons/Download'
-import EventModal from './EventModal'
-import TaskModal from './TaskModal'
 import { mailboxHasRights } from '../util/acl'
 import { generateUrl } from '@nextcloud/router'
 import InformationIcon from 'vue-material-design-icons/Information'
 import ImportantIcon from './icons/ImportantIcon'
-import MoveModal from './MoveModal'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew'
 import PlusIcon from 'vue-material-design-icons/Plus'
 import ReplyIcon from 'vue-material-design-icons/Reply'
@@ -296,7 +267,6 @@ import ShareIcon from 'vue-material-design-icons/Share'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import TagIcon from 'vue-material-design-icons/Tag'
-import TagModal from './TagModal'
 import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
@@ -320,20 +290,15 @@ export default {
 		CheckIcon,
 		DotsHorizontalIcon,
 		DownloadIcon,
-		EventModal,
 		InformationIcon,
-		Modal,
-		MoveModal,
 		OpenInNewIcon,
 		PlusIcon,
 		ReplyIcon,
 		ReplyAllIcon,
 		ShareIcon,
 		TagIcon,
-		TagModal,
 		ImportantIcon,
 		TaskIcon,
-		TaskModal,
 		AlarmIcon,
 	},
 	props: {
@@ -376,12 +341,6 @@ export default {
 	data() {
 		return {
 			debug: window?.OC?.debug || false,
-			rawMessage: '', // Will hold the raw source of the message when requested
-			showSourceModal: false,
-			showMoveModal: false,
-			showEventModal: false,
-			showTaskModal: false,
-			showTagModal: false,
 			localMoreActionsOpen: false,
 			snoozeActionsOpen: false,
 			forwardMessages: this.envelope.databaseId,
@@ -595,34 +554,6 @@ export default {
 				forwardedMessages: [this.envelope.databaseId],
 			})
 		},
-		async onShowSourceModal() {
-			const resp = await axios.get(
-				generateUrl('/apps/mail/api/messages/{id}/source', {
-					id: this.envelope.databaseId,
-				})
-			)
-
-			this.rawMessage = resp.data.source
-			this.showSourceModal = true
-		},
-		onCloseSourceModal() {
-			this.showSourceModal = false
-		},
-		onMove() {
-			this.$emit('move')
-		},
-		onOpenMoveModal() {
-			this.showMoveModal = true
-		},
-		onCloseMoveModal() {
-			this.showMoveModal = false
-		},
-		onOpenEventModal() {
-			this.showEventModal = true
-		},
-		onOpenTagModal() {
-			this.showTagModal = true
-		},
 		onReply(onlySender = false) {
 			this.$store.dispatch('startComposerSession', {
 				reply: {
@@ -631,9 +562,6 @@ export default {
 				},
 			})
 		},
-		onCloseTagModal() {
-			this.showTagModal = false
-		},
 		async onOpenEditAsNew() {
 			await this.$store.dispatch('startComposerSession', {
 				templateMessageId: this.envelope.databaseId,

src/components/ThreadEnvelope.vue

@@ -84,13 +84,13 @@
 					</div>
 				</div>
 				<div class="envelope__header__left__unsubscribe">
-					<ButtonVue
+					<NcActionButton
 						v-if="message && message.dkimValid && (message.unsubscribeUrl || message.unsubscribeMailto)"
 						type="tertiary"
 						class="envelope__header__unsubscribe"
 						@click="showListUnsubscribeConfirmation = true">
 						{{ t('mail', 'Unsubscribe') }}
-					</ButtonVue>
+					</NcActionButton>
 				</div>
 			</router-link>
 			<div class="right">
@@ -187,8 +187,37 @@
 							:with-select="false"
 							:with-show-source="true"
 							:more-actions-open.sync="moreActionsOpen"
-							@delete="$emit('delete',envelope.databaseId)" />
+							@delete="$emit('delete',envelope.databaseId)"
+							@show-source-modal="onShowSourceModal"
+							@open-tag-modal="onOpenTagModal"
+							@open-move-modal="onOpenMoveModal"
+							@open-event-modal="onOpenEventModal"
+							@open-task-modal="onOpenTaskModal" />
 					</NcActions>
+					<NcModal v-if="showSourceModal" class="source-modal" @close="onCloseSourceModal">
+						<div class="source-modal-content">
+							<div class="section">
+								<h2>{{ t('mail', 'Message source') }}</h2>
+								<pre class="message-source">{{ rawMessage }}</pre>
+							</div>
+						</div>
+					</NcModal>
+					<MoveModal v-if="showMoveModal"
+						:account="account"
+						:envelopes="[envelope]"
+						@move="onMove"
+						@close="onCloseMoveModal" />
+					<EventModal v-if="showEventModal"
+						:envelope="envelope"
+						@close="onCloseEventModal" />
+					<TaskModal v-if="showTaskModal"
+						:envelope="envelope"
+						@close="onCloseTaskModal" />
+					<TagModal
+						v-if="showTagModal"
+						:account="account"
+						:envelopes="[envelope]"
+						@close="onCloseTagModal" />
 				</template>
 			</div>
 		</div>
@@ -232,7 +261,7 @@
 </template>
 <script>
 import Avatar from './Avatar'
-import { NcActionButton } from '@nextcloud/vue'
+import { NcActionButton, NcModal } from '@nextcloud/vue'
 import ConfirmModal from './ConfirmationModal.vue'
 import Error from './Error'
 import importantSvg from '../../img/important.svg'
@@ -263,6 +292,12 @@ import { isPgpText } from '../crypto/pgp'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
 import { unsubscribe } from '../service/ListService'
+import TagModal from './TagModal.vue'
+import MoveModal from './MoveModal.vue'
+import TaskModal from './TaskModal.vue'
+import EventModal from './EventModal.vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
 
 // Ternary loading state
 const LOADING_DONE = 0
@@ -272,6 +307,11 @@ const LOADING_BODY = 2
 export default {
 	name: 'ThreadEnvelope',
 	components: {
+		NcModal,
+		EventModal,
+		TaskModal,
+		MoveModal,
+		TagModal,
 		ConfirmModal,
 		Avatar,
 		NcActionButton,
@@ -342,6 +382,12 @@ export default {
 			LOADING_MESSAGE,
 			recomputeMenuSize: 0,
 			moreActionsOpen: false,
+			showSourceModal: false,
+			showMoveModal: false,
+			showEventModal: false,
+			showTaskModal: false,
+			showTagModal: false,
+			rawMessage: '', // Will hold the raw source of the message when requested
 		}
 	},
 	computed: {
@@ -729,6 +775,46 @@ export default {
 				this.showListUnsubscribeConfirmation = false
 			}
 		},
+		onMove() {
+			this.$emit('move')
+		},
+		onOpenMoveModal() {
+			this.showMoveModal = true
+		},
+		onCloseMoveModal() {
+			this.showMoveModal = false
+		},
+		onOpenEventModal() {
+			this.showEventModal = true
+		},
+		onCloseEventModal() {
+			this.showEventModal = false
+		},
+		onOpenTaskModal() {
+			this.showTaskModal = true
+		},
+		onCloseTaskModal() {
+			this.showTaskModal = false
+		},
+		onOpenTagModal() {
+			this.showTagModal = true
+		},
+		onCloseTagModal() {
+			this.showTagModal = false
+		},
+		async onShowSourceModal() {
+			const resp = await axios.get(
+				generateUrl('/apps/mail/api/messages/{id}/source', {
+					id: this.envelope.databaseId,
+				})
+			)
+
+			this.rawMessage = resp.data.source
+			this.showSourceModal = true
+		},
+		onCloseSourceModal() {
+			this.showSourceModal = false
+		},
 	},
 }
 </script>