feat(TranslationModal): create TranslationModal

Signed-off-by: Grigory Vodyanov <[email protected]>
nextcloud · Dec 8, 2024 · 2a75349 · 2a75349
1 parent 93f6d65
commit 2a75349
Show file tree

Hide file tree

Showing 5 changed files with 330 additions and 3 deletions.
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
@@ -255,13 +255,13 @@
 					</template>
 				</NcActionInput>
 
-				<ActionButton :aria-label="t('spreed', 'Set custom snooze')"
+				<ActionButton :aria-label="t('mail', 'Set custom snooze')"
 					close-after-click
 					@click.stop="setCustomSnooze(customSnoozeDateTime)">
 					<template #icon>
 						<CheckIcon :size="16" />
 					</template>
-					{{ t('spreed', 'Set custom snooze') }}
+					{{ t('mail', 'Set custom snooze') }}
 				</ActionButton>
 			</template>
 			<template v-if="moreActionsOpen">

diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue
@@ -83,6 +83,15 @@
 				</template>
 				{{ t('mail', 'Unsnooze') }}
 			</ActionButton>
+			<ActionButton v-if="!isHtml"
+				:close-after-click="true"
+				@click.prevent="$emit('open-translation-modal')">
+				<template #icon>
+					<TranslationIcon :title="t('mail', 'Translate')"
+						:size="16" />
+				</template>
+				{{ t('mail', 'Translate') }}
+			</ActionButton>
 			<ActionButton :close-after-click="false"
 				@click="localMoreActionsOpen=true">
 				<template #icon>
@@ -225,6 +234,7 @@ import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
 import PrinterIcon from 'vue-material-design-icons/Printer.vue'
+import TranslationIcon from 'vue-material-design-icons/Translate.vue'
 import { mailboxHasRights } from '../util/acl.js'
 import { generateUrl } from '@nextcloud/router'
 import InformationIcon from 'vue-material-design-icons/Information.vue'
@@ -258,6 +268,7 @@ export default {
 		ChevronLeft,
 		CheckIcon,
 		DotsHorizontalIcon,
+		TranslationIcon,
 		DownloadIcon,
 		InformationIcon,
 		OpenInNewIcon,
@@ -299,6 +310,11 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		isHtml: {
+			// Indicates if the envelope is HTML
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
@@ -186,13 +186,15 @@
 							:with-select="false"
 							:with-show-source="true"
 							:more-actions-open.sync="moreActionsOpen"
+							:is-html="false"
 							@reply="onReply"
 							@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" />
+							@open-task-modal="onOpenTaskModal"
+							@open-translation-modal="onOpenTranslationModal" />
 					</NcActions>
 					<NcModal v-if="showSourceModal" class="source-modal" @close="onCloseSourceModal">
 						<div class="source-modal-content">
@@ -217,6 +219,10 @@
 						:account="account"
 						:envelopes="[envelope]"
 						@close="onCloseTagModal" />
+					<TranslationModal v-if="showTranslationModal"
+						:rich-parameters="{}"
+						:message="message.body"
+						@close="onCloseTranslationModal" />
 				</template>
 			</div>
 		</div>
@@ -300,6 +306,7 @@ import TagModal from './TagModal.vue'
 import MoveModal from './MoveModal.vue'
 import TaskModal from './TaskModal.vue'
 import EventModal from './EventModal.vue'
+import TranslationModal from './TranslationModal.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
@@ -322,6 +329,7 @@ export default {
 		TaskModal,
 		MoveModal,
 		TagModal,
+		TranslationModal,
 		ConfirmModal,
 		Avatar,
 		NcActionButton,
@@ -399,6 +407,7 @@ export default {
 			showEventModal: false,
 			showTaskModal: false,
 			showTagModal: false,
+			showTranslationModal: false,
 			rawMessage: '', // Will hold the raw source of the message when requested
 			isInternal: true,
 			enabledSmartReply: loadState('mail', 'llm_freeprompt_available', false),
@@ -864,6 +873,12 @@ export default {
 		onCloseTagModal() {
 			this.showTagModal = false
 		},
+		onOpenTranslationModal() {
+			this.showTranslationModal = true
+		},
+		onCloseTranslationModal() {
+			this.showTranslationModal = false
+		},
 		async onShowSourceModal() {
 			if (this.rawMessage.length === 0) {
 				const resp = await axios.get(