load message in front
This commit is contained in:
@@ -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\"><<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>></span><br>Date: ven. 10 mars 2023 à 14:52<br>Subject: message to transfer<br>To: Hugueprime M <<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>><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 <<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>><br/>Date: ven. 10 mars 2023 à 14:52<br/>Subject: message to transfer<br/>To: Hugueprime M <<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>></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>
|
||||
|
||||
Reference in New Issue
Block a user