alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier preview

Browse Source
This commit is contained in:
alma 2025-04-30 23:05:02 +02:00
parent 81a107147c
commit a30fd6d6c0
1 changed files with 108 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/email/ComposeEmail.tsx
View File

@ -209,10 +209,13 @@ export default function ComposeEmail(props: ComposeEmailProps) {
type={type} type={type}
onClose={onClose} onClose={onClose}
/> />
<div className="flex-1 overflow-y-auto p-4"> {/* Improve scrolling by wrapping form in a ScrollArea */}
<div className="h-full flex flex-col p-4 space-y-2 overflow-y-auto"> <div className="flex-1 overflow-hidden">
<div className="h-full flex flex-col p-4 space-y-4">
{/* Email fields section - fixed size */}
<div className="flex-none space-y-3">
{/* To Field */} {/* To Field */}
<div className="flex-none"> <div>
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label> <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
<Input <Input
id="to" id="to"
@ -224,7 +227,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
</div> </div>
{/* CC/BCC Toggle Buttons */} {/* CC/BCC Toggle Buttons */}
<div className="flex-none flex items-center gap-4"> <div className="flex items-center gap-4">
<button <button
type="button" type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium" className="text-blue-600 hover:text-blue-700 text-sm font-medium"
@ -243,7 +246,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* CC Field */} {/* CC Field */}
{showCc && ( {showCc && (
<div className="flex-none"> <div>
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label> <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
<Input <Input
id="cc" id="cc"
@ -257,7 +260,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* BCC Field */} {/* BCC Field */}
{showBcc && ( {showBcc && (
<div className="flex-none"> <div>
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label> <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
<Input <Input
id="bcc" id="bcc"
@ -270,7 +273,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
)} )}
{/* Subject Field */} {/* Subject Field */}
<div className="flex-none"> <div>
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label> <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
<Input <Input
id="subject" id="subject"
@ -280,11 +283,12 @@ export default function ComposeEmail(props: ComposeEmailProps) {
className="w-full mt-1 bg-white border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</div> </div>
</div>
{/* Message Body */} {/* Message Body - with improved overflow handling */}
<div className="flex-1 min-h-[200px] flex flex-col overflow-hidden"> <div className="flex-1 min-h-0 flex flex-col">
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label> <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
<div className="flex-1 border border-gray-300 rounded-md overflow-hidden"> <div className="flex-1 overflow-hidden border border-gray-300 rounded-md">
<RichEmailEditor <RichEmailEditor
initialContent={emailContent} initialContent={emailContent}
onChange={setEmailContent} onChange={setEmailContent}
@ -297,9 +301,9 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* Attachments */} {/* Attachments */}
{attachments.length > 0 && ( {attachments.length > 0 && (
<div className="border rounded-md p-3 mt-4"> <div className="flex-none border rounded-md p-3 mt-3">
<h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3> <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
<div className="space-y-2"> <div className="space-y-2 max-h-[120px] overflow-y-auto">
{attachments.map((file, index) => ( {attachments.map((file, index) => (
<div key={index} className="flex items-center justify-between text-sm border rounded p-2"> <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
<span className="truncate max-w-[200px] text-gray-800">{file.name}</span> <span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
@ -318,6 +322,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
)} )}
</div> </div>
</div> </div>
{/* Modal Footer - now inside the main modal container and visually attached */} {/* Modal Footer - now inside the main modal container and visually attached */}
<div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white"> <div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -376,6 +381,43 @@ export default function ComposeEmail(props: ComposeEmailProps) {
</Button> </Button>
</div> </div>
</div> </div>
{/* Add styles for better formatting */}
<style jsx global>{`
.ql-editor {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
overflow-y: auto !important;
min-height: 200px;
}
.ql-editor p {
margin-bottom: 0.5em;
}
.ql-editor img {
max-width: 100%;
height: auto;
}
.ql-editor table {
border-collapse: collapse;
width: 100%;
}
.ql-editor table td {
border: 1px solid #ddd;
padding: 8px;
}
.ql-container {
overflow: hidden !important;
flex: 1;
display: flex;
flex-direction: column;
}
`}</style>
</div> </div>
); );
} }