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

fix height and padding

Browse Source
This commit is contained in:
hamid zarghami
2025-08-06 16:10:30 +03:30
parent 9617565701
commit 58ec719fa1
5 changed files with 97 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/setting/personality/components/GenericSection.tsx
+8 -12
View File
@@ -15,10 +15,7 @@ const GenericSection: FC<GenericSectionProps> = ({ 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[] }) => {
@@ -38,7 +35,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
}
// Generate individual border sides
const borderStyle: any = {}
const borderStyle: Record<string, string> = {}
sides.forEach(side => {
borderStyle[`border${side.charAt(0).toUpperCase() + side.slice(1)}`] = `${width} ${style} ${color}`
})
@@ -125,7 +122,6 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
{
sectionData.columnsCount > 0 ?
<td style={{
padding: '10px',
...(() => {
const borderStyle = generateBorderStyle(sectionData.border)
if (activeSection === sectionKey) {
@@ -149,7 +145,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
})(),
borderRadius: '24px',
cursor: 'pointer',
height: sectionData.height || '123px'
padding: sectionData.padding || '10px'
}}>
<table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ tableLayout: 'fixed' }}>
<tbody>
@@ -193,7 +189,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height={getNumericHeight(sectionData.height).toString()}
height={parseInt(sectionData.height || '123px')}
style={{
padding: '8px',
cursor: 'pointer'
@@ -210,7 +206,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height={getNumericHeight(sectionData.height).toString()}
height={parseInt(sectionData.height || '123px')}
align={getButtonHorizontalAlign(item.buttons[0])}
valign={getButtonVerticalAlign(item.buttons[0])}
style={{
@@ -231,8 +227,8 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<td
width="100%"
height={item?.buttons && item.buttons.length > 0 ?
Math.floor(getNumericHeight(sectionData.height) * 0.6).toString() :
Math.floor(getNumericHeight(sectionData.height) * 0.8).toString()}
Math.max(parseInt(sectionData.height || '123px') - 50, 30) :
Math.max(parseInt(sectionData.height || '123px') - 25, 30)}
align={item?.texts?.[0]?.alignment || 'center'}
valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
@@ -264,7 +260,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height={Math.floor(getNumericHeight(sectionData.height) * 0.2).toString()}
height="25"
align={getButtonHorizontalAlign(item.buttons[0])}
valign={getButtonVerticalAlign(item.buttons[0])}
style={{
src/pages/setting/personality/components/SettingSideBar.tsx
+27 -3
View File
@@ -14,11 +14,12 @@ import { Trash } from 'iconsax-react';
const SettingSideBar: FC = () => {
const { t } = useTranslation()
const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex, removeSection, setSectionHeight, setSectionBorder } = usePersonalityStore()
const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex, removeSection, setSectionPadding, setSectionHeight, setSectionBorder } = usePersonalityStore()
const [color, setColor] = useState("#aabbcc");
const [backgroundSize, setBackgroundSize] = useState<BackgroundSize>(BackgroundSize.COVER)
const [backgroundPosition, setBackgroundPosition] = useState<BackgroundPosition>(BackgroundPosition.CENTER)
const [isUploading, setIsUploading] = useState<boolean>(false)
const [sectionPadding, setSectionPaddingState] = useState<string>('0px')
const [sectionHeight, setSectionHeightState] = useState<string>('123px')
const [borderWidth, setBorderWidth] = useState<string>('0px')
const [borderColor, setBorderColor] = useState<string>('#E5E7EB')
@@ -62,8 +63,13 @@ const SettingSideBar: FC = () => {
setBackgroundPosition(currentPosition)
}
// بروزرسانی section height و border
setSectionHeightState(currentSection?.height || '123px')
// بروزرسانی section padding, height و border
setSectionPaddingState(currentSection?.padding || '0px')
// مقدار پیش‌فرض height بر اساس نوع سکشن
const defaultHeight = currentSection?.isContent ? '246px' : '123px'
setSectionHeightState(currentSection?.height || defaultHeight)
setBorderWidth(currentSection?.border?.width || '0px')
setBorderColor(currentSection?.border?.color || '#E5E7EB')
setBorderStyle(currentSection?.border?.style || 'solid')
@@ -97,6 +103,13 @@ const SettingSideBar: FC = () => {
updateActiveItem({ backgroundColor: color })
}
const handleSectionPaddingChange = (padding: string) => {
if (activeSection) {
setSectionPaddingState(padding)
setSectionPadding(activeSection, padding)
}
}
const handleSectionHeightChange = (height: string) => {
if (activeSection) {
setSectionHeightState(height)
@@ -378,6 +391,17 @@ const SettingSideBar: FC = () => {
/>
</div>
{/* Section Padding Control */}
<div className='mt-5'>
<Input
label="فاصله داخلی سکشن"
value={sectionPadding}
onChange={(e) => handleSectionPaddingChange(e.target.value)}
placeholder="مثال: 20px"
disabled={isUploading}
/>
</div>
{/* Section Height Control */}
<div className='mt-5'>
<Input
src/pages/setting/personality/store/Store.ts
+11
View File
@@ -273,6 +273,17 @@ export const usePersonalityStore = create<PersonalityStore>((set, get) => ({
};
}),
setSectionPadding: (sectionKey: string, padding: string) =>
set((state) => ({
data: {
...state.data,
[sectionKey]: {
...state.data[sectionKey],
padding,
},
},
})),
setSectionHeight: (sectionKey: string, height: string) =>
set((state) => ({
data: {
src/pages/setting/personality/types/Types.ts
+2
View File
@@ -103,6 +103,7 @@ export type SectionType = {
columnsCount: number;
sortNumber: number;
items: SectionItemType[];
padding?: string;
height?: string;
border?: {
width?: string;
@@ -207,6 +208,7 @@ export type PersonalityStore = {
updateActiveItem: (updates: Partial<SectionItemType>) => void;
removeItem: (sectionKey: string, id: string) => void;
setColumnsCount: (sectionKey: string, columnsCount: number) => void;
setSectionPadding: (sectionKey: string, padding: string) => void;
setSectionHeight: (sectionKey: string, height: string) => void;
setSectionBorder: (
sectionKey: string,
src/pages/setting/personality/utils/ExportHTML.ts
+49 -35
View File
@@ -369,7 +369,7 @@ export const exportPersonalityToHTML = async (
// Render section equivalent (HeaderSection, ContentSection, FooterSection)
const renderSection = (
section: SectionType,
section: SectionType & { name?: string; isContent?: boolean },
sectionHeight: string,
paddingTop = ""
) => {
@@ -453,7 +453,7 @@ export const exportPersonalityToHTML = async (
${renderImages(item?.images || [])}
${renderSocials(item?.socials || [])}
${
sectionHeight === "246px"
section?.isContent
? '<div style="margin: 0 0 10px 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>'
: ""
}
@@ -461,18 +461,19 @@ export const exportPersonalityToHTML = async (
</td>
</tr>`;
} else {
// ردیف اصلی برای متن و تصاویر
// ردیف اصلی برای متن و تصاویر - محاسبه بر اساس height سکشن
const sectionHeightNumber = parseInt(
sectionHeight
);
const mainHeight = hasButtons
? sectionHeight === "123px"
? "60"
: sectionHeight === "246px"
? "203"
: "40"
: sectionHeight === "123px"
? "87"
: sectionHeight === "246px"
? "230"
: "67";
? Math.max(
sectionHeightNumber - 50,
30
).toString()
: Math.max(
sectionHeightNumber - 25,
30
).toString();
result += `<tr>
<td width="100%" height="${mainHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
@@ -480,7 +481,7 @@ export const exportPersonalityToHTML = async (
${renderImages(item?.images || [])}
${renderSocials(item?.socials || [])}
${
sectionHeight === "246px" &&
section?.isContent &&
!hasTexts &&
!hasImages &&
!hasSocials
@@ -506,15 +507,22 @@ export const exportPersonalityToHTML = async (
} else {
// اگر هیچ محتوایی نداریم و content section است
console.log(
"🔥 [ExportHTML] Empty content section detected, sectionHeight:",
sectionHeight
"🔥 [ExportHTML] Empty section detected, isContent:",
section?.isContent
);
if (sectionHeight === "246px") {
if (section?.isContent) {
console.log(
"🔥 [ExportHTML] Adding {{content}} placeholder to empty content"
);
const sectionHeightNumber = parseInt(
sectionHeight
);
const emptyHeight = Math.max(
sectionHeightNumber - 25,
30
);
result += `<tr>
<td width="100%" height="230" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
<td width="100%" height="${emptyHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
<div style="margin: 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>
</td>
</tr>`;
@@ -548,22 +556,26 @@ export const exportPersonalityToHTML = async (
</tr>`;
} else {
// حالت خالی
const emptyMessages = {
"123px": "سربرگ ایمیل",
"246px": "محتوای ایمیل",
const getEmptyMessage = (
section: SectionType & { name?: string; isContent?: boolean }
) => {
if (section?.isContent) return "محتوای ایمیل";
if (section?.name) return section.name;
return "سکشن خالی";
};
const emptyMessage =
emptyMessages[sectionHeight as keyof typeof emptyMessages] ||
"فوتر ایمیل";
const emptyMessage = getEmptyMessage(section);
const sectionHeightNumber = parseInt(sectionHeight);
const displayHeight = section?.isContent
? Math.max(sectionHeightNumber + 40, 286)
: sectionHeight;
return `<tr>
${paddingTop ? `<td style="padding-top: ${paddingTop};">` : "<td>"}
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="height: ${
sectionHeight === "246px" ? "286px" : sectionHeight
}; border-radius: 24px; text-align: right; vertical-align: middle; padding: 0px;">
<td style="height: ${displayHeight}; border-radius: 24px; text-align: right; vertical-align: middle; padding: 0px;">
<div style="color: #888; font-size: 14px; margin-bottom: 8px;">
${emptyMessage}
</div>
@@ -583,7 +595,15 @@ export const exportPersonalityToHTML = async (
) => {
console.log(`🔥 [ExportHTML] Getting height for section: ${sectionKey}`, {
isContent: sectionData?.isContent,
customHeight: sectionData?.height,
});
// اگر height سفارشی تعریف شده باشد، از آن استفاده کن
if (sectionData?.height) {
return sectionData.height;
}
// مقدار پیش‌فرض بر اساس نوع سکشن
if (sectionKey === "content" || sectionData?.isContent) {
return "246px";
}
@@ -619,14 +639,8 @@ export const exportPersonalityToHTML = async (
isContent: sectionData.isContent,
});
// Pass only the section structure (without name and isContent)
const sectionStructure = {
columnsCount: sectionData.columnsCount,
items: sectionData.items || [],
sortNumber: sectionData.sortNumber,
};
const renderedSection = renderSection(sectionStructure, height, "");
// Pass the complete section data for rendering
const renderedSection = renderSection(sectionData, height, "");
console.log(
`🔥 [ExportHTML] Section ${sectionKey} rendered, HTML length:`,
renderedSection.length