grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show mail content in modal on double click

Browse Source
This commit is contained in:
grimhilt
2023-04-11 18:59:10 +02:00
parent 8cc738c9b2
commit 9842ebeb12
6 changed files with 122 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
front/src/views/room/Message.vue
View File

@@ -1,172 +0,0 @@
<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>,
members: Array as PropType<Address[]>,
});
console.log(props.msg);
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.msg,
(newData: Message | undefined) => {
setIframeContent(newData?.content);
},
);
onMounted(() => {
setIframeContent(props.msg?.content);
});
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()]">
<iframe ref="iframe"></iframe>
<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);
}
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);
}
.options {
flex: 1;
text-align: center;
}
</style>

2
front/src/views/room/RoomView.vue
View File

@@ -3,7 +3,7 @@ import { useStore } from "vuex";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { onBeforeMount, ref } from "vue";
import Header from "./Header.vue";
import Message from "./Message.vue";
import Message from "../../components/structure/message/Message.vue";
import { Room, RoomType } from "@/store/models/model";
import MessageViewModal from "@/components/modals/MessageViewModal.vue";