bcbc04325e
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
- Décode les encoded-words MIME (RFC 2047) des sujets et noms d'expéditeur via App\Mail\MimeHeaderDecoder, appliqué dans ImapMailProvider (sync propre) - Commande app:mail:redecode-headers (--dry-run) pour re-décoder l'existant en base - Aperçu inline images + PDF en visionneuse modale plein écran (MailAttachmentPreview), téléchargement conservé pour les autres types - Tests unitaires du décodeur + maj docs/mail-integration.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
122 lines
4.5 KiB
Vue
122 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
/** Ouverture de la visionneuse. */
|
|
modelValue: boolean
|
|
/** Nom du fichier affiché dans la barre. */
|
|
filename: string
|
|
/** Type MIME — détermine le rendu (image vs PDF). */
|
|
mimeType: string
|
|
/** Object URL du Blob de la pièce jointe. null tant que le contenu charge. */
|
|
url: string | null
|
|
/** Téléchargement en cours du contenu. */
|
|
loading: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
download: []
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const isImage = computed(() => props.mimeType.startsWith('image/'))
|
|
const isPdf = computed(() => props.mimeType === 'application/pdf')
|
|
|
|
function close(): void {
|
|
emit('update:modelValue', false)
|
|
}
|
|
|
|
function onKeydown(e: KeyboardEvent): void {
|
|
if (e.key === 'Escape') close()
|
|
}
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(open) => {
|
|
if (open) {
|
|
window.addEventListener('keydown', onKeydown)
|
|
} else {
|
|
window.removeEventListener('keydown', onKeydown)
|
|
}
|
|
},
|
|
)
|
|
|
|
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport v-if="modelValue" to="body">
|
|
<Transition name="mail-preview" appear>
|
|
<div class="fixed inset-0 z-50 flex flex-col bg-slate-900/80 backdrop-blur-sm">
|
|
<!-- Barre supérieure -->
|
|
<div class="flex flex-shrink-0 items-center justify-between gap-4 px-4 py-3 text-white">
|
|
<div class="flex min-w-0 items-center gap-2">
|
|
<Icon
|
|
:name="isImage ? 'material-symbols:image-outline' : 'material-symbols:picture-as-pdf-outline'"
|
|
size="18"
|
|
class="flex-shrink-0 text-white/70"
|
|
/>
|
|
<span class="truncate text-sm font-medium">{{ filename }}</span>
|
|
</div>
|
|
<div class="flex flex-shrink-0 items-center gap-1">
|
|
<button
|
|
type="button"
|
|
class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-white/90 transition-colors hover:bg-white/10"
|
|
@click="emit('download')"
|
|
>
|
|
<Icon name="material-symbols:download" size="18" />
|
|
<span class="hidden sm:inline">{{ t('mail.actions.download') }}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-md p-1.5 text-white/90 transition-colors hover:bg-white/10"
|
|
:aria-label="t('mail.preview.close')"
|
|
@click="close"
|
|
>
|
|
<Icon name="mdi:close" size="20" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<div class="flex min-h-0 flex-1 items-center justify-center overflow-auto p-4" @click.self="close">
|
|
<div v-if="loading" class="flex flex-col items-center gap-3 text-white/70">
|
|
<Icon name="material-symbols:progress-activity" size="32" class="animate-spin" />
|
|
<span class="text-sm">{{ t('mail.preview.loading') }}</span>
|
|
</div>
|
|
|
|
<img
|
|
v-else-if="isImage && url"
|
|
:src="url"
|
|
:alt="filename"
|
|
class="max-h-full max-w-full rounded-lg object-contain shadow-2xl"
|
|
>
|
|
|
|
<iframe
|
|
v-else-if="isPdf && url"
|
|
:src="url"
|
|
:title="filename"
|
|
class="h-full w-full max-w-5xl rounded-lg bg-white shadow-2xl"
|
|
/>
|
|
|
|
<div v-else class="flex flex-col items-center gap-3 text-white/70">
|
|
<Icon name="material-symbols:visibility-off-outline" size="32" />
|
|
<span class="text-sm">{{ t('mail.preview.unavailable') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mail-preview-enter-active,
|
|
.mail-preview-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.mail-preview-enter-from,
|
|
.mail-preview-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|