mail page fix design dang

This commit is contained in:
alma 2025-04-21 22:24:55 +02:00
parent da1e18a5ee
commit 6e1fa0ddec
2 changed files with 17 additions and 24 deletions

View File

@ -1671,6 +1671,8 @@ export default function CourrierPage() {
attachments={attachments} attachments={attachments}
setAttachments={setAttachments} setAttachments={setAttachments}
handleSend={handleSend} handleSend={handleSend}
replyTo={selectedEmail || undefined}
forwardFrom={selectedEmail || undefined}
onSend={(email) => { onSend={(email) => {
// Handle the sent email // Handle the sent email
console.log('Email sent:', email); console.log('Email sent:', email);

View File

@ -41,8 +41,8 @@ interface ComposeEmailProps {
initialBody?: string; initialBody?: string;
initialCc?: string; initialCc?: string;
initialBcc?: string; initialBcc?: string;
replyTo?: Email; replyTo?: Email | null;
forwardFrom?: Email; forwardFrom?: Email | null;
} }
export default function ComposeEmail({ export default function ComposeEmail({
@ -83,13 +83,14 @@ export default function ComposeEmail({
useEffect(() => { useEffect(() => {
if (composeBodyRef.current) { if (composeBodyRef.current) {
// Initialize the content structure // Initialize the content structure
const originalContent = originalEmail?.content || ''; const originalContent = replyTo || forwardFrom ? `
composeBodyRef.current.innerHTML = `
<div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div> <div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div>
<div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;"> <div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
${originalContent} ${composeBody}
</div> </div>
`; ` : composeBody;
composeBodyRef.current.innerHTML = originalContent;
// Place cursor at the beginning of new reply area // Place cursor at the beginning of new reply area
const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area'); const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area');
@ -102,8 +103,8 @@ export default function ComposeEmail({
sel?.addRange(range); sel?.addRange(range);
} }
} }
}, [originalEmail]); // Run when originalEmail changes }, [composeBody, replyTo, forwardFrom]);
// Modified input handler to prevent nested structures // Modified input handler to prevent nested structures
const handleInput = (e: React.FormEvent<HTMLDivElement>) => { const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (!composeBodyRef.current) return; if (!composeBodyRef.current) return;
@ -188,23 +189,13 @@ export default function ComposeEmail({
{/* Modal Header */} {/* Modal Header */}
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-200"> <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900"> <h3 className="text-lg font-semibold text-gray-900">
{composeSubject.startsWith('Re:') ? 'Reply' : {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
</h3> </h3>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="hover:bg-gray-100 rounded-full" className="hover:bg-gray-100 rounded-full"
onClick={() => { onClick={onCancel}
setShowCompose(false);
setComposeTo('');
setComposeCc('');
setComposeBcc('');
setComposeSubject('');
setComposeBody('');
setShowCc(false);
setShowBcc(false);
}}
> >
<X className="h-5 w-5 text-gray-500" /> <X className="h-5 w-5 text-gray-500" />
</Button> </Button>
@ -284,16 +275,16 @@ export default function ComposeEmail({
</div> </div>
{/* Original Email Content Preview */} {/* Original Email Content Preview */}
{originalEmail && ( {(replyTo || forwardFrom) && (
<div className="border rounded-md p-4 bg-gray-50"> <div className="border rounded-md p-4 bg-gray-50">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h4 className="text-sm font-medium text-gray-700"> <h4 className="text-sm font-medium text-gray-700">
{originalEmail.type === 'forward' ? 'Forwarded Message' : 'Original Message'} {forwardFrom ? 'Forwarded Message' : 'Original Message'}
</h4> </h4>
</div> </div>
<div <div
className="prose max-w-none text-sm text-gray-600" className="prose max-w-none text-sm text-gray-600"
dangerouslySetInnerHTML={{ __html: originalEmail.content }} dangerouslySetInnerHTML={{ __html: composeBody }}
/> />
</div> </div>
)} )}
@ -346,7 +337,7 @@ export default function ComposeEmail({
<Button <Button
variant="ghost" variant="ghost"
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100" className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
onClick={() => setShowCompose(false)} onClick={onCancel}
> >
Cancel Cancel
</Button> </Button>