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 5447557f91
commit 838550b6cc
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>

45
front/src/views/sidebar/rooms/Room.vue
View File

@@ -1,9 +1,11 @@
<script setup>
import { useRouter } from "vue-router"
import { defineProps } from 'vue'
import BaseAvatar from '../../avatars/BaseAvatar.vue'
import ThreadList from './threads/ThreadList.vue'
import { useRouter } from "vue-router";
import { defineProps } from "vue";
import BaseAvatar from "../../avatars/BaseAvatar.vue";
import Badge from "../../../components/Badge.vue";
import ThreadList from "./threads/ThreadList.vue";
import store from "@/store/store";
import { decodeEmojis } from "@/utils/string";
const props = defineProps({
data: {
@@ -12,40 +14,50 @@ const props = defineProps({
user: String,
userId: Number,
notSeen: Number,
mailboxId: Number
}
})
mailboxId: Number,
threads: [Object],
},
});
const router = useRouter();
</script>
<template>
<div>
<div class="room" @click="router.push(`/${props.data.id}`)" v-bind:class = " store.state.activeRoom == props.data.id ? 'selected' : ''">
<BaseAvatar url="vue.png"/>
<div
class="room"
@click="router.push(`/${props.data.id}`)"
v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
>
<BaseAvatar url="vue.png" />
<div id="content">
<div id="sender">{{ props.data.user }}</div>
<div id="object">{{ props.data.roomName }}</div>
<div id="object">{{ decodeEmojis(props.data.roomName) }}</div>
</div>
<Badge class="badge" v-if="props.data.unseen > 0"
><template v-slot:body>{{ props.data.unseen }}</template>
</Badge>
</div>
<ThreadList />
<ThreadList :threads="props.data.threads" />
</div>
</template>
<style scoped>
.badge {
margin: auto 7px auto 1px;
}
.room {
box-sizing: border-box;
contain: content;
display: flex;
margin-bottom: 4px;
margin: 4px;
padding: 4px;
cursor: pointer;
}
.room:hover, .selected {
background-color: #41474f;;
.room:hover,
.selected {
background-color: #41474f;
border-radius: 8px;
}
@@ -78,5 +90,4 @@ const router = useRouter();
overflow: hidden;
width: 100%;
}
</style>
</style>

5
front/src/views/sidebar/rooms/Rooms.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="test">
<Room v-for="(room, index) in rooms()" :key="index" :data="room" />
</div>
</template>
@@ -23,10 +23,11 @@ export default {
</script>
<style scoped>
div {
.test {
display: flex;
flex-direction: column;
background-color: #24242B;
overflow: auto;
}
</style>

38
front/src/views/sidebar/rooms/threads/Thread.vue Normal file
View File

@@ -0,0 +1,38 @@
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
thread: Object
})
console.log(props.thread)
</script>
<template>
<div class="room">
{{props.thread.roomName}}
</div>
</template>
<style scoped>
.room {
box-sizing: border-box;
contain: content;
display: flex;
margin: -4px 4px 1px 4px;
padding: 4px;
cursor: pointer;
color: #a9b2bc;
}
.room:hover, .selected {
background-color: #41474f;;
border-radius: 8px;
}
.room::before {
content: "|";
margin: 0 10px;
color: white;
}
</style>

17
front/src/views/sidebar/rooms/threads/ThreadList.vue
View File

@@ -1,17 +1,16 @@
<script setup>
import Thread from './Thread.vue';
import { defineProps } from 'vue'
const props = defineProps({ threads: [Object] });
console.log(props.threads)
</script>
<template>
<div>
<Thread v-for="(thread, index) in props.threads" :key="index" :thread="thread" />
</div>
</template>
<script>
export default {
name: 'ThreadList',
props: {
},
}
</script>
<style scoped>
</style>