test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stop css bleeding from email content

Browse Source
This commit is contained in:
Shariq Ansari 2024-05-30 16:59:59 +05:30
parent c8146b7c3c
commit 290657c9de
2 changed files with 110 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/components/Activities.vue
View File

@ -523,11 +523,7 @@
</span> </span>
<span v-if="activity.data.bcc">{{ activity.data.bcc }}</span> <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
</div> </div>
<FadedScrollableDiv <EmailContent :content="activity.data.content" />
:maskHeight="30"
class="email-content prose-f max-h-[500px] overflow-y-auto"
v-html="activity.data.content"
/>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<AttachmentItem <AttachmentItem
v-for="a in activity.data.attachments" v-for="a in activity.data.attachments"
@ -886,6 +882,7 @@
/> />
</template> </template>
<script setup> <script setup>
import EmailContent from '@/components/EmailContent.vue'
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
import ActivityIcon from '@/components/Icons/ActivityIcon.vue' import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
import EmailIcon from '@/components/Icons/EmailIcon.vue' import EmailIcon from '@/components/Icons/EmailIcon.vue'
@ -1399,79 +1396,4 @@ nextTick(() => {
.audio-control::-webkit-media-controls-panel { .audio-control::-webkit-media-controls-panel {
background-color: white; background-color: white;
} }
/* email content */
.email-content {
word-break: break-word;
}
:deep(.email-content
:is(:where(table):not(:where([class~='not-prose'], [class~='not-prose']
*)))) {
table-layout: auto;
}
:deep(.email-content
:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
width: unset;
table-layout: auto;
text-align: unset;
margin-top: unset;
margin-bottom: unset;
font-size: unset;
line-height: unset;
}
/* tr */
:deep(.email-content
:where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose']
*))) {
border-bottom-width: 0;
border-bottom-color: transparent;
}
/* td */
:deep(.email-content
:is(:where(td):not(:where([class~='not-prose'], [class~='not-prose'] *)))) {
position: unset;
border-width: 0;
border-color: transparent;
padding: 0;
}
:deep(.email-content
:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose']
*))) {
vertical-align: revert;
}
/* image */
:deep(.email-content
:is(:where(img):not(:where([class~='not-prose'], [class~='not-prose']
*)))) {
border-width: 0;
}
:deep(.email-content
:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
margin: 0;
}
/* before & after */
:deep(.email-content
:where(blockquote
p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::before) {
content: none;
}
:deep(.email-content
:where(blockquote
p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::after) {
content: none;
}
</style> </style>

108
frontend/src/components/EmailContent.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<iframe
:srcdoc="htmlContent"
class="h-screen max-h-[500px] w-full"
style="
mask-image: linear-gradient(
to bottom,
black calc(100% - 30px),
transparent 100%
);
"
/>
</template>
<script setup>
const props = defineProps({
content: {
type: String,
required: true,
},
})
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<link href="/src/index.css" rel="stylesheet">
<style>
.email-content {
word-break: break-word;
}
.email-content
:is(:where(table):not(:where([class~='not-prose'], [class~='not-prose']
*))) {
table-layout: auto;
}
.email-content
:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
width: unset;
table-layout: auto;
text-align: unset;
margin-top: unset;
margin-bottom: unset;
font-size: unset;
line-height: unset;
}
/* tr */
.email-content
:where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose']
*)) {
border-bottom-width: 0;
border-bottom-color: transparent;
}
/* td */
.email-content
:is(:where(td):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
position: unset;
border-width: 0;
border-color: transparent;
padding: 0;
}
.email-content
:where(tbody td):not(:where([class~='not-prose'], [class~='not-prose']
*)) {
vertical-align: revert;
}
/* image */
.email-content
:is(:where(img):not(:where([class~='not-prose'], [class~='not-prose']
*))) {
border-width: 0;
}
.email-content
:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin: 0;
}
/* before & after */
.email-content
:where(blockquote
p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::before {
content: none;
}
.email-content
:where(blockquote
p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::after {
content: none;
}
</style>
</head>
<body>
<div class="email-content prose-f">${props.content}</div>
</body>
</html>
`
</script>