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

courrier multi account restore compose

Browse Source
This commit is contained in:
alma 2025-04-27 21:35:47 +02:00
parent be9ba6e31e
commit 038fe37dba
1 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
components/email/ComposeEmail.tsx
View File

@ -360,11 +360,11 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
}, []); }, []);
return ( return (
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center"> <div className="fixed inset-0 bg-white/70 z-[100] flex items-center justify-center">
<div className="w-full max-w-2xl bg-white rounded-lg shadow-xl flex flex-col"> <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
{/* Modal Header */} {/* Modal Header */}
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-200"> <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
<h3 className="text-lg font-medium text-gray-900"> <h3 className="text-lg font-semibold text-gray-900">
{type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'} {type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
</h3> </h3>
<Button <Button
@ -379,21 +379,21 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
{/* Modal Body */} {/* Modal Body */}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden">
<div className="flex flex-col p-4 space-y-3 overflow-y-auto"> <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
{/* 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"
value={to} value={to}
onChange={(e) => setTo(e.target.value)} onChange={(e) => setTo(e.target.value)}
placeholder="recipient@example.com" placeholder="recipient@example.com"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</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"
@ -412,59 +412,61 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
{/* 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"
value={cc} value={cc}
onChange={(e) => setCc(e.target.value)} onChange={(e) => setCc(e.target.value)}
placeholder="cc@example.com" placeholder="cc@example.com"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</div> </div>
)} )}
{/* 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"
value={bcc} value={bcc}
onChange={(e) => setBcc(e.target.value)} onChange={(e) => setBcc(e.target.value)}
placeholder="bcc@example.com" placeholder="bcc@example.com"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</div> </div>
)} )}
{/* 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"
value={subject} value={subject}
onChange={(e) => setSubject(e.target.value)} onChange={(e) => setSubject(e.target.value)}
placeholder="Enter subject" placeholder="Enter subject"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</div> </div>
{/* Message Body */} {/* Message Body */}
<div className="min-h-[300px] flex flex-col"> <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
<Label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</Label> <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
<RichEmailEditor <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
initialContent={emailContent} <RichEmailEditor
onChange={setEmailContent} initialContent={emailContent}
minHeight="300px" onChange={setEmailContent}
maxHeight="400px" minHeight="200px"
preserveFormatting={true} maxHeight="none"
/> preserveFormatting={true}
/>
</div>
</div> </div>
{/* Attachments */} {/* Attachments */}
{attachments.length > 0 && ( {attachments.length > 0 && (
<div className="border rounded-md p-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"> <div className="space-y-2">
{attachments.map((file, index) => ( {attachments.map((file, index) => (
@ -487,7 +489,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
</div> </div>
{/* Modal Footer */} {/* Modal Footer */}
<div className="flex items-center justify-between px-4 py-2 border-t border-gray-200"> <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">
{/* File Input for Attachments */} {/* File Input for Attachments */}
<input <input
@ -718,11 +720,11 @@ function LegacyAdapter({
if (!showCompose) return null; if (!showCompose) return null;
return ( return (
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center"> <div className="fixed inset-0 bg-white/70 z-[100] flex items-center justify-center">
<div className="w-full max-w-2xl bg-white rounded-lg shadow-xl flex flex-col"> <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
{/* Modal Header */} {/* Modal Header */}
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-200"> <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
<h3 className="text-lg font-medium text-gray-900"> <h3 className="text-lg font-semibold text-gray-900">
{determineType() === 'reply' ? 'Reply' : determineType() === 'forward' ? 'Forward' : determineType() === 'reply-all' ? 'Reply All' : 'New Message'} {determineType() === 'reply' ? 'Reply' : determineType() === 'forward' ? 'Forward' : determineType() === 'reply-all' ? 'Reply All' : 'New Message'}
</h3> </h3>
<Button <Button
@ -740,21 +742,21 @@ function LegacyAdapter({
{/* Modal Body */} {/* Modal Body */}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden">
<div className="flex flex-col p-4 space-y-3 overflow-y-auto"> <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
{/* 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"
value={composeTo} value={composeTo}
onChange={(e) => setComposeTo(e.target.value)} onChange={(e) => setComposeTo(e.target.value)}
placeholder="recipient@example.com" placeholder="recipient@example.com"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</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"
@ -773,59 +775,61 @@ function LegacyAdapter({
{/* 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"
value={composeCc} value={composeCc}
onChange={(e) => setComposeCc(e.target.value)} onChange={(e) => setComposeCc(e.target.value)}
placeholder="cc@example.com" placeholder="cc@example.com"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</div> </div>
)} )}
{/* 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"
value={composeBcc} value={composeBcc}
onChange={(e) => setComposeBcc(e.target.value)} onChange={(e) => setComposeBcc(e.target.value)}
placeholder="bcc@example.com" placeholder="bcc@example.com"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</div> </div>
)} )}
{/* 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"
value={composeSubject} value={composeSubject}
onChange={(e) => setComposeSubject(e.target.value)} onChange={(e) => setComposeSubject(e.target.value)}
placeholder="Enter subject" placeholder="Enter subject"
className="w-full mt-1 border-gray-300 text-gray-900" className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/> />
</div> </div>
{/* Message Body */} {/* Message Body */}
<div className="min-h-[300px] flex flex-col"> <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
<Label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</Label> <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
<RichEmailEditor <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
initialContent={composeBody} <RichEmailEditor
onChange={setComposeBody} initialContent={composeBody}
minHeight="300px" onChange={setComposeBody}
maxHeight="400px" minHeight="200px"
preserveFormatting={true} maxHeight="none"
/> preserveFormatting={true}
/>
</div>
</div> </div>
{/* Attachments */} {/* Attachments */}
{attachments.length > 0 && ( {attachments.length > 0 && (
<div className="border rounded-md p-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"> <div className="space-y-2">
{attachments.map((file, index) => ( {attachments.map((file, index) => (
@ -848,7 +852,7 @@ function LegacyAdapter({
</div> </div>
{/* Modal Footer */} {/* Modal Footer */}
<div className="flex items-center justify-between px-4 py-2 border-t border-gray-200"> <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">
{/* File Input for Attachments */} {/* File Input for Attachments */}
<input <input