style: 移动端

2.0/email-builder
Lei OT 12 months ago
parent 8d80e794bd
commit 217a8fb884

@ -79,7 +79,7 @@ function LexicalDefaultValuePlugin({ value = "" }= {}) {
if (clear) {
root.clear();
}
console.log(nodes);
// console.log(nodes);
const p = $createParagraphNode();
const _p = nodes.filter(n => n).forEach((n) => {

@ -4,11 +4,13 @@ import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
import { stringToColour } from '@/utils/commons';
import EmailEditorPopup from '../Input/EmailEditorPopup';
import DnDModal from '@/components/DndModal';
import useStyleStore from '@/stores/StyleStore';
const TagColorStyle = (tag) => {
const color = stringToColour(tag);
return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` };
};
const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
let { emailOrigin } = emailDetail;
emailOrigin = emailOrigin || {};
@ -39,9 +41,38 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
setOpen(false);
};
const [mobile] = useStyleStore((state) => [state.mobile]);
return (
<>
<DnDModal open={open} setOpen={setOpen} title={emailOrigin.subject} initial={{ top: 74 }} onMove={onHandleMove} onResize={onHandleResize}>
<DnDModal
open={open}
setOpen={setOpen}
title={emailOrigin.subject}
initial={{ top: 74 }}
onMove={onHandleMove}
onResize={onHandleResize}
footer={
mobile ? (
<>
<div className='flex items-center w-full '>
<Button
onClick={() => onOpenEditor(emailOrigin, 'reply')}
size='small'
type='text'
icon={<ReplyIcon className='text-indigo-500' />}>
回复
</Button>
<Button
onClick={() => onOpenEditor(emailOrigin, 'forward')}
size='small'
type='text'
icon={<ShareForwardIcon className='text-primary' />}>
转发
</Button>
</div>
</>
) : null
}>
{/* email toolbar */}
<div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
{/* <div className='flex items-center justify-start '>
@ -52,22 +83,40 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
<div className=' font-bold'>{emailOrigin.subject}</div>
<div>
<div className={['flex justify-between', window.innerWidth < 600 ? 'flex-row' : 'flex-row'].join(' ')}>
<div
className={[
'flex justify-between',
window.innerWidth < 600 ? 'flex-row' : 'flex-row',
].join(' ')}>
<div className='flex gap-2 mb-2 items-center'>
<Avatar className='' style={TagColorStyle(emailOrigin.fromEmail)}>
<Avatar
className=''
style={TagColorStyle(emailOrigin.fromEmail)}>
{(emailOrigin.fromName || '').substring(0, 1)}
</Avatar>
<div className=' flex flex-col'>
<span className=' font-bold text-base'>{emailOrigin.fromName}</span>
<span className='text-neutral-500'>{emailOrigin.fromEmail}</span>
<span className=' font-bold text-base'>
{emailOrigin.fromName}
</span>
<span className='text-neutral-500'>
{emailOrigin.fromEmail}
</span>
</div>
</div>
<div className='flex flex-col justify-start gap-1 items-end'>
<div className='flex items-center '>
<Button onClick={() => onOpenEditor(emailOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
<Button
onClick={() => onOpenEditor(emailOrigin, 'reply')}
size='small'
type='text'
icon={<ReplyIcon className='text-indigo-500' />}>
回复
</Button>
<Button onClick={() => onOpenEditor(emailOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
<Button
onClick={() => onOpenEditor(emailOrigin, 'forward')}
size='small'
type='text'
icon={<ShareForwardIcon className='text-primary' />}>
转发
</Button>
</div>
@ -78,7 +127,9 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
<div className='text-sm'>
<span className='text-neutral-500 pr-2'>收件人:</span>
{emailOrigin.toName}
<span className='text-neutral-600'>&nbsp;&nbsp;&lt;{emailOrigin.toEmail}&gt;</span>
<span className='text-neutral-600'>
&nbsp;&nbsp;&lt;{emailOrigin.toEmail}&gt;
</span>
</div>
{emailOrigin.cc && (
<div className='text-sm'>
@ -98,7 +149,9 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
</div> */}
<Divider className='my-2' />
{/* <div className='mt-2'>{emailOrigin.body}</div> */}
<div className='mt-2' dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div>
<div
className='mt-2'
dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div>
{/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
</div>
</div>
@ -113,6 +166,6 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`}
/>
</>
);
)
};
export default EmailDetail;

@ -13,7 +13,7 @@ function Chat() {
return (
<>
<Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 20px)', height: 'calc(100vh - 20px)', minWidth: '360px' }}>
<Header className=' px-2 ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'>
<Header className=' px-2 ant-layout-sider-light bg-white ant-card h-auto flex justify-between gap-1 items-center'>
<Button type='text' icon={<MenuFoldOutlined />} onClick={() => navigate('/m/conversation')} className=' rounded-none rounded-l' />
<MessagesHeader />
<Button type='text' icon={<MenuUnfoldOutlined />} onClick={() => navigate('/m/order')} className=' rounded-none rounded-r' />

Loading…
Cancel
Save