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:07:38 +02:00
parent a30fd6d6c0
commit ad03dba3bf
2 changed files with 76 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/email/ComposeEmail.tsx
View File

@ -209,13 +209,10 @@ export default function ComposeEmail(props: ComposeEmailProps) {
type={type} type={type}
onClose={onClose} onClose={onClose}
/> />
{/* Improve scrolling by wrapping form in a ScrollArea */} <div className="flex-1 overflow-y-auto p-4">
<div className="flex-1 overflow-hidden"> <div className="h-full flex flex-col p-4 space-y-2 overflow-y-auto">
<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> <div className="flex-none">
<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"
@ -227,7 +224,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
</div> </div>
{/* CC/BCC Toggle Buttons */} {/* CC/BCC Toggle Buttons */}
<div className="flex items-center gap-4"> <div className="flex-none 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"
@ -246,7 +243,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* CC Field */} {/* CC Field */}
{showCc && ( {showCc && (
<div> <div className="flex-none">
<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"
@ -260,7 +257,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* BCC Field */} {/* BCC Field */}
{showBcc && ( {showBcc && (
<div> <div className="flex-none">
<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"
@ -273,7 +270,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
)} )}
{/* Subject Field */} {/* Subject Field */}
<div> <div className="flex-none">
<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"
@ -283,12 +280,11 @@ 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 - with improved overflow handling */} {/* Message Body */}
<div className="flex-1 min-h-0 flex flex-col"> <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
<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 overflow-hidden border border-gray-300 rounded-md"> <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
<RichEmailEditor <RichEmailEditor
initialContent={emailContent} initialContent={emailContent}
onChange={setEmailContent} onChange={setEmailContent}
@ -301,9 +297,9 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* Attachments */} {/* Attachments */}
{attachments.length > 0 && ( {attachments.length > 0 && (
<div className="flex-none border rounded-md p-3 mt-3"> <div className="border rounded-md p-3 mt-4">
<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 max-h-[120px] overflow-y-auto"> <div className="space-y-2">
{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>
@ -322,7 +318,6 @@ 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">
@ -381,43 +376,6 @@ 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>
); );
} }