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

image sidebar

Browse Source
This commit is contained in:
hamid zarghami
2025-07-01 16:11:32 +03:30
parent 7638e07e39
commit cdff4355d3
4 changed files with 98 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/setting/personality/components/ButtonSidebar.tsx
+4 -4
View File
@@ -19,9 +19,9 @@ const ButtonSidebar: FC = () => {
const [buttonSize, setButtonSize] = useState<ButtonSize>(ButtonSize.MEDIUM)
const [isBorder, setIsBorder] = useState<boolean>(false)
const [borderSize, setBorderSize] = useState<number>(1)
const [textColor, setTextColor] = useState<string>('#000')
const [textColor, setTextColor] = useState<string>('#fff')
const [backgroundColor, setBackgroundColor] = useState<string>('#000')
const [borderColor, setBorderColor] = useState<string>('#000')
const [borderColor, setBorderColor] = useState<string>('#fff')
const [horizontalAlignment, setHorizontalAlignment] = useState<HorizontalAlignment>(HorizontalAlignment.CENTER)
const [verticalAlignment, setVerticalAlignment] = useState<VerticalAlignment>(VerticalAlignment.MIDDLE)
@@ -51,9 +51,9 @@ const ButtonSidebar: FC = () => {
setButtonSize(ButtonSize.MEDIUM)
setIsBorder(false)
setBorderSize(1)
setTextColor('#000')
setTextColor('#fff')
setBackgroundColor('#000')
setBorderColor('#000')
setBorderColor('#fff')
setHorizontalAlignment(HorizontalAlignment.CENTER)
setVerticalAlignment(VerticalAlignment.MIDDLE)
}
src/pages/setting/personality/components/ImageRenderer.tsx
+89 -34
View File
@@ -8,80 +8,135 @@ interface ImageRendererProps {
const ImageRenderer: FC<ImageRendererProps> = ({ images }) => {
if (!images || images.length === 0) return null
// تابع‌های helper برای تبدیل enum به string
const getHorizontalAlign = (alignment?: HorizontalAlignment) => {
switch (alignment) {
case HorizontalAlignment.LEFT:
return 'left'
case HorizontalAlignment.RIGHT:
return 'right'
case HorizontalAlignment.CENTER:
default:
return 'center'
}
}
const getVerticalAlign = (verticalAlignment?: VerticalAlignment) => {
switch (verticalAlignment) {
case VerticalAlignment.TOP:
return 'top'
case VerticalAlignment.BOTTOM:
return 'bottom'
case VerticalAlignment.MIDDLE:
default:
return 'middle'
}
}
const getImageStyle = (image: ImageType) => {
return {
width: image.width || '100%',
height: image.height || 'auto',
border: '0'
}
}
const shouldUseBackgroundImage = (imageSize: ImageSize) => {
return imageSize === ImageSize.REPEAT ||
imageSize === ImageSize.REPEAT_X ||
imageSize === ImageSize.REPEAT_Y
}
const getBackgroundStyle = (image: ImageType) => {
let backgroundSize = 'cover'
let backgroundRepeat = 'no-repeat'
switch (image.size) {
case ImageSize.COVER:
backgroundSize = 'cover'
backgroundRepeat = 'no-repeat'
break
case ImageSize.CONTAIN:
backgroundSize = 'contain'
backgroundRepeat = 'no-repeat'
break
case ImageSize.REPEAT:
backgroundSize = 'auto'
backgroundRepeat = 'repeat'
break
case ImageSize.REPEAT_X:
backgroundSize = 'auto'
backgroundRepeat = 'repeat-x'
break
case ImageSize.REPEAT_Y:
backgroundSize = 'auto'
backgroundRepeat = 'repeat-y'
break
case ImageSize.NO_REPEAT:
backgroundSize = 'auto'
backgroundRepeat = 'no-repeat'
break
case ImageSize.AUTO:
default:
backgroundSize = 'auto'
backgroundRepeat = 'no-repeat'
break
}
let backgroundPosition = 'center center'
// تنظیم موقعیت بر اساس alignment
const horizontal = image.alignment === HorizontalAlignment.LEFT ? 'left' :
image.alignment === HorizontalAlignment.RIGHT ? 'right' : 'center'
const vertical = image.verticalAlignment === VerticalAlignment.TOP ? 'top' :
image.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'center'
backgroundPosition = `${horizontal} ${vertical}`
return {
backgroundImage: `url(${image.src})`,
backgroundSize,
backgroundPosition: `${horizontal} ${vertical}`,
backgroundRepeat,
backgroundPosition,
width: image.width || '100%',
height: image.height || '60px',
display: 'block'
height: image.height || '100px'
}
}
const renderImage = (image: ImageType) => {
if (shouldUseBackgroundImage(image.size)) {
// برای pattern های repeat از background استفاده می‌کنیم
return (
<div style={getBackgroundStyle(image)}>
&nbsp;
</div>
)
}
// برای تصاویر عادی
if (image.size === ImageSize.CONTAIN) {
// برای contain از table wrapper استفاده می‌کنیم تا نسبت حفظ شود
return (
<table width={image.width || '100%'} cellPadding="0" cellSpacing="0" border={0}>
<tbody>
<tr>
<td align="center" valign="middle" style={{ textAlign: 'center' }}>
<img
src={image.src}
alt={image.alt || 'تصویر آپلود شده'}
width={image.width || '100%'}
height={image.height || 'auto'}
style={{ border: '0' }}
/>
</td>
</tr>
</tbody>
</table>
)
}
// برای cover و auto
return (
<img
src={image.src}
alt={image.alt || 'تصویر آپلود شده'}
width={image.width || '100%'}
height={image.height || 'auto'}
style={getImageStyle(image)}
/>
)
}
return (
<>
{images.map((image, imageIndex) => (
<table key={image.id} width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ borderCollapse: 'collapse' }}>
<table key={image.id} width="100%" cellPadding="0" cellSpacing="0" border={0}>
<tbody>
<tr>
<td
align={image.alignment || 'center'}
valign={image.verticalAlignment || 'middle'}
align={getHorizontalAlign(image.alignment)}
valign={getVerticalAlign(image.verticalAlignment)}
style={{
paddingBottom: imageIndex < images.length - 1 ? '4px' : '0'
}}
>
<div style={getBackgroundStyle(image)}>
{/* محتوا درون div با background image */}
&nbsp;
</div>
{renderImage(image)}
</td>
</tr>
</tbody>
src/pages/setting/personality/components/ImageSideBar.tsx
-6
View File
@@ -133,19 +133,16 @@ const ImageSideBar: FC = () => {
</div>
<div className='mt-3 flex gap-4'>
<div
className={`cursor-pointer p-1 rounded ${horizontalAlignment === HorizontalAlignment.RIGHT ? 'bg-blue-100' : ''}`}
onClick={() => setHorizontalAlignment(HorizontalAlignment.RIGHT)}
>
<AlignRight size={20} color={horizontalAlignment === HorizontalAlignment.RIGHT ? '#0038FF' : '#000'} />
</div>
<div
className={`cursor-pointer p-1 rounded ${horizontalAlignment === HorizontalAlignment.CENTER ? 'bg-blue-100' : ''}`}
onClick={() => setHorizontalAlignment(HorizontalAlignment.CENTER)}
>
<AlignVertically size={20} color={horizontalAlignment === HorizontalAlignment.CENTER ? '#0038FF' : '#000'} />
</div>
<div
className={`cursor-pointer p-1 rounded ${horizontalAlignment === HorizontalAlignment.LEFT ? 'bg-blue-100' : ''}`}
onClick={() => setHorizontalAlignment(HorizontalAlignment.LEFT)}
>
<AlignLeft size={20} color={horizontalAlignment === HorizontalAlignment.LEFT ? '#0038FF' : '#000'} />
@@ -159,19 +156,16 @@ const ImageSideBar: FC = () => {
</div>
<div className='mt-3 flex gap-4'>
<div
className={`cursor-pointer p-1 rounded ${verticalAlignment === VerticalAlignment.BOTTOM ? 'bg-blue-100' : ''}`}
onClick={() => setVerticalAlignment(VerticalAlignment.BOTTOM)}
>
<AlignBottom size={20} color={verticalAlignment === VerticalAlignment.BOTTOM ? '#0038FF' : '#000'} />
</div>
<div
className={`cursor-pointer p-1 rounded ${verticalAlignment === VerticalAlignment.MIDDLE ? 'bg-blue-100' : ''}`}
onClick={() => setVerticalAlignment(VerticalAlignment.MIDDLE)}
>
<AlignHorizontally size={20} color={verticalAlignment === VerticalAlignment.MIDDLE ? '#0038FF' : '#000'} />
</div>
<div
className={`cursor-pointer p-1 rounded ${verticalAlignment === VerticalAlignment.TOP ? 'bg-blue-100' : ''}`}
onClick={() => setVerticalAlignment(VerticalAlignment.TOP)}
>
<AlignTop size={20} color={verticalAlignment === VerticalAlignment.TOP ? '#0038FF' : '#000'} />
src/pages/setting/personality/components/SettingSideBar.tsx
+5 -5
View File
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
import UploadBoxDraggble from '@/components/UploadBoxDraggble';
import ColorPicker from '@/components/ColorPicker';
import { usePersonalityStore } from '../store/Store';
import { SectionItemType, BackgroundSize } from '../types/Types';
import { SectionItemType, BackgroundSize, SectionName } from '../types/Types';
import Select from '@/components/Select';
const SettingSideBar: FC = () => {
@@ -19,10 +19,10 @@ const SettingSideBar: FC = () => {
const bgSize = style.backgroundSize
const bgRepeat = style.backgroundRepeat
if (bgSize === BackgroundSize.COVER) return BackgroundSize.COVER
if (bgSize === BackgroundSize.CONTAIN) return BackgroundSize.CONTAIN
if (bgSize === 'cover') return BackgroundSize.COVER
if (bgSize === 'contain') return BackgroundSize.CONTAIN
if (bgSize === 'auto' || !bgSize) {
if (bgRepeat === BackgroundSize.ROUND) return BackgroundSize.ROUND
if (bgRepeat === 'round') return BackgroundSize.ROUND
}
return BackgroundSize.COVER
}
@@ -40,7 +40,7 @@ const SettingSideBar: FC = () => {
const handleColumnClick = (columns: number) => {
if (activeSection) {
setColumnsCount(activeSection as "header" | "content" | "footer", columns);
setColumnsCount(activeSection as SectionName, columns);
}
}