Skip to content

Commit

Permalink
Use scoped preflight to address email css overwrite (#644)
Browse files Browse the repository at this point in the history
  • Loading branch information
@harryzcy
harryzcy authored Nov 19, 2023
1 parent 27a78ab commit 6cc1755
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 149 deletions.
4 changes: 2 additions & 2 deletions web/src/pages/EmailList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export default function EmailList() {
}

return (
<>
<div className="preflight">
<div ref={menuRef} className="mb-4">
<EmailMenuBar
emailIDs={selected}
Expand Down Expand Up @@ -237,6 +237,6 @@ export default function EmailList() {
loadMoreEmails={loadMoreEmails}
/>
</div>
</>
</div>
)
}
118 changes: 60 additions & 58 deletions web/src/pages/EmailRawView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,66 +33,68 @@ export default function EmailRawView() {
}

return (
<div className="w-full px-2 py-2 md:px-8 md:py-5">
<h1 className="text-lg font-light tracking-wider dark:text-white md:px-1 md:pb-4">
Original Email
</h1>
<div className="flex rounded-md dark:text-neutral-300">
<span className="flex-initial rounded-l bg-blue-200 px-2 py-1 dark:bg-neutral-700/70">
MessageID
</span>
<span className="flex-1 rounded-r bg-blue-50 px-2 py-1 dark:bg-neutral-800 md:px-4">
{data.messageID}
</span>
</div>
<div className="relative mt-5 rounded-md border p-5 text-sm dark:border-neutral-700 dark:text-neutral-400">
<React.Suspense fallback={<div>Loading...</div>}>
<Await resolve={data.raw}>
{(raw: string) => (
<>
<pre className="block w-full whitespace-pre-wrap break-words">
{raw}
</pre>
<div className="preflight">
<div className="w-full px-2 py-2 md:px-8 md:py-5">
<h1 className="text-lg font-light tracking-wider dark:text-white md:px-1 md:pb-4">
Original Email
</h1>
<div className="flex rounded-md dark:text-neutral-300">
<span className="flex-initial rounded-l bg-blue-200 px-2 py-1 dark:bg-neutral-700/70">
MessageID
</span>
<span className="flex-1 rounded-r bg-blue-50 px-2 py-1 dark:bg-neutral-800 md:px-4">
{data.messageID}
</span>
</div>
<div className="relative mt-5 rounded-md border p-5 text-sm dark:border-neutral-700 dark:text-neutral-400">
<React.Suspense fallback={<div>Loading...</div>}>
<Await resolve={data.raw}>
{(raw: string) => (
<>
<pre className="block w-full whitespace-pre-wrap break-words">
{raw}
</pre>

<div className="absolute right-0 top-2 space-x-3 p-3 dark:text-neutral-400">
<span
role="button"
className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
onClick={reparse}
>
<span>Re-Parse</span>
</span>
<span
role="button"
className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
onClick={() => {
void navigator.clipboard.writeText(raw)
}}
>
<span>Copy</span>
</span>
<span
role="button"
className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
onClick={() => {
const blob = new Blob([raw], { type: 'message/rfc822' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `${data.messageID}.eml`
a.click()
}}
>
<span>Download</span>
</span>
</div>
</>
)}
</Await>
</React.Suspense>
</div>
<div className="absolute right-0 top-2 space-x-3 p-3 dark:text-neutral-400">
<span
role="button"
className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
onClick={reparse}
>
<span>Re-Parse</span>
</span>
<span
role="button"
className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
onClick={() => {
void navigator.clipboard.writeText(raw)
}}
>
<span>Copy</span>
</span>
<span
role="button"
className="cursor-pointer rounded-md bg-blue-100 p-2 dark:bg-neutral-700"
onClick={() => {
const blob = new Blob([raw], { type: 'message/rfc822' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `${data.messageID}.eml`
a.click()
}}
>
<span>Download</span>
</span>
</div>
</>
)}
</Await>
</React.Suspense>
</div>

<Toaster />
<Toaster />
</div>
</div>
)
}
32 changes: 19 additions & 13 deletions web/src/pages/EmailRoot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,23 +172,29 @@ export default function EmailRoot(props: EmailRootProps) {
: 'h-full')
}
>
<h1 className="text-lg font-light tracking-wider dark:text-white md:px-2 md:pb-4">
{props.type === 'inbox'
? 'Inbox'
: props.type === 'draft'
? 'Drafts'
: 'Sent'}
</h1>
<div className="preflight">
<h1 className="text-lg font-light tracking-wider dark:text-white md:px-2 md:pb-4">
{props.type === 'inbox'
? 'Inbox'
: props.type === 'draft'
? 'Drafts'
: 'Sent'}
</h1>
</div>
<Outlet context={outletContext} />
</div>

<FullScreenContent
handleDelete={(messageID) => {
removeEmailFromList(messageID)
}}
/>
<div className="preflight">
<FullScreenContent
handleDelete={(messageID) => {
removeEmailFromList(messageID)
}}
/>
</div>

<DraftEmailsTabs />
<div className="preflight">
<DraftEmailsTabs />
</div>
</div>
)
}
Expand Down
8 changes: 4 additions & 4 deletions web/src/pages/EmailView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ export default function EmailView() {

return (
<>
<div className="mb-4">
<div className="mb-4 preflight">
<EmailMenuBar
emailIDs={'messageID' in data ? [data.messageID] : []}
showOperations={true}
Expand Down Expand Up @@ -274,7 +274,7 @@ export default function EmailView() {
/>
)}
{thread.draftID && !activeReplyEmail && (
<div className="mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
<div className="preflight mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
<div className="flex items-start justify-between">
<span className="text-red-300">[Draft]</span>
<span className="text-neutral-500 dark:text-neutral-300">
Expand Down Expand Up @@ -328,7 +328,7 @@ function EmailBlock(props: EmailBlockProps) {
<>
<div className="mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
{!showImages && (
<div className="flex gap-2 border rounded-t-md -mx-3 -mt-3 px-3 py-1 mb-3 bg-gray-200 dark:bg-gray-700">
<div className="preflight flex gap-2 border rounded-t-md -mx-3 -mt-3 px-3 py-1 mb-3 bg-gray-200 dark:bg-gray-700">
<span>Images are not displayed</span>
<span
className="text-blue-600 dark:text-blue-200 cursor-pointer"
Expand All @@ -342,7 +342,7 @@ function EmailBlock(props: EmailBlockProps) {
)}

{/* header info for emails */}
<div className="flex items-start justify-between">
<div className="preflight flex items-start justify-between">
<div className="dark:text-neutral-300">
<div>
<span>{getNameFromEmails(email.from)}</span>
Expand Down
8 changes: 6 additions & 2 deletions web/src/pages/Root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,15 @@ export default function Root() {
dispatch: draftEmailsDispatch
}}
>
<Sidebar />
<div className="preflight">
<Sidebar />
</div>
<Outlet />
</DraftEmailsContext.Provider>

<Toaster />
<div className="preflight">
<Toaster />
</div>
</ConfigContext.Provider>
)
}
Loading

0 comments on commit 6cc1755

Please sign in to comment.