diff --git a/src/pages/setting/personality/Personality.tsx b/src/pages/setting/personality/Personality.tsx index 880ca29..b931716 100644 --- a/src/pages/setting/personality/Personality.tsx +++ b/src/pages/setting/personality/Personality.tsx @@ -11,7 +11,7 @@ import { toast } from '@/components/Toast' const Personality: FC = () => { const { id } = useParams() - const { setData, data, addSection, getSortedSectionKeys } = usePersonalityStore() + const { setData, addSection, getSortedSectionKeys } = usePersonalityStore() const { data: template } = useGetTemplate(id || '') useEffect(() => { @@ -63,8 +63,6 @@ const Personality: FC = () => { ) } - console.log('data', data); - const sortedSectionKeys = getSortedSectionKeys(); diff --git a/src/pages/setting/personality/components/GenericSection.tsx b/src/pages/setting/personality/components/GenericSection.tsx index 56d33c8..28c1fd7 100644 --- a/src/pages/setting/personality/components/GenericSection.tsx +++ b/src/pages/setting/personality/components/GenericSection.tsx @@ -15,6 +15,37 @@ const GenericSection: FC = ({ sectionKey }) => { const { activeSection, activeItemIndex, data, setActiveSection, setActiveItemIndex } = usePersonalityStore() + // Helper function to get numeric height + const getNumericHeight = (height?: string) => { + return parseInt(height?.replace(/px|em|rem|%/g, '') || "123") + } + + // Helper function to generate border style object based on selected sides + const generateBorderStyle = (border?: { width?: string; color?: string; style?: string; sides?: string[] }) => { + if (!border || border.style === 'none') { + return {} + } + + const { width = '0px', color = '#E5E7EB', style = 'solid', sides = [] } = border + + // اگر width صفر باشد یا تعریف نشده باشد، border نمایش نده + if (!width || width === '0px') { + return {} + } + + if (sides.length === 0 || sides.length === 4) { + return { border: `${width} ${style} ${color}` } + } + + // Generate individual border sides + const borderStyle: any = {} + sides.forEach(side => { + borderStyle[`border${side.charAt(0).toUpperCase() + side.slice(1)}`] = `${width} ${style} ${color}` + }) + + return borderStyle + } + // Early return if data is not available if (!data || !data[sectionKey]) { return ( @@ -95,9 +126,30 @@ const GenericSection: FC = ({ sectionKey }) => { sectionData.columnsCount > 0 ? { + const borderStyle = generateBorderStyle(sectionData.border) + if (activeSection === sectionKey) { + // اگر سکشن انتخاب شده است، border آبی + border سکشن را نمایش بده + if (Object.keys(borderStyle).length === 0) { + return { border: '1px dashed #0038FF' } + } else { + return { + ...borderStyle, + outline: '1px dashed #0038FF', + outlineOffset: '2px' + } + } + } else { + // اگر سکشن انتخاب نشده، فقط border سکشن یا border پیش‌فرض + if (Object.keys(borderStyle).length === 0) { + return { border: '1px dashed #E5E7EB' } + } + return borderStyle + } + })(), borderRadius: '24px', - cursor: 'pointer' + cursor: 'pointer', + height: sectionData.height || '123px' }}> @@ -114,7 +166,7 @@ const GenericSection: FC = ({ sectionKey }) => { onClick={(e) => handleItemClick(index, e)} style={{ width: `${100 / sectionData.columnsCount}%`, - height: '123px', + height: sectionData.height || '123px', border: isActive ? '1px dashed #0038FF' : '1px dashed #EAECF4', backgroundColor: item?.backgroundColor || '#ffffff', backgroundImage: item?.backgroundImage ? `url(${item.backgroundImage})` : 'none', @@ -130,7 +182,7 @@ const GenericSection: FC = ({ sectionKey }) => { >
{/* اگر column خالی است */} @@ -141,7 +193,7 @@ const GenericSection: FC = ({ sectionKey }) => {
= ({ sectionKey }) => {
= ({ sectionKey }) => {
0 ? "60" : "87"} + height={item?.buttons && item.buttons.length > 0 ? + Math.floor(getNumericHeight(sectionData.height) * 0.6).toString() : + Math.floor(getNumericHeight(sectionData.height) * 0.8).toString()} align={item?.texts?.[0]?.alignment || 'center'} valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' : item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'} @@ -210,7 +264,7 @@ const GenericSection: FC = ({ sectionKey }) => {
= ({ sectionKey }) => { handleSectionClick(sectionKey, e)} style={{ - height: '123px', - border: activeSection === sectionKey ? '1px dashed #0038FF' : '1px dashed #E5E7EB', + height: sectionData.height || '123px', + ...(() => { + const borderStyle = generateBorderStyle(sectionData.border) + if (activeSection === sectionKey) { + // اگر سکشن انتخاب شده است، border آبی + border سکشن را نمایش بده + if (Object.keys(borderStyle).length === 0) { + return { border: '1px dashed #0038FF' } + } else { + return { + ...borderStyle, + outline: '1px dashed #0038FF', + outlineOffset: '2px' + } + } + } else { + // اگر سکشن انتخاب نشده، فقط border سکشن یا border پیش‌فرض + if (Object.keys(borderStyle).length === 0) { + return { border: '1px dashed #E5E7EB' } + } + return borderStyle + } + })(), borderRadius: '24px', textAlign: 'center', verticalAlign: 'middle', diff --git a/src/pages/setting/personality/components/ImageSideBar.tsx b/src/pages/setting/personality/components/ImageSideBar.tsx index 9bccd04..b156466 100644 --- a/src/pages/setting/personality/components/ImageSideBar.tsx +++ b/src/pages/setting/personality/components/ImageSideBar.tsx @@ -82,13 +82,13 @@ const ImageSideBar: FC = () => { }, [selectedElement, isEditMode, data]); const sizeOptions = [ - { label: 'کاور - تمام فضا را پوشش دهد (Cover)', value: ImageSize.COVER }, - { label: 'در مقیاس - در فضا جا شود (Contain)', value: ImageSize.CONTAIN }, - { label: 'تکرار - عکس تکرار شود (Repeat)', value: ImageSize.REPEAT }, - { label: 'تکرار افقی (Repeat-X)', value: ImageSize.REPEAT_X }, - { label: 'تکرار عمودی (Repeat-Y)', value: ImageSize.REPEAT_Y }, - { label: 'بدون تکرار (No-Repeat)', value: ImageSize.NO_REPEAT }, - { label: 'اندازه اصلی (Auto)', value: ImageSize.AUTO } + { label: 'کاور ', value: ImageSize.COVER }, + { label: 'در مقیاس', value: ImageSize.CONTAIN }, + { label: 'تکرار', value: ImageSize.REPEAT }, + { label: 'تکرار افقی', value: ImageSize.REPEAT_X }, + { label: 'تکرار عمودی', value: ImageSize.REPEAT_Y }, + { label: 'بدون تکرار', value: ImageSize.NO_REPEAT }, + { label: 'اندازه اصلی', value: ImageSize.AUTO } ] const handleImageUpload = async (files: File[]) => { diff --git a/src/pages/setting/personality/components/SettingSideBar.tsx b/src/pages/setting/personality/components/SettingSideBar.tsx index a301919..c2f25c5 100644 --- a/src/pages/setting/personality/components/SettingSideBar.tsx +++ b/src/pages/setting/personality/components/SettingSideBar.tsx @@ -5,6 +5,8 @@ import ColorPicker from '@/components/ColorPicker'; import { usePersonalityStore } from '../store/Store'; import { SectionItemType, BackgroundSize, BackgroundPosition } from '../types/Types'; import Select from '@/components/Select'; +import Input from '@/components/Input'; +import { Checkbox } from '@/components/ui/checkbox'; import { useSingleUpload } from '../hooks/usePersonalityData'; import { toast } from '@/components/Toast'; import Button from '@/components/Button'; @@ -12,11 +14,16 @@ import { Trash } from 'iconsax-react'; const SettingSideBar: FC = () => { const { t } = useTranslation() - const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex, removeSection } = usePersonalityStore() + const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex, removeSection, setSectionHeight, setSectionBorder } = usePersonalityStore() const [color, setColor] = useState("#aabbcc"); const [backgroundSize, setBackgroundSize] = useState(BackgroundSize.COVER) const [backgroundPosition, setBackgroundPosition] = useState(BackgroundPosition.CENTER) const [isUploading, setIsUploading] = useState(false) + const [sectionHeight, setSectionHeightState] = useState('123px') + const [borderWidth, setBorderWidth] = useState('0px') + const [borderColor, setBorderColor] = useState('#E5E7EB') + const [borderStyle, setBorderStyle] = useState<'solid' | 'dashed' | 'dotted' | 'none'>('solid') + const [borderSides, setBorderSides] = useState<('top' | 'bottom' | 'left' | 'right')[]>(['top', 'bottom', 'left', 'right']) const { mutateAsync: singleUpload } = useSingleUpload() @@ -44,13 +51,23 @@ const SettingSideBar: FC = () => { // به‌روزرسانی state وقتی activeSection یا activeItem تغییر می‌کند useEffect(() => { if (activeSection && data[activeSection as keyof typeof data]) { - const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex] + const currentSection = data[activeSection as keyof typeof data] + const currentItem = currentSection?.items[activeItemIndex] + + // بروزرسانی background settings if (currentItem?.style) { const currentType = getCurrentBackgroundSizeType(currentItem.style) const currentPosition = getCurrentBackgroundPosition(currentItem.style) setBackgroundSize(currentType) setBackgroundPosition(currentPosition) } + + // بروزرسانی section height و border + setSectionHeightState(currentSection?.height || '123px') + setBorderWidth(currentSection?.border?.width || '0px') + setBorderColor(currentSection?.border?.color || '#E5E7EB') + setBorderStyle(currentSection?.border?.style || 'solid') + setBorderSides(currentSection?.border?.sides || ['top', 'bottom', 'left', 'right']) } }, [activeSection, activeItemIndex, data]) @@ -80,6 +97,65 @@ const SettingSideBar: FC = () => { updateActiveItem({ backgroundColor: color }) } + const handleSectionHeightChange = (height: string) => { + if (activeSection) { + setSectionHeightState(height) + setSectionHeight(activeSection, height) + } + } + + const handleBorderWidthChange = (width: string) => { + if (activeSection) { + setBorderWidth(width) + setSectionBorder(activeSection, { + width, + color: borderColor, + style: borderStyle, + sides: borderSides + }) + } + } + + const handleBorderColorChange = (color: string) => { + if (activeSection) { + setBorderColor(color) + setSectionBorder(activeSection, { + width: borderWidth, + color, + style: borderStyle, + sides: borderSides + }) + } + } + + const handleBorderStyleChange = (style: 'solid' | 'dashed' | 'dotted' | 'none') => { + if (activeSection) { + setBorderStyle(style) + setSectionBorder(activeSection, { + width: borderWidth, + color: borderColor, + style, + sides: borderSides + }) + } + } + + const handleBorderSidesChange = (side: 'top' | 'bottom' | 'left' | 'right') => { + if (activeSection) { + const newSides = borderSides.includes(side) + ? borderSides.filter(s => s !== side) + : [...borderSides, side] + + setBorderSides(newSides) + setSectionBorder(activeSection, { + width: borderWidth, + color: borderColor, + style: borderStyle, + sides: newSides + }) + } + } + const handleUploadBackground = async (file: File[]) => { if (activeSection && file.length > 0) { setIsUploading(true) @@ -166,6 +242,13 @@ const SettingSideBar: FC = () => { { label: 'پایین راست', value: BackgroundPosition.BOTTOM_RIGHT } ] + const borderStyleOptions = [ + { label: 'ساده', value: 'solid' }, + { label: 'خط‌چین', value: 'dashed' }, + { label: 'نقطه‌چین', value: 'dotted' }, + { label: 'بدون حاشیه', value: 'none' } + ] + if (!activeSection) { return (
@@ -294,6 +377,73 @@ const SettingSideBar: FC = () => { disabled={isUploading} />
+ + {/* Section Height Control */} +
+ handleSectionHeightChange(e.target.value)} + placeholder="مثال: 123px" + disabled={isUploading} + /> +
+ + {/* Border Controls */} +
+
تنظیمات حاشیه
+ +
+ handleBorderWidthChange(e.target.value)} + placeholder="مثال: 1px" + disabled={isUploading} + /> +
+ +
+ +
+ +
+