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

responsive part 2

Browse Source
This commit is contained in:
hamid zarghami
2025-06-25 12:01:33 +03:30
parent 717746e13e
commit d0ddc1b87a
13 changed files with 110 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RadioGroup.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ type Props = {
const RadioGroup: FC<Props> = (props: Props) => {
return (
<div className='flex gap-5 items-center text-xs'>
<div className='flex justify-between xl:justify-start gap-5 items-center text-xs'>
{
props.items.map((item, index) => (
<div key={index} className='flex gap-2 items-center'>
src/components/Table.tsx
+1 -1
View File
@@ -160,7 +160,7 @@ const Table = <T extends RowDataType>({
<div className={`relative mt-6 md:mt-9 w-full ${className}`}>
{(actionsPosition === 'top' || actionsPosition === 'above-header') && renderActions()}
<div className="overflow-x-auto overflow-hidden rounded-2xl md:rounded-3xl bg-white shadow-sm">
<div className={`overflow-x-auto overflow-hidden ${showHeader && actionsPosition !== 'header-replace' ? 'rounded-2xl md:rounded-3xl' : 'rounded-b-2xl md:rounded-b-3xl'} bg-white shadow-sm`}>
<table className="w-full text-sm border-collapse min-w-[600px]">
{renderHeader()}
{actionsPosition === 'header-replace' && (
src/index.css
+14
View File
@@ -213,3 +213,17 @@ textarea::placeholder {
.dltr {
direction: ltr;
}
/* Start Generation Here */
/* Hide scrollbar for all elements */
* {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
display: none;
}
/* End Generation Here */
src/langs/fa.json
+1 -1
View File
@@ -133,7 +133,7 @@
"mail": {
"download": "دانلود",
"print": "چاپ",
"subject": "موضوع : ",
"subject": "موضوع: ",
"attachments": "فایل های ضمیمه",
"answer": "پاسخ",
"forward": "ارسال به دیگران",
src/pages/received/Components/Header.tsx
+11 -11
View File
@@ -9,14 +9,14 @@ const Header: FC = () => {
return (
<div className='flex justify-between items-center border-b border-border pb-6'>
<div className='flex gap-6'>
<div className='flex xl:gap-6 gap-4'>
<ArrowRight size={24} color='#8C90A3' />
<SmsNotification size={24} color='black' />
<ArchiveTick size={24} color='black' />
<InfoCircle size={24} color='black' />
<Star size={24} color='black' />
<VolumeMute size={24} color='black' />
<Trash size={24} color='#CD0000' />
<SmsNotification size={24} color='black' className='xl:block hidden' />
<ArchiveTick size={24} color='black' className='xl:block hidden' />
<InfoCircle size={24} color='black' className='xl:block hidden' />
<Star size={24} color='black' className='xl:block hidden' />
<VolumeMute size={24} color='black' className='xl:block hidden' />
<Trash size={24} color='#CD0000' className='xl:block hidden' />
<More size={24} color='black' className='rotate-90' />
</div>
@@ -24,17 +24,17 @@ const Header: FC = () => {
<Button
variant='secondary'
>
<div className='flex gap-2 items-center px-5'>
<div className='flex gap-2 items-center xl:px-5'>
<DocumentDownload size={20} color='black' />
<span className='pt-0.5'>{t('mail.download')}</span>
<span className='pt-0.5 xl:block hidden'>{t('mail.download')}</span>
</div>
</Button>
<Button
variant='secondary'
>
<div className='flex gap-2 items-center px-5'>
<div className='flex gap-2 items-center xl:px-5'>
<Printer size={20} color='black' />
<span className='pt-0.5'>{t('mail.print')}</span>
<span className='pt-0.5 xl:block hidden'>{t('mail.print')}</span>
</div>
</Button>
</div>
src/pages/received/Detail.tsx
+16 -14
View File
@@ -19,23 +19,25 @@ const DetailEmail: FC = () => {
<div className='bg-white rounded-4xl p-8'>
<Header />
<div className='mt-6 flex justify-between items-center'>
<div className='flex gap-4 items-center'>
<div className='mt-6 flex xl:flex-row flex-col justify-between xl:items-center'>
<div className='flex xl:flex-row flex-col-reverse gap-4 xl:items-center'>
<div className='flex gap-1 items-center'>
<div className='font-extralight '>{t('mail.subject')}</div>
<div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</div>
<div className='font-extralight hidden xl:block'>{t('mail.subject')}</div>
<div className='leading-7'>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</div>
</div>
<div className='flex gap-2'>
<Button
label='دریافتی ها'
className='bg-[#ECEFF6] text-description w-fit px-6 rounded-full h-6 xl:h-10 text-[10px] xl:text-sm'
/>
<Button
label='الویت زیاد'
className='bg-[#FFE9E9] text-[#CD0000] w-fit px-6 rounded-full h-6 xl:h-10 text-[10px] xl:text-sm'
/>
</div>
<Button
label='دریافتی ها'
className='bg-[#ECEFF6] text-description w-fit px-6 rounded-full'
/>
<Button
label='الویت زیاد'
className='bg-[#FFE9E9] text-[#CD0000] w-fit px-6 rounded-full'
/>
</div>
<div className='flex text-description text-sm'>
<div className='flex justify-end text-description xl:text-sm text-[10px]'>
۵ اسفندماه ۱۴۰۳، ساعت ۱۲:۰۰
</div>
</div>
@@ -45,7 +47,7 @@ const DetailEmail: FC = () => {
<div>مهرداد مظفری</div>
</div>
<p className='mt-8 text-sm leading-7 font-light'>
<p className='xl:mt-8 mt-3 text-sm leading-7 font-light'>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آیندهلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
</p>
src/pages/setting/Setting.tsx
+2 -2
View File
@@ -26,8 +26,8 @@ const Setting: FC = () => {
return <Signture />;
case SettingTabEnum.SETTING_PERSONALITY:
return (
<div className='flex flex-col xl:flex-row-reverse gap-4 md:gap-6 mt-6 md:mt-8'>
<div className="xl:w-auto w-full">
<div className='flex xl:flex-row-reverse gap-2 md:gap-6 mt-6 md:mt-8'>
<div className="xl:w-auto">
<PersonalitySidebar />
</div>
<div className="flex-1">
src/pages/setting/address/Address.tsx
+5 -5
View File
@@ -81,9 +81,9 @@ const Address: FC = () => {
]
return (
<div className='flex gap-8 mt-8'>
<div className='flex xl:flex-row flex-col-reverse gap-8 mt-8'>
<div className='flex-1'>
<div className='flex justify-between'>
<div className='flex gap-2 justify-between'>
<div>
<Select
placeholder={t('setting.status')}
@@ -92,11 +92,11 @@ const Address: FC = () => {
/>
</div>
<div>
<div className='flex-1'>
<Input
variant='search'
placeholder={t('setting.search')}
className='w-[300px]'
className='xl:w-[300px] flex-1'
/>
</div>
</div>
@@ -112,7 +112,7 @@ const Address: FC = () => {
/>
</div>
<div className='w-[350px] bg-white rounded-4xl p-8'>
<div className='xl:w-[350px] w-full bg-white rounded-4xl p-8'>
<div>
{t('setting.add_address')}
</div>
src/pages/setting/domain/Domain.tsx
+5 -5
View File
@@ -106,12 +106,12 @@ const Domain: FC = () => {
return (
<div>
<div className='flex justify-between mt-9'>
<div className='flex xl:flex-row gap-4 flex-col justify-between mt-9'>
<div>
<div className='text-lg'>
<div className='xl:text-lg'>
{t('setting.record_dns')}
</div>
<p className='mt-2 text-sm font-extralight'>
<p className='mt-2 xl:text-sm text-xs font-extralight'>
{t('setting.record_dns_description')}
</p>
</div>
@@ -119,12 +119,12 @@ const Domain: FC = () => {
<div className='flex gap-2'>
<Input
placeholder={t('setting.your_domain')}
className='w-[300px]'
className='xl:w-[300px]'
/>
<Button
variant='secondary'
className='w-fit px-14 border border-black'
className='w-fit xl:px-14 px-8 border border-black'
label={t('setting.submit')}
/>
</div>
src/pages/setting/enum/SettingEnum.ts
+1
View File
@@ -11,4 +11,5 @@ export enum SideBarTab {
TEXT = "text",
BUTTON = "button",
IMAGE = "image",
NONE = "none",
}
src/pages/setting/mail-server/MailServer.tsx
+7 -7
View File
@@ -7,13 +7,13 @@ const Domain: FC = () => {
const { t } = useTranslation()
return (
<div className='bg-white rounded-4xl p-8 mt-9'>
<div className=''>
<div className='flex justify-between items-end border-b pb-10 broder-border'>
<div>
<div className='flex xl:flex-row gap-4 flex-col justify-between xl:items-end border-b pb-10 broder-border'>
<div className='flex-1'>
<div className='text-lg'>
<div className='xl:text-lg'>
{t('setting.setting_fetch')}
</div>
<div className='text-sm text-description mt-1.5'>
<div className='xl:text-sm text-xs text-description mt-1.5'>
{t('setting.setting_fetch_description')}
</div>
</div>
@@ -40,12 +40,12 @@ const Domain: FC = () => {
</div>
</div>
<div className='mt-9'>
<div className='flex justify-between items-start pb-10'>
<div className='flex xl:flex-row gap-4 flex-col justify-between xl:items-end pb-10'>
<div className='flex-1'>
<div className='text-lg'>
<div className='xl:text-lg'>
{t('setting.setting_smtp')}
</div>
<div className='text-sm text-description mt-1.5'>
<div className='xl:text-sm text-xs text-description mt-1.5'>
{t('setting.setting_smtp_description')}
</div>
</div>
src/pages/setting/personality/SideBar.tsx
+41 -15
View File
@@ -1,4 +1,4 @@
import { FC, useState } from 'react'
import { FC, useState, useRef, useEffect } from 'react'
import { Gallery, LinkSquare, Setting4, Text } from 'iconsax-react'
import Logo from '@/assets/images/logo-small.svg'
import SettingSideBar from './components/SettingSideBar'
@@ -6,28 +6,54 @@ import { SideBarTab } from '../enum/SettingEnum'
import TextSidebar from './components/TextSidebar'
import ButtonSidebar from './components/ButtonSidebar'
import ImageSideBar from './components/ImageSideBar'
import { clx } from '@/helpers/utils'
const PersonalitySidebar: FC = () => {
const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
const sidebarRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
// فقط در موبایل (عرض کمتر از 1280px) کار کند
if (window.innerWidth < 1280 && sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
setActive(SideBarTab.NONE)
}
}
if (active !== SideBarTab.NONE) {
document.addEventListener('mousedown', handleClickOutside)
}
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [active])
return (
<div className='bg-white rounded-3xl w-[360px] flex'>
<div className='flex-1 p-6'>
<div ref={sidebarRef} className={clx(
'bg-white xl:rounded-4xl xl:overflow-hidden xl:w-[360px] flex h-full sticky top-0',
active === SideBarTab.NONE ? 'rounded-4xl' : 'rounded-r-4xl'
)}>
{active !== SideBarTab.NONE && (
<div className='absolute rounded-l-4xl shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.05)] xl:shadow-none xl:static bg-white right-10 h-full z-10 xl:w-[360px] w-[250px] p-6 overflow-y-auto'>
{
active === SideBarTab.SETTING ? <SettingSideBar />
: active === SideBarTab.TEXT ? <TextSidebar />
: active === SideBarTab.BUTTON ? <ButtonSidebar />
: active === SideBarTab.IMAGE ? <ImageSideBar />
: null
}
</div>
)}
<div className='xl:w-20 xl:border-r py-5 border-gray-200 w-10 flex flex-col items-center pt-6 pb-6 h-full'>
{
active === SideBarTab.SETTING ? <SettingSideBar />
: active === SideBarTab.TEXT ? <TextSidebar />
: active === SideBarTab.BUTTON ? <ButtonSidebar />
: active === SideBarTab.IMAGE ? <ImageSideBar />
: null
active !== SideBarTab.NONE && <img src={Logo} className='w-8' alt="Logo" />
}
</div>
<div className='w-20 border-r border-gray-200 flex flex-col items-center pt-6 pb-6'>
<img src={Logo} className='w-8' alt="Logo" />
<div className='flex flex-col gap-10 mt-16'>
<div className={clx(
'flex flex-col gap-10 mt-16',
active === SideBarTab.NONE && 'mt-4'
)}>
<Setting4 size={22} color='black' variant={SideBarTab.SETTING === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.SETTING)} className='cursor-pointer' />
<Text size={22} color='black' variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.TEXT)} className='cursor-pointer' />
<LinkSquare size={22} color='black' variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.BUTTON)} className='cursor-pointer' />
src/pages/setting/signture/Signture.tsx
+5 -5
View File
@@ -9,21 +9,21 @@ const Signture: FC = () => {
return (
<div className='bg-white rounded-4xl p-8 mt-9'>
<div className='mt-9'>
<div className='flex justify-between items-start pb-10'>
<div className='flex xl:flex-row gap-4 flex-col justify-between xl:items-end pb-10'>
<div className='flex-1'>
<div className='text-lg'>
<div className='xl:text-lg'>
{t('setting.signature')}
</div>
<div className='text-sm text-description mt-1.5'>
<div className='xl:text-sm text-xs text-description mt-1.5'>
{t('setting.signature_description')}
</div>
</div>
<div className='flex-1'>
<div className='flex-1 mt-5 xl:mt-0'>
<UploadBox
label={t('setting.upload_sign')}
/>
<div className='mt-8'>
<div className='xl:mt-8'>
<Textarea
label={t('setting.description_sign')}
/>