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

display mail in iframe, add design for thread and unseen

Browse Source
This commit is contained in:
grimhilt
2023-03-27 01:04:43 +02:00
parent a9d15027aa
commit bffcdafe7a
22 changed files with 237 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,35 @@
<script setup>
import { defineProps } from "vue";
import { defineProps, onMounted, ref } from "vue";
import { decodeEmojis } from "../../utils/string";
import DOMPurify from 'dompurify';
const props = defineProps({ data: Object });
const date = new Date(props.data.date);
const iframe = ref(null);
onMounted(() => {
const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
const html = DOMPurify.sanitize(props.data.content);
doc.open();
// todo dompurify
// background vs color
doc.write(`
<!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>
`);
doc.close();
});
</script>
<!-- to if to is more than me
cc -->
@@ -13,7 +40,7 @@ const date = new Date(props.data.date);
<div class="message">
<div id="context">
<div class="left" id="profile">Carrefour@emailing .carrefor.fr "carrefour"</div>
<div class="middle">{{ props.data.subject }}</div>
<div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
<div class="right" id="date">
{{
date.toLocaleString("en-GB", {
@@ -28,9 +55,7 @@ const date = new Date(props.data.date);
}}
</div>
</div>
<div id="content">
<div v-html="props.data.content"></div>
</div>
<iframe ref="iframe"></iframe>
</div>
</template>
@@ -46,25 +71,22 @@ const date = new Date(props.data.date);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#content {
overflow: auto;
iframe {
overflow-y: auto;
max-height: 300px;
width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
width: 100%;
max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
}
.left,
.right {
display: flex;
align-items: center;
white-space: nowrap;
}
.middle {
margin: 0 10px;
flex: 1;
align-self: center;
display: contents;
text-align: center;
}
</style>