From d0ddc1b87a28e1123adf63f1e9d3588013853e7b Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Wed, 25 Jun 2025 12:01:33 +0330 Subject: [PATCH] responsive part 2 --- src/components/RadioGroup.tsx | 2 +- src/components/Table.tsx | 2 +- src/index.css | 14 +++++ src/langs/fa.json | 2 +- src/pages/received/Components/Header.tsx | 22 ++++---- src/pages/received/Detail.tsx | 30 ++++++----- src/pages/setting/Setting.tsx | 4 +- src/pages/setting/address/Address.tsx | 10 ++-- src/pages/setting/domain/Domain.tsx | 10 ++-- src/pages/setting/enum/SettingEnum.ts | 1 + src/pages/setting/mail-server/MailServer.tsx | 14 ++--- src/pages/setting/personality/SideBar.tsx | 56 ++++++++++++++------ src/pages/setting/signture/Signture.tsx | 10 ++-- 13 files changed, 110 insertions(+), 67 deletions(-) diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx index 0421109..7eba07c 100644 --- a/src/components/RadioGroup.tsx +++ b/src/components/RadioGroup.tsx @@ -13,7 +13,7 @@ type Props = { const RadioGroup: FC = (props: Props) => { return ( -
+
{ props.items.map((item, index) => (
diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 06b6a46..7e7cd3a 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -160,7 +160,7 @@ const Table = ({
{(actionsPosition === 'top' || actionsPosition === 'above-header') && renderActions()} -
+
{renderHeader()} {actionsPosition === 'header-replace' && ( diff --git a/src/index.css b/src/index.css index 5ba37d3..231c40c 100644 --- a/src/index.css +++ b/src/index.css @@ -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 */ diff --git a/src/langs/fa.json b/src/langs/fa.json index b8766de..65521a9 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -133,7 +133,7 @@ "mail": { "download": "دانلود", "print": "چاپ", - "subject": "موضوع : ", + "subject": "موضوع: ", "attachments": "فایل های ضمیمه", "answer": "پاسخ", "forward": "ارسال به دیگران", diff --git a/src/pages/received/Components/Header.tsx b/src/pages/received/Components/Header.tsx index ccc9c2e..9fc101e 100644 --- a/src/pages/received/Components/Header.tsx +++ b/src/pages/received/Components/Header.tsx @@ -9,14 +9,14 @@ const Header: FC = () => { return (
-
+
- - - - - - + + + + + +
@@ -24,17 +24,17 @@ const Header: FC = () => {
diff --git a/src/pages/received/Detail.tsx b/src/pages/received/Detail.tsx index 6616e7c..792be31 100644 --- a/src/pages/received/Detail.tsx +++ b/src/pages/received/Detail.tsx @@ -19,23 +19,25 @@ const DetailEmail: FC = () => {
-
-
+
+
-
{t('mail.subject')}
-
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+
{t('mail.subject')}
+
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+
+
+
-
-
+
۵ اسفندماه ۱۴۰۳، ساعت ۱۲:۰۰
@@ -45,7 +47,7 @@ const DetailEmail: FC = () => {
مهرداد مظفری
-

+

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آیندهلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده

diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx index e89145d..2198355 100644 --- a/src/pages/setting/Setting.tsx +++ b/src/pages/setting/Setting.tsx @@ -26,8 +26,8 @@ const Setting: FC = () => { return ; case SettingTabEnum.SETTING_PERSONALITY: return ( -
-
+
+
diff --git a/src/pages/setting/address/Address.tsx b/src/pages/setting/address/Address.tsx index b8504d5..5570a95 100644 --- a/src/pages/setting/address/Address.tsx +++ b/src/pages/setting/address/Address.tsx @@ -81,9 +81,9 @@ const Address: FC = () => { ] return ( -
+
-
+
@@ -112,7 +112,7 @@ const Address: FC = () => { />
-
+
{t('setting.add_address')}
diff --git a/src/pages/setting/domain/Domain.tsx b/src/pages/setting/domain/Domain.tsx index 7e475de..7493342 100644 --- a/src/pages/setting/domain/Domain.tsx +++ b/src/pages/setting/domain/Domain.tsx @@ -106,12 +106,12 @@ const Domain: FC = () => { return (
-
+
-
+
{t('setting.record_dns')}
-

+

{t('setting.record_dns_description')}

@@ -119,12 +119,12 @@ const Domain: FC = () => {
diff --git a/src/pages/setting/enum/SettingEnum.ts b/src/pages/setting/enum/SettingEnum.ts index 2c4f334..952e899 100644 --- a/src/pages/setting/enum/SettingEnum.ts +++ b/src/pages/setting/enum/SettingEnum.ts @@ -11,4 +11,5 @@ export enum SideBarTab { TEXT = "text", BUTTON = "button", IMAGE = "image", + NONE = "none", } diff --git a/src/pages/setting/mail-server/MailServer.tsx b/src/pages/setting/mail-server/MailServer.tsx index 648fb1f..413dc24 100644 --- a/src/pages/setting/mail-server/MailServer.tsx +++ b/src/pages/setting/mail-server/MailServer.tsx @@ -7,13 +7,13 @@ const Domain: FC = () => { const { t } = useTranslation() return (
-
-
+
+
-
+
{t('setting.setting_fetch')}
-
+
{t('setting.setting_fetch_description')}
@@ -40,12 +40,12 @@ const Domain: FC = () => {
-
+
-
+
{t('setting.setting_smtp')}
-
+
{t('setting.setting_smtp_description')}
diff --git a/src/pages/setting/personality/SideBar.tsx b/src/pages/setting/personality/SideBar.tsx index 0926be5..7b3730d 100644 --- a/src/pages/setting/personality/SideBar.tsx +++ b/src/pages/setting/personality/SideBar.tsx @@ -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.SETTING) + const sidebarRef = useRef(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 ( -
-
+
+ {active !== SideBarTab.NONE && ( +
+ { + active === SideBarTab.SETTING ? + : active === SideBarTab.TEXT ? + : active === SideBarTab.BUTTON ? + : active === SideBarTab.IMAGE ? + : null + } +
+ )} +
{ - active === SideBarTab.SETTING ? - : active === SideBarTab.TEXT ? - : active === SideBarTab.BUTTON ? - : active === SideBarTab.IMAGE ? - : null + active !== SideBarTab.NONE && Logo } - - - -
-
- Logo -
+
setActive(SideBarTab.SETTING)} className='cursor-pointer' /> setActive(SideBarTab.TEXT)} className='cursor-pointer' /> setActive(SideBarTab.BUTTON)} className='cursor-pointer' /> diff --git a/src/pages/setting/signture/Signture.tsx b/src/pages/setting/signture/Signture.tsx index dbe9cbd..5cc4089 100644 --- a/src/pages/setting/signture/Signture.tsx +++ b/src/pages/setting/signture/Signture.tsx @@ -9,21 +9,21 @@ const Signture: FC = () => { return (
-
+
-
+
{t('setting.signature')}
-
+
{t('setting.signature_description')}
-
+
-
+