mail page fix design dang
This commit is contained in:
parent
da1e18a5ee
commit
6e1fa0ddec
@ -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);
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user