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

174
components/email/ComposeEmail.tsx
View File

@ -209,82 +209,86 @@ export default function ComposeEmail(props: ComposeEmailProps) {
type={type}
onClose={onClose}
/>
<div className="flex-1 overflow-y-auto p-4">
<div className="h-full flex flex-col p-4 space-y-2 overflow-y-auto">
{/* To Field */}
<div className="flex-none">
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
<Input
id="to"
value={to}
onChange={(e) => setTo(e.target.value)}
placeholder="recipient@example.com"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
{/* CC/BCC Toggle Buttons */}
<div className="flex-none flex items-center gap-4">
<button
type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
onClick={() => setShowCc(!showCc)}
>
{showCc ? 'Hide Cc' : 'Add Cc'}
</button>
<button
type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
onClick={() => setShowBcc(!showBcc)}
>
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
</button>
</div>
{/* CC Field */}
{showCc && (
<div className="flex-none">
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
{/* Improve scrolling by wrapping form in a ScrollArea */}
<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 */}
<div>
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
<Input
id="cc"
value={cc}
onChange={(e) => setCc(e.target.value)}
placeholder="cc@example.com"
id="to"
value={to}
onChange={(e) => setTo(e.target.value)}
placeholder="recipient@example.com"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
)}
{/* BCC Field */}
{showBcc && (
<div className="flex-none">
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
{/* CC/BCC Toggle Buttons */}
<div className="flex items-center gap-4">
<button
type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
onClick={() => setShowCc(!showCc)}
>
{showCc ? 'Hide Cc' : 'Add Cc'}
</button>
<button
type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
onClick={() => setShowBcc(!showBcc)}
>
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
</button>
</div>
{/* CC Field */}
{showCc && (
<div>
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
<Input
id="cc"
value={cc}
onChange={(e) => setCc(e.target.value)}
placeholder="cc@example.com"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
)}
{/* BCC Field */}
{showBcc && (
<div>
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
<Input
id="bcc"
value={bcc}
onChange={(e) => setBcc(e.target.value)}
placeholder="bcc@example.com"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
)}
{/* Subject Field */}
<div>
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
<Input
id="bcc"
value={bcc}
onChange={(e) => setBcc(e.target.value)}
placeholder="bcc@example.com"
id="subject"
value={subject}
onChange={(e) => setSubject(e.target.value)}
placeholder="Enter subject"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
)}
{/* Subject Field */}
<div className="flex-none">
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
<Input
id="subject"
value={subject}
onChange={(e) => setSubject(e.target.value)}
placeholder="Enter subject"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
{/* Message Body */}
<div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
{/* Message Body - with improved overflow handling */}
<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>
<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
initialContent={emailContent}
onChange={setEmailContent}
@ -297,9 +301,9 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* Attachments */}
{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>
<div className="space-y-2">
<div className="space-y-2 max-h-[120px] overflow-y-auto">
{attachments.map((file, index) => (
<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>
@ -318,6 +322,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
)}
</div>
</div>
{/* 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 items-center gap-2">
@ -376,6 +381,43 @@ export default function ComposeEmail(props: ComposeEmailProps) {
</Button>
</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>
);
}