From ad06b0c8fe70ef75cfe0800a16d9fce865f2e292 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Mon, 8 Jun 2026 16:06:32 +0330 Subject: [PATCH] design setting part pattern --- .env | 4 +- src/assets/images/pattern/1.svg | 469 ++++++++++++++++++ src/assets/images/pattern/2.svg | 150 ++++++ src/assets/images/pattern/3.svg | 19 + src/assets/images/pattern/4.svg | 39 ++ src/assets/images/pattern/5.svg | 181 +++++++ src/assets/images/pattern/6.svg | 354 +++++++++++++ src/pages/settings/Setting.tsx | 100 ++-- .../settings/components/DesignSettings.tsx | 54 ++ src/pages/settings/enum/Enum.ts | 1 + src/pages/settings/hooks/usePatterns.ts | 45 ++ src/vite-env.d.ts | 5 + 12 files changed, 1369 insertions(+), 52 deletions(-) create mode 100644 src/assets/images/pattern/1.svg create mode 100644 src/assets/images/pattern/2.svg create mode 100644 src/assets/images/pattern/3.svg create mode 100644 src/assets/images/pattern/4.svg create mode 100644 src/assets/images/pattern/5.svg create mode 100644 src/assets/images/pattern/6.svg create mode 100644 src/pages/settings/components/DesignSettings.tsx create mode 100644 src/pages/settings/hooks/usePatterns.ts diff --git a/.env b/.env index ce1cf9a..7c4b687 100644 --- a/.env +++ b/.env @@ -1,7 +1,7 @@ VITE_TOKEN_NAME = 'dmnu_a_t' VITE_REFRESH_TOKEN_NAME = 'dmnu-a-rt' -VITE_BASE_URL = 'https://dmenu-api.danakcorp.com' -# VITE_BASE_URL = 'http://192.168.99.242:4000' +VITE_BASE_URL = 'https://dmenuplus-api-production.dev.danakcorp.com' +# VITE_BASE_URL = 'http://192.168.99.131:2000' VITE_SOCKET_URL = 'https://dmenu-api.danakcorp.com' \ No newline at end of file diff --git a/src/assets/images/pattern/1.svg b/src/assets/images/pattern/1.svg new file mode 100644 index 0000000..dbbbfe7 --- /dev/null +++ b/src/assets/images/pattern/1.svg @@ -0,0 +1,469 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/pattern/2.svg b/src/assets/images/pattern/2.svg new file mode 100644 index 0000000..b34efd2 --- /dev/null +++ b/src/assets/images/pattern/2.svg @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/pattern/3.svg b/src/assets/images/pattern/3.svg new file mode 100644 index 0000000..8829725 --- /dev/null +++ b/src/assets/images/pattern/3.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/pattern/4.svg b/src/assets/images/pattern/4.svg new file mode 100644 index 0000000..c8ac17c --- /dev/null +++ b/src/assets/images/pattern/4.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/pattern/5.svg b/src/assets/images/pattern/5.svg new file mode 100644 index 0000000..aa35f9a --- /dev/null +++ b/src/assets/images/pattern/5.svg @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/pattern/6.svg b/src/assets/images/pattern/6.svg new file mode 100644 index 0000000..9ee23ad --- /dev/null +++ b/src/assets/images/pattern/6.svg @@ -0,0 +1,354 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/settings/Setting.tsx b/src/pages/settings/Setting.tsx index 174836e..27f2091 100644 --- a/src/pages/settings/Setting.tsx +++ b/src/pages/settings/Setting.tsx @@ -1,56 +1,56 @@ -import Tabs from '@/components/Tabs' -import { Money2, NotificationStatus, Setting4 } from 'iconsax-react' -import { useState, type FC } from 'react' -import { SettingTabEnum } from './enum/Enum' -import GeneralSettings from './GeneralSettings' -import ScoreSetting from './components/ScoreSetting' -import NotificationsList from '../notifications/List' +import Tabs from "@/components/Tabs"; +import { Brush2, Money2, NotificationStatus, Setting4 } from "iconsax-react"; +import { useState, type FC } from "react"; +import NotificationsList from "../notifications/List"; +import DesignSettings from "./components/DesignSettings"; +import ScoreSetting from "./components/ScoreSetting"; +import { SettingTabEnum } from "./enum/Enum"; +import GeneralSettings from "./GeneralSettings"; const Setting: FC = () => { + const [activeTab, setActiveTab] = useState(SettingTabEnum.GENERAL); - const [activeTab, setActiveTab] = useState(SettingTabEnum.GENERAL) + return ( +
+

تنظیمات

- return ( -
-

تنظیمات

+
+ , + label: "عمومی", + value: SettingTabEnum.GENERAL, + }, + { + icon: , + label: "تنظیمات امتیاز", + value: SettingTabEnum.FINANCIAL, + }, + { + icon: , + label: "تنظیمات اعلان", + value: SettingTabEnum.NOTIFICATION, + }, + { + icon: , + label: "تنظیمات طراحی", + value: SettingTabEnum.DESIGN, + }, + ]} + onChange={(value: string) => setActiveTab(value as SettingTabEnum)} + active={activeTab} + /> +
-
- , - label: 'عمومی', - value: SettingTabEnum.GENERAL, - }, - { - icon: , - label: 'تنظیمات امتیاز', - value: SettingTabEnum.FINANCIAL, - }, - { - icon: , - label: 'تنظیمات اعلان', - value: SettingTabEnum.NOTIFICATION, - }, - ]} - onChange={(value: string) => setActiveTab(value as SettingTabEnum)} - active={activeTab} - /> -
+
+ {activeTab === SettingTabEnum.GENERAL && } + {activeTab === SettingTabEnum.FINANCIAL && } + {activeTab === SettingTabEnum.NOTIFICATION && } + {activeTab === SettingTabEnum.DESIGN && } +
+
+ ); +}; -
- { - activeTab === SettingTabEnum.GENERAL && - } - { - activeTab === SettingTabEnum.FINANCIAL && - } - { - activeTab === SettingTabEnum.NOTIFICATION && - } -
-
- ) -} - -export default Setting \ No newline at end of file +export default Setting; diff --git a/src/pages/settings/components/DesignSettings.tsx b/src/pages/settings/components/DesignSettings.tsx new file mode 100644 index 0000000..bc21a2f --- /dev/null +++ b/src/pages/settings/components/DesignSettings.tsx @@ -0,0 +1,54 @@ +import ColorPicker from "@/components/ColorPicker"; +import Radio from "@/components/Radio"; +import { clx } from "@/helpers/utils"; +import { PATTERN_BACKGROUND_OPACITY, usePatterns } from "@/pages/settings/hooks/usePatterns"; +import { useEffect, useState, type FC } from "react"; + +const COLOR_APPLY_DELAY_MS = 500; + +const DesignSettings: FC = () => { + const [menuColor, setMenuColor] = useState("#000000"); + const [appliedColor, setAppliedColor] = useState("#000000"); + const [selectedPatternId, setSelectedPatternId] = useState(1); + const patterns = usePatterns(appliedColor); + + useEffect(() => { + const timer = setTimeout(() => setAppliedColor(menuColor), COLOR_APPLY_DELAY_MS); + return () => clearTimeout(timer); + }, [menuColor]); + + return ( +
+
تنظیمات طراحی
+ +
+
+ + +
+
+ {}} /> +
انتخاب پس زمینه
+
+ +
+ {patterns.map((pattern) => ( + + ))} +
+
+
+
+
+ ); +}; + +export default DesignSettings; diff --git a/src/pages/settings/enum/Enum.ts b/src/pages/settings/enum/Enum.ts index 3481435..350f17a 100644 --- a/src/pages/settings/enum/Enum.ts +++ b/src/pages/settings/enum/Enum.ts @@ -4,4 +4,5 @@ export const enum SettingTabEnum { FINANCIAL = "financial", DELIVERY = "delivery", NOTIFICATION = "notification", + DESIGN = "design", } diff --git a/src/pages/settings/hooks/usePatterns.ts b/src/pages/settings/hooks/usePatterns.ts new file mode 100644 index 0000000..ca77dff --- /dev/null +++ b/src/pages/settings/hooks/usePatterns.ts @@ -0,0 +1,45 @@ +import { useMemo } from "react"; +import firstPattern from "@/assets/images/pattern/1.svg?raw"; +import secondPattern from "@/assets/images/pattern/2.svg?raw"; +import thirdPattern from "@/assets/images/pattern/3.svg?raw"; +import fourthPattern from "@/assets/images/pattern/4.svg?raw"; +import fifthPattern from "@/assets/images/pattern/5.svg?raw"; +import sixthPattern from "@/assets/images/pattern/6.svg?raw"; + +const PATTERNS = [ + { id: 1, name: "طرح 1", svg: firstPattern }, + { id: 2, name: "طرح 2", svg: secondPattern }, + { id: 3, name: "طرح 3", svg: thirdPattern }, + { id: 4, name: "طرح 4", svg: fourthPattern }, + { id: 5, name: "طرح 5", svg: fifthPattern }, + { id: 6, name: "طرح 6", svg: sixthPattern }, +]; + +export const PATTERN_BACKGROUND_OPACITY = 0.05; +export const PATTERN_VECTOR_OPACITY = 0.1; + +const colorizeSvg = (svg: string, color: string) => { + let result = svg.replace(/fill="(?!black|none)[^"]+"/g, `fill="${color}"`); + result = result.replace(/fill-opacity="[^"]+"/g, `fill-opacity="${PATTERN_VECTOR_OPACITY}"`); + result = result.replace( + /(<(?:path|circle|rect|ellipse|polygon)[^>]*fill="(?!black|none)[^"]+")(?![^>]*fill-opacity)/g, + `$1 fill-opacity="${PATTERN_VECTOR_OPACITY}"`, + ); + + return result; +}; + +const svgToDataUrl = (svg: string) => + `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`; + +export const usePatterns = (color: string) => { + return useMemo( + () => + PATTERNS.map((pattern) => ({ + id: pattern.id, + name: pattern.name, + image: svgToDataUrl(colorizeSvg(pattern.svg, color)), + })), + [color], + ); +}; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..780ce93 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,6 @@ /// + +declare module "*.svg?raw" { + const content: string; + export default content; +}