font size and font weight + social align
This commit is contained in:
hamid zarghami
@@ -96,6 +96,8 @@
|
||||
"select": "انتخاب",
|
||||
"border": "حاشیه",
|
||||
"text_color": "رنگ متن",
|
||||
"font_size": "اندازه فونت",
|
||||
"font_weight": "ضخامت فونت",
|
||||
"background_color": "رنگ زمینه",
|
||||
"border_color": "رنگ حاشیه",
|
||||
"add_button": "اضافه کردن دکمه",
|
||||
|
||||
@@ -132,7 +132,7 @@ const SocialRenderer: FC<SocialRendererProps> = ({ socials, itemId, sectionKey }
|
||||
valign={getVerticalAlign(socials[0]?.verticalAlignment)}
|
||||
style={{ padding: '4px 0' }}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: getHorizontalAlign(socials[0]?.alignment), gap: '4px', flexWrap: 'wrap' }}>
|
||||
<div style={{ textAlign: getHorizontalAlign(socials[0]?.alignment) }}>
|
||||
{socials.map((social) => (
|
||||
<div
|
||||
key={social.id}
|
||||
@@ -144,7 +144,8 @@ const SocialRenderer: FC<SocialRendererProps> = ({ socials, itemId, sectionKey }
|
||||
outlineOffset: '2px',
|
||||
borderRadius: '4px',
|
||||
padding: '2px',
|
||||
display: 'inline-block'
|
||||
display: 'inline-block',
|
||||
margin: '2px'
|
||||
}}
|
||||
>
|
||||
<div style={getIconStyle(social)}>
|
||||
|
||||
@@ -51,6 +51,7 @@ const TextRenderer: FC<TextRendererProps> = ({ texts, itemId, sectionKey }) => {
|
||||
style={{
|
||||
color: textItem.color || '#000000',
|
||||
fontSize: `${textItem.fontSize || 14}px`,
|
||||
fontWeight: textItem.fontWeight || 400,
|
||||
lineHeight: '1.4',
|
||||
paddingBottom: textIndex < (texts?.length || 0) - 1 ? '4px' : '0',
|
||||
pointerEvents: 'none' // Prevent double click handling
|
||||
|
||||
@@ -6,12 +6,16 @@ import { usePersonalityStore } from '../store/Store';
|
||||
import ColorPicker from '@/components/ColorPicker';
|
||||
import { HorizontalAlignment, VerticalAlignment, ElementType } from '../types/Types';
|
||||
import Textarea from '@/components/Textarea';
|
||||
import Input from '@/components/Input';
|
||||
import Select from '@/components/Select';
|
||||
|
||||
const TextSidebar: FC = () => {
|
||||
|
||||
const { t } = useTranslation()
|
||||
const [value, setValue] = useState('');
|
||||
const [color, setColor] = useState('#000');
|
||||
const [fontSize, setFontSize] = useState(14);
|
||||
const [fontWeight, setFontWeight] = useState('400');
|
||||
const [horizontalPosition, setHorizontalPosition] = useState<HorizontalAlignment>(HorizontalAlignment.CENTER);
|
||||
const [verticalPosition, setVerticalPosition] = useState<VerticalAlignment>(VerticalAlignment.MIDDLE);
|
||||
|
||||
@@ -49,6 +53,8 @@ const TextSidebar: FC = () => {
|
||||
if (text) {
|
||||
setValue(text.text);
|
||||
setColor(text.color || '#000');
|
||||
setFontSize(text.fontSize || 14);
|
||||
setFontWeight((text.fontWeight || 400).toString());
|
||||
setHorizontalPosition(text.alignment || HorizontalAlignment.CENTER);
|
||||
setVerticalPosition(text.verticalAlignment || VerticalAlignment.MIDDLE);
|
||||
} else {
|
||||
@@ -61,6 +67,8 @@ const TextSidebar: FC = () => {
|
||||
// Reset form when not in edit mode
|
||||
setValue('');
|
||||
setColor('#000');
|
||||
setFontSize(14);
|
||||
setFontWeight('400');
|
||||
setHorizontalPosition(HorizontalAlignment.CENTER);
|
||||
setVerticalPosition(VerticalAlignment.MIDDLE);
|
||||
}
|
||||
@@ -71,13 +79,16 @@ const TextSidebar: FC = () => {
|
||||
addTextToActiveItem({
|
||||
text: value,
|
||||
color: color,
|
||||
fontSize: fontSize,
|
||||
fontWeight: parseInt(fontWeight),
|
||||
verticalAlignment: verticalPosition,
|
||||
alignment: horizontalPosition,
|
||||
});
|
||||
|
||||
// خالی کردن فیلدها بعد از ذخیره
|
||||
setValue('');
|
||||
setColor('#000');
|
||||
setFontSize(14);
|
||||
setFontWeight('400');
|
||||
setHorizontalPosition(HorizontalAlignment.CENTER);
|
||||
setVerticalPosition(VerticalAlignment.MIDDLE);
|
||||
}
|
||||
@@ -92,6 +103,8 @@ const TextSidebar: FC = () => {
|
||||
{
|
||||
text: value,
|
||||
color: color,
|
||||
fontSize: fontSize,
|
||||
fontWeight: parseInt(fontWeight),
|
||||
alignment: horizontalPosition,
|
||||
verticalAlignment: verticalPosition,
|
||||
}
|
||||
@@ -165,6 +178,42 @@ const TextSidebar: FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5 flex gap-4'>
|
||||
<div className='flex-1'>
|
||||
<label className='text-sm block mb-2'>
|
||||
{t('setting.font_size')}
|
||||
</label>
|
||||
<Input
|
||||
max="72"
|
||||
value={fontSize.toString()}
|
||||
onChange={(e) => setFontSize(+e.target.value || 0)}
|
||||
onBlur={(e) => {
|
||||
if (fontSize === 0 || e.target.value === '') {
|
||||
setFontSize(14);
|
||||
}
|
||||
}}
|
||||
className='text-sm'
|
||||
placeholder="14"
|
||||
/>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<Select
|
||||
label={t('setting.font_weight')}
|
||||
value={fontWeight}
|
||||
onChange={(e) => setFontWeight(e.target.value)}
|
||||
items={[
|
||||
{ value: '300', label: 'کمعرض' },
|
||||
{ value: '400', label: 'معمولی' },
|
||||
{ value: '500', label: 'متوسط' },
|
||||
{ value: '600', label: 'نیمهضخیم' },
|
||||
{ value: '700', label: 'ضخیم' },
|
||||
{ value: '800', label: 'فوقضخیم' },
|
||||
]}
|
||||
className='text-sm'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-5 flex justify-between'>
|
||||
<div>
|
||||
<div className='text-sm'>
|
||||
|
||||
@@ -130,6 +130,7 @@ export type TextType = {
|
||||
id: string;
|
||||
text: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: number;
|
||||
fontFamily?: string;
|
||||
color?: string;
|
||||
alignment?: HorizontalAlignment;
|
||||
|
||||
@@ -68,9 +68,9 @@ export const exportPersonalityToHTML = async (
|
||||
<tr>
|
||||
<td align="${textItem.alignment || "right"}" style="color: ${
|
||||
textItem.color || "#000000"
|
||||
}; font-size: ${
|
||||
textItem.fontSize || 14
|
||||
}px; line-height: 1.4; padding-bottom: ${
|
||||
}; font-size: ${textItem.fontSize || 14}px; font-weight: ${
|
||||
textItem.fontWeight || 400
|
||||
}; line-height: 1.4; padding-bottom: ${
|
||||
textIndex < (texts?.length || 0) - 1 ? "4px" : "0"
|
||||
};">
|
||||
${textItem.text}
|
||||
@@ -282,7 +282,7 @@ export const exportPersonalityToHTML = async (
|
||||
|
||||
const getIconStyle = (social: SocialType) => {
|
||||
const size = getIconSize(social.size);
|
||||
const baseStyle = `width: ${size}; height: ${size}; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: ${
|
||||
const baseStyle = `width: ${size}; height: ${size}; display: inline-block; vertical-align: middle; text-align: center; line-height: ${size}; text-decoration: none; color: ${
|
||||
social.color || getSocialColor(social.networkType)
|
||||
}; margin: 2px;`;
|
||||
|
||||
@@ -316,21 +316,19 @@ export const exportPersonalityToHTML = async (
|
||||
socials[0]?.alignment
|
||||
)}" valign="${getVerticalAlign(
|
||||
socials[0]?.verticalAlignment
|
||||
)}" style="padding: 4px 0;">
|
||||
<div style="display: flex; justify-content: ${getHorizontalAlign(
|
||||
)}" style="padding: 4px 0; text-align: ${getHorizontalAlign(
|
||||
socials[0]?.alignment
|
||||
)}; gap: 4px; flex-wrap: wrap;">
|
||||
)};">
|
||||
${socials
|
||||
.map(
|
||||
(social) =>
|
||||
`<a href="${social.link || "#"}" style="${getIconStyle(
|
||||
social
|
||||
)} text-decoration: none;">
|
||||
)} text-decoration: none; display: inline-block;">
|
||||
${getSocialIcon(social.networkType)}
|
||||
</a>`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user