show mail content in modal on double click
This commit is contained in:
grimhilt
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Message } from "@/store/models/model";
|
||||
import { ref, watch, defineProps, PropType } from "vue";
|
||||
import Content from "../structure/message/Content.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
const props = defineProps({ messageId: { type: Number, require: true }, message: Object as PropType<Message> });
|
||||
@@ -16,11 +17,23 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Modal v-if="messageId != -1" :title="props.message?.subject" @close-modal="() => $emit('close')">
|
||||
<template v-slot:body> yep </template>
|
||||
<div class="main">
|
||||
<Modal v-if="messageId != -1" @close-modal="() => $emit('close')">
|
||||
<template v-slot:body>
|
||||
<div>{{ props.message?.subject ?? "No Object" }}</div>
|
||||
<Content type="large" :content="props.message?.content" class="content" />
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
<style scoped>
|
||||
.main {
|
||||
min-width: 700px;
|
||||
}
|
||||
/* todo */
|
||||
.content {
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
}
|
||||
</style>
|
||||
|
||||
70
front/src/components/structure/message/Content.vue
Normal file
70
front/src/components/structure/message/Content.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, onMounted, ref, watch } from "vue";
|
||||
import DOMPurify from "dompurify";
|
||||
|
||||
const props = defineProps({
|
||||
content: String,
|
||||
type: String,
|
||||
});
|
||||
|
||||
const iframe = ref<HTMLIFrameElement>();
|
||||
|
||||
// todo dompurify
|
||||
// background vs color
|
||||
const htmlDefault = (html: string) => {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
${html}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
};
|
||||
|
||||
function setIframeContent(content: string | undefined) {
|
||||
if (!iframe.value) return;
|
||||
if (!content) return;
|
||||
const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document;
|
||||
if (!doc) return;
|
||||
const html = DOMPurify.sanitize(content);
|
||||
doc.open();
|
||||
doc.write(htmlDefault(html));
|
||||
doc.close();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.content,
|
||||
(content: string | undefined) => {
|
||||
setIframeContent(content);
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
setIframeContent(props.content);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<iframe :class="type" ref="iframe"></iframe>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
iframe {
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
flex-basis: 100%;
|
||||
border: none;
|
||||
max-width: 640px; /* template width being 600px to 640px up to 750px (experiment and test) */
|
||||
background-color: rgb(234, 234, 234);
|
||||
}
|
||||
|
||||
.large {
|
||||
max-height: 700px;
|
||||
}
|
||||
</style>
|
||||
120
front/src/components/structure/message/Message.vue
Normal file
120
front/src/components/structure/message/Message.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref, PropType } from "vue";
|
||||
import { decodeEmojis } from "../../../utils/string";
|
||||
import { removeDuplicates } from "../../../utils/array";
|
||||
import { Address, Message } from "@/store/models/model";
|
||||
import Content from "./Content.vue";
|
||||
|
||||
const props = defineProps({
|
||||
msg: Object as PropType<Message>,
|
||||
members: Array as PropType<Address[]>,
|
||||
});
|
||||
|
||||
const displayAddresses = (addressIds: string[] | undefined): string => {
|
||||
if (!addressIds) return "";
|
||||
addressIds = removeDuplicates(addressIds);
|
||||
let res = "";
|
||||
addressIds.forEach((addressId) => {
|
||||
const address = props.members?.find((member) => member.id === parseInt(addressId));
|
||||
if (address) res += address.email;
|
||||
});
|
||||
return res;
|
||||
};
|
||||
|
||||
const classes = (): string => {
|
||||
const flags = props.msg?.flags?.split(",");
|
||||
|
||||
// not flags implies no seen flag
|
||||
if (!flags) return "msg-notSeen";
|
||||
|
||||
// Important takes the priority on Seen flag
|
||||
if (flags.includes("\\Important")) {
|
||||
return "msg-important";
|
||||
} else if (!flags.includes("\\Seen")) {
|
||||
return "msg-notSeen";
|
||||
}
|
||||
return "msg-basic";
|
||||
};
|
||||
</script>
|
||||
<!-- to if to is more than me
|
||||
cc -->
|
||||
<!-- object (channel only)
|
||||
content
|
||||
attachments -->
|
||||
<template>
|
||||
<div class="message" @dblclick="$emit('openMessageView', props.msg?.id)">
|
||||
<div id="context">
|
||||
<div class="left" id="profile">
|
||||
{{ displayAddresses(props.msg?.fromA?.split(",")) }} - {{ props.msg?.fromA }}
|
||||
</div>
|
||||
<div class="middle">{{ decodeEmojis(props.msg?.subject) }}</div>
|
||||
<div class="right" id="date">
|
||||
{{
|
||||
new Date(props.msg?.date ?? "").toLocaleString("en-GB", {
|
||||
weekday: "short",
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
timeZone: "Europe/Paris",
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" :class="[classes()]">
|
||||
<Content :content="props.msg?.content" />
|
||||
<div class="options">options {{ props?.msg?.flags }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message {
|
||||
width: auto;
|
||||
/* border: white 1px solid; */
|
||||
margin: 10px 5px 0px 5px;
|
||||
}
|
||||
|
||||
#context {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: var(--quaternary-background);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.middle {
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
padding-top: 6px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.msg-important {
|
||||
background-color: #ec7a4342;
|
||||
}
|
||||
|
||||
.msg-notSeen {
|
||||
background-color: #222b5b61;
|
||||
}
|
||||
|
||||
.msg-basic {
|
||||
background-color: var(--tertiary-background);
|
||||
}
|
||||
|
||||
.options {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
28
front/src/components/structure/message/Options.vue
Normal file
28
front/src/components/structure/message/Options.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, onMounted, ref, watch, PropType } from "vue";
|
||||
import { decodeEmojis } from "../../../utils/string";
|
||||
import { removeDuplicates } from "../../../utils/array";
|
||||
import DOMPurify from "dompurify";
|
||||
import { Address, Message } from "@/store/models/model";
|
||||
|
||||
const props = defineProps({
|
||||
msg: Object as PropType<Message>,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div>mark as not read</div>
|
||||
<div>flag favorite</div>
|
||||
<div>reply</div>
|
||||
<div>delete from all</div>
|
||||
<div>delete from remote</div>
|
||||
<div>transfer</div>
|
||||
<div>see source</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user