danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reponsive and selective actions and row actioin + pagination

Browse Source
This commit is contained in:
hamid zarghami
2025-06-17 20:52:40 +03:30
parent 71fd53c810
commit 4c869c42c6
24 changed files with 869 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/newMessage/NewMessage.tsx
+31 -30
View File
@@ -17,59 +17,60 @@ const NewMessage: FC = () => {
{openNewMessage && (
<>
<div
className='fixed inset-0 bg-opacity-50 z-[9998]'
className='fixed inset-0 bg-black/50 z-[9998]'
onClick={() => setOpenNewMessage(false)}
// style={{ left: '250px' }}
/>
<div className={`fixed left-8 bottom-4 bg-white rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-8 w-[800px] `}>
<div className='fixed left-2 right-2 bottom-2 md:left-4 md:right-4 md:bottom-4 md:top-4 xl:left-8 xl:right-auto xl:bottom-4 xl:top-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto'>
{/* Header */}
<div className='flex justify-between items-center'>
<div className=''>
<div className='flex justify-between items-center mb-6 md:mb-8'>
<div className='text-lg md:text-xl xl:text-2xl font-semibold'>
{t('new_message.title')}
</div>
<div onClick={() => setOpenNewMessage(false)}>
<CloseCircle size={24} color='#292D32' />
<div onClick={() => setOpenNewMessage(false)} className='cursor-pointer p-1'>
<CloseCircle size={20} className='md:w-6 md:h-6' color='#292D32' />
</div>
</div>
{/* Content */}
<div className='mt-10'>
<div className='space-y-6 md:space-y-8'>
<Input
label={t('new_message.to')}
/>
<div className='mt-8'>
<Input
label={t('new_message.subject')}
<Input
label={t('new_message.subject')}
/>
<div>
<ReactQuill
modules={{
toolbar: [
[{ header: '1' }, { header: '2' }, { font: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['bold', 'italic', 'underline'],
['link', 'image'],
[{ align: [] }],
['clean']
]
}}
theme="snow"
value={value}
onChange={setValue}
style={{ minHeight: '120px' }}
className='text-sm'
/>
</div>
<div className='mt-8'>
<ReactQuill modules={{
toolbar: [
[{ header: '1' }, { header: '2' }, { font: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['bold', 'italic', 'underline'],
['link', 'image'],
[{ align: [] }],
['clean']
]
}} theme="snow" value={value} onChange={setValue} />
</div>
<div className='mt-8 flex justify-end gap-4'>
<div className='flex flex-col sm:flex-row justify-end gap-3 md:gap-4 pt-4'>
<Button
className='!w-fit px-10 bg-white text-black border border-primary'
className='!w-full sm:!w-fit px-6 md:px-10 bg-white text-black border border-primary order-2 sm:order-1'
label={t('new_message.draft')}
/>
<Button
className='w-fit px-10'
className='w-full sm:w-fit px-6 md:px-10 order-1 sm:order-2'
label={t('new_message.send')}
/>
</div>
</div>
</div>
</>