diff --git a/public/icon1/01 Facebook.png b/public/icon1/01 Facebook.png new file mode 100644 index 0000000..5354bd7 Binary files /dev/null and b/public/icon1/01 Facebook.png differ diff --git a/public/icon1/02 Instagram.png b/public/icon1/02 Instagram.png new file mode 100644 index 0000000..7e1e367 Binary files /dev/null and b/public/icon1/02 Instagram.png differ diff --git a/public/icon1/03 Linkedin.png b/public/icon1/03 Linkedin.png new file mode 100644 index 0000000..c87c1a4 Binary files /dev/null and b/public/icon1/03 Linkedin.png differ diff --git a/public/icon1/04 Youtube.png b/public/icon1/04 Youtube.png new file mode 100644 index 0000000..a076fee Binary files /dev/null and b/public/icon1/04 Youtube.png differ diff --git a/public/icon1/05 X.png b/public/icon1/05 X.png new file mode 100644 index 0000000..712307d Binary files /dev/null and b/public/icon1/05 X.png differ diff --git a/public/icon1/06 TikTok.png b/public/icon1/06 TikTok.png new file mode 100644 index 0000000..f7d4d4c Binary files /dev/null and b/public/icon1/06 TikTok.png differ diff --git a/public/icon1/07 SnappChat.png b/public/icon1/07 SnappChat.png new file mode 100644 index 0000000..5d7568a Binary files /dev/null and b/public/icon1/07 SnappChat.png differ diff --git a/public/icon1/08 Pinterest.png b/public/icon1/08 Pinterest.png new file mode 100644 index 0000000..f902073 Binary files /dev/null and b/public/icon1/08 Pinterest.png differ diff --git a/public/icon1/09 Telegram.png b/public/icon1/09 Telegram.png new file mode 100644 index 0000000..b5d0fd5 Binary files /dev/null and b/public/icon1/09 Telegram.png differ diff --git a/public/icon1/10 Whatsapp.png b/public/icon1/10 Whatsapp.png new file mode 100644 index 0000000..d4050f5 Binary files /dev/null and b/public/icon1/10 Whatsapp.png differ diff --git a/public/icon1/11 Discord.png b/public/icon1/11 Discord.png new file mode 100644 index 0000000..a10644e Binary files /dev/null and b/public/icon1/11 Discord.png differ diff --git a/public/icon1/12 GitHub.png b/public/icon1/12 GitHub.png new file mode 100644 index 0000000..94579b9 Binary files /dev/null and b/public/icon1/12 GitHub.png differ diff --git a/public/icon2/01 Facebook.png b/public/icon2/01 Facebook.png new file mode 100644 index 0000000..6a0da32 Binary files /dev/null and b/public/icon2/01 Facebook.png differ diff --git a/public/icon2/02 Instagram.png b/public/icon2/02 Instagram.png new file mode 100644 index 0000000..3911fef Binary files /dev/null and b/public/icon2/02 Instagram.png differ diff --git a/public/icon2/03 Linkedin.png b/public/icon2/03 Linkedin.png new file mode 100644 index 0000000..f074e4c Binary files /dev/null and b/public/icon2/03 Linkedin.png differ diff --git a/public/icon2/04 Youtube.png b/public/icon2/04 Youtube.png new file mode 100644 index 0000000..ea019c4 Binary files /dev/null and b/public/icon2/04 Youtube.png differ diff --git a/public/icon2/05 X.png b/public/icon2/05 X.png new file mode 100644 index 0000000..01be272 Binary files /dev/null and b/public/icon2/05 X.png differ diff --git a/public/icon2/06 TikTok.png b/public/icon2/06 TikTok.png new file mode 100644 index 0000000..5c7c4f1 Binary files /dev/null and b/public/icon2/06 TikTok.png differ diff --git a/public/icon2/07 SnappChat.png b/public/icon2/07 SnappChat.png new file mode 100644 index 0000000..4f6fce5 Binary files /dev/null and b/public/icon2/07 SnappChat.png differ diff --git a/public/icon2/08 Pinterest.png b/public/icon2/08 Pinterest.png new file mode 100644 index 0000000..d6d3442 Binary files /dev/null and b/public/icon2/08 Pinterest.png differ diff --git a/public/icon2/09 Telegram.png b/public/icon2/09 Telegram.png new file mode 100644 index 0000000..7b888ba Binary files /dev/null and b/public/icon2/09 Telegram.png differ diff --git a/public/icon2/10 Whatsapp.png b/public/icon2/10 Whatsapp.png new file mode 100644 index 0000000..7848e35 Binary files /dev/null and b/public/icon2/10 Whatsapp.png differ diff --git a/public/icon2/11 Discord.png b/public/icon2/11 Discord.png new file mode 100644 index 0000000..c83fe02 Binary files /dev/null and b/public/icon2/11 Discord.png differ diff --git a/public/icon2/12 GitHub.png b/public/icon2/12 GitHub.png new file mode 100644 index 0000000..7f048ed Binary files /dev/null and b/public/icon2/12 GitHub.png differ diff --git a/public/icon3/01 Facebook.png b/public/icon3/01 Facebook.png new file mode 100644 index 0000000..f06c7b5 Binary files /dev/null and b/public/icon3/01 Facebook.png differ diff --git a/public/icon3/02 Instagram.png b/public/icon3/02 Instagram.png new file mode 100644 index 0000000..bba4ee4 Binary files /dev/null and b/public/icon3/02 Instagram.png differ diff --git a/public/icon3/03 Linkedin.png b/public/icon3/03 Linkedin.png new file mode 100644 index 0000000..2e08419 Binary files /dev/null and b/public/icon3/03 Linkedin.png differ diff --git a/public/icon3/04 Youtube.png b/public/icon3/04 Youtube.png new file mode 100644 index 0000000..7ffad6a Binary files /dev/null and b/public/icon3/04 Youtube.png differ diff --git a/public/icon3/05 X.png b/public/icon3/05 X.png new file mode 100644 index 0000000..eab9f19 Binary files /dev/null and b/public/icon3/05 X.png differ diff --git a/public/icon3/06 TikTok.png b/public/icon3/06 TikTok.png new file mode 100644 index 0000000..3f7fe28 Binary files /dev/null and b/public/icon3/06 TikTok.png differ diff --git a/public/icon3/07 SnappChat.png b/public/icon3/07 SnappChat.png new file mode 100644 index 0000000..7b5afea Binary files /dev/null and b/public/icon3/07 SnappChat.png differ diff --git a/public/icon3/08 Pinterest.png b/public/icon3/08 Pinterest.png new file mode 100644 index 0000000..1b255eb Binary files /dev/null and b/public/icon3/08 Pinterest.png differ diff --git a/public/icon3/09 Telegram.png b/public/icon3/09 Telegram.png new file mode 100644 index 0000000..ba7fe7c Binary files /dev/null and b/public/icon3/09 Telegram.png differ diff --git a/public/icon3/10 Whatsapp.png b/public/icon3/10 Whatsapp.png new file mode 100644 index 0000000..69963e1 Binary files /dev/null and b/public/icon3/10 Whatsapp.png differ diff --git a/public/icon3/11 Discord.png b/public/icon3/11 Discord.png new file mode 100644 index 0000000..bf810c9 Binary files /dev/null and b/public/icon3/11 Discord.png differ diff --git a/public/icon3/12 GitHub.png b/public/icon3/12 GitHub.png new file mode 100644 index 0000000..87b9447 Binary files /dev/null and b/public/icon3/12 GitHub.png differ diff --git a/src/components/UploadBoxDraggble.tsx b/src/components/UploadBoxDraggble.tsx index 2171459..d36361a 100644 --- a/src/components/UploadBoxDraggble.tsx +++ b/src/components/UploadBoxDraggble.tsx @@ -150,10 +150,11 @@ const UploadBoxDraggble: FC = (props: Props) => { { - files.length > 0 || perviews ? ( + (perviews && perviews.length > 0) || files.length > 0 ? (
+ {/* اگر preview از props وجود دارد، فقط previewها را نمایش بده */} { - perviews && perviews.map((item, index) => { + perviews && perviews.length > 0 ? perviews.map((item, index) => { return (
@@ -173,10 +174,7 @@ const UploadBoxDraggble: FC = (props: Props) => {
) - }) - } - { - files.map((file, index) => { + }) : files.map((file, index) => { if (props.isFile) { return (
diff --git a/src/langs/fa.json b/src/langs/fa.json index c46947a..d2def80 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -158,7 +158,8 @@ "icon_color": "رنگ آیکون", "add_social": "اضافه کردن شبکه اجتماعی", "update_social": "بروزرسانی شبکه اجتماعی", - "delete": "حذف" + "delete": "حذف", + "preview": "پیش نمایش" }, "save": "ذخیره", "export_html": "خروجی HTML", diff --git a/src/pages/setting/personality/components/SettingSideBar.tsx b/src/pages/setting/personality/components/SettingSideBar.tsx index 1b899f5..614bd9a 100644 --- a/src/pages/setting/personality/components/SettingSideBar.tsx +++ b/src/pages/setting/personality/components/SettingSideBar.tsx @@ -19,6 +19,8 @@ const SettingSideBar: FC = () => { const [backgroundSize, setBackgroundSize] = useState(BackgroundSize.COVER) const [backgroundPosition, setBackgroundPosition] = useState(BackgroundPosition.CENTER) const [isUploading, setIsUploading] = useState(false) + const [backgroundWidth, setBackgroundWidth] = useState('auto') + const [backgroundHeight, setBackgroundHeight] = useState('auto') const [sectionPadding, setSectionPaddingState] = useState('0px') const [sectionHeight, setSectionHeightState] = useState('123px') const [borderWidth, setBorderWidth] = useState('0px') @@ -40,6 +42,10 @@ const SettingSideBar: FC = () => { if (bgSize === 'auto' || !bgSize) { if (bgRepeat === 'round') return BackgroundSize.ROUND } + // اگر مقدار backgroundSize شامل دو مقدار باشد (مثلاً "100px 200px") آن را سفارشی در نظر بگیر + if (typeof bgSize === 'string' && /\s+/.test(bgSize)) return BackgroundSize.CUSTOM + // اگر مقدار دارای واحد باشد نیز سفارشی است + if (typeof bgSize === 'string' && /(px|%|rem|em|vh|vw)/.test(bgSize)) return BackgroundSize.CUSTOM return BackgroundSize.COVER } @@ -61,6 +67,17 @@ const SettingSideBar: FC = () => { const currentPosition = getCurrentBackgroundPosition(currentItem.style) setBackgroundSize(currentType) setBackgroundPosition(currentPosition) + + // تنظیم مقدار اولیه عرض و ارتفاع بک‌گراند در حالت سفارشی + const bgSize = currentItem.style.backgroundSize + if (currentType === BackgroundSize.CUSTOM && typeof bgSize === 'string') { + const parts = bgSize.split(/\s+/) + setBackgroundWidth(parts[0] || 'auto') + setBackgroundHeight(parts[1] || 'auto') + } else { + setBackgroundWidth('auto') + setBackgroundHeight('auto') + } } // بروزرسانی section padding, height و border @@ -179,13 +196,17 @@ const SettingSideBar: FC = () => { if (imageUrl) { const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex] + const finalBackgroundSize = currentItem?.style?.backgroundSize ?? getBackgroundSize(backgroundSize) + const finalBackgroundRepeat = currentItem?.style?.backgroundRepeat ?? getBackgroundRepeat(backgroundSize) + const finalBackgroundPosition = currentItem?.style?.backgroundPosition ?? backgroundPosition + updateActiveItem({ backgroundImage: imageUrl, style: { ...currentItem?.style, - backgroundSize: getBackgroundSize(backgroundSize), - backgroundRepeat: getBackgroundRepeat(backgroundSize), - backgroundPosition: backgroundPosition + backgroundSize: finalBackgroundSize, + backgroundRepeat: finalBackgroundRepeat, + backgroundPosition: finalBackgroundPosition } }) toast('تصویر پس‌زمینه با موفقیت آپلود شد', 'success') @@ -198,13 +219,17 @@ const SettingSideBar: FC = () => { const imageUrl = URL.createObjectURL(file[0]) const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex] + const finalBackgroundSize = currentItem?.style?.backgroundSize ?? getBackgroundSize(backgroundSize) + const finalBackgroundRepeat = currentItem?.style?.backgroundRepeat ?? getBackgroundRepeat(backgroundSize) + const finalBackgroundPosition = currentItem?.style?.backgroundPosition ?? backgroundPosition + updateActiveItem({ backgroundImage: imageUrl, style: { ...currentItem?.style, - backgroundSize: getBackgroundSize(backgroundSize), - backgroundRepeat: getBackgroundRepeat(backgroundSize), - backgroundPosition: backgroundPosition + backgroundSize: finalBackgroundSize, + backgroundRepeat: finalBackgroundRepeat, + backgroundPosition: finalBackgroundPosition } }) } finally { @@ -232,6 +257,8 @@ const SettingSideBar: FC = () => { return 'contain' case BackgroundSize.ROUND: return 'auto' + case BackgroundSize.CUSTOM: + return `${backgroundWidth || 'auto'} ${backgroundHeight || 'auto'}` default: return 'cover' } @@ -240,7 +267,8 @@ const SettingSideBar: FC = () => { const sizeOptions = [ { label: 'کاور', value: BackgroundSize.COVER }, { label: 'در مقیاس', value: BackgroundSize.CONTAIN }, - { label: 'تکرار گرد', value: BackgroundSize.ROUND } + { label: 'تکرار گرد', value: BackgroundSize.ROUND }, + { label: 'سفارشی', value: BackgroundSize.CUSTOM } ] const positionOptions = [ @@ -336,7 +364,7 @@ const SettingSideBar: FC = () => { { updateActiveItem({ backgroundImage: undefined @@ -355,6 +383,15 @@ const SettingSideBar: FC = () => { setBackgroundSize(newSize) const currentItem = activeSection ? data[activeSection as keyof typeof data]?.items[activeItemIndex] : null + + // اگر سفارشی انتخاب شد و هنوز مقدار width/height تعیین نشده، مقادیر پیش‌فرض را ست کن + if (newSize === BackgroundSize.CUSTOM) { + const width = backgroundWidth || 'auto' + const height = backgroundHeight || 'auto' + setBackgroundWidth(width) + setBackgroundHeight(height) + } + updateActiveItem({ style: { ...currentItem?.style, @@ -369,6 +406,46 @@ const SettingSideBar: FC = () => { />
+ {backgroundSize === BackgroundSize.CUSTOM && ( +
+ { + const value = e.target.value + setBackgroundWidth(value) + const currentItem = activeSection ? data[activeSection as keyof typeof data]?.items[activeItemIndex] : null + updateActiveItem({ + style: { + ...currentItem?.style, + backgroundSize: `${value || 'auto'} ${backgroundHeight || 'auto'}` + } + }) + }} + placeholder="مثال: 100px یا 50%" + disabled={isUploading} + /> + { + const value = e.target.value + setBackgroundHeight(value) + const currentItem = activeSection ? data[activeSection as keyof typeof data]?.items[activeItemIndex] : null + updateActiveItem({ + style: { + ...currentItem?.style, + backgroundSize: `${backgroundWidth || 'auto'} ${value || 'auto'}`, + backgroundRepeat: getBackgroundRepeat(BackgroundSize.CUSTOM) + } + }) + }} + placeholder="مثال: 200px یا auto" + disabled={isUploading} + /> +
+ )} +
setIconPack(e.target.value as SocialIconPack)} + placeholder={t('setting.select')} + /> +
+
{ />
-
-