load message in front

This commit is contained in:
grimhilt
2023-03-25 13:06:59 +01:00
parent cb5021750a
commit 097dd8bf21
12 changed files with 246 additions and 131 deletions

View File

@@ -1,30 +1,72 @@
<script setup>
const data = {
html: "<div dir=\"ltr\">new content<br><div><br><div class=\"gmail_quote\"><div dir=\"ltr\" class=\"gmail_attr\">---------- Forwarded message ---------<br>De : <b class=\"gmail_sendername\" dir=\"auto\">Ulysse Carlier</b> <span dir=\"auto\">&lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;</span><br>Date: ven. 10 mars 2023 à 14:52<br>Subject: message to transfer<br>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;<br></div><br><br><div dir=\"ltr\">content to transfer<br></div>\n</div></div></div>\n",
text: "new content\n\n---------- Forwarded message ---------\nDe : Ulysse Carlier <carlierulysse@gmail.com>\nDate: ven. 10 mars 2023 à 14:52\nSubject: message to transfer\nTo: Hugueprime M <hugueprime@gmail.com>\n\n\ncontent to transfer\n",
textAsHtml: "<p>new content</p><p>---------- Forwarded message ---------<br/>De : Ulysse Carlier &lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;<br/>Date: ven. 10 mars 2023 &agrave; 14:52<br/>Subject: message to transfer<br/>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;</p><p>content to transfer</p>",
subject: "Fwd: message to transfer",
references: "<CAAGJdR0i=4w1i2Nb9=zx5bCPqkR+2eUCs=_qbXTSzugZu4EXFQ@mail.gmail.com>",
date: "2023-03-10T13:52:21.000Z",
}
import { defineProps } from "vue";
const props = defineProps({ data: Object });
console.log(props.data.date);
const date = new Date(props.data.date);
console.log(date);
</script>
<!-- to if to is more than me
<!-- to if to is more than me
cc -->
<!-- object (channel only)
<!-- object (channel only)
content
attachments -->
<template>
<div class="message">
<!-- <div v-html="data.html"></div> -->
<!-- <div v-html="data.text"></div> -->
<div></div>
<div v-html="data.textAsHtml"></div>
<div id="context">
<div class="left" id="profile">Carrefour@emailing .carrefor.fr "carrefour"</div>
<div class="middle">{{ props.data.subject }}</div>
<div class="right" id="date">
{{
date.toLocaleString("en-GB", {
weekday: "short",
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
timezone: "UTC+1",
})
}}
</div>
</div>
<div id="content">
<div v-html="props.data.content"></div>
</div>
</div>
</template>
<style scoped>
.message {
width: 100%;
width: auto;
border: white 1px solid;
padding: 10px;
margin: 5px;
}
#context {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#content {
overflow: auto;
max-height: 300px;
width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
}
.left,
.right {
display: flex;
align-items: center;
}
.middle {
margin: 0 10px;
flex: 1;
align-self: center;
display: contents;
}
</style>