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

improved defaults for Description element

Browse Source
This commit is contained in:
Dmitri 2026-03-20 12:22:12 +04:00
parent df0594f59f
commit c18220d6ba
4 changed files with 171 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/constructor.tsx
View File

@ -2118,7 +2118,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
const bgColor = element.descriptionBackgroundColor || 'transparent';
return (
<div
className='max-w-[220px] text-left p-2 rounded'
className='w-full text-left p-2 rounded'
style={{ backgroundColor: bgColor }}
>
<p

88
frontend/src/pages/page_elements/page_elements-project-edit.tsx
View File

@ -83,6 +83,13 @@ type ConstructorElement = {
tooltipText?: string;
descriptionTitle?: string;
descriptionText?: string;
descriptionTitleFontSize?: string;
descriptionTextFontSize?: string;
descriptionTitleFontFamily?: string;
descriptionTextFontFamily?: string;
descriptionTitleColor?: string;
descriptionTextColor?: string;
descriptionBackgroundColor?: string;
mediaUrl?: string;
mediaAutoplay?: boolean;
mediaLoop?: boolean;
@ -224,6 +231,13 @@ const PageElementsProjectEditPage = () => {
const [tooltipText, setTooltipText] = useState('');
const [descriptionTitle, setDescriptionTitle] = useState('');
const [descriptionText, setDescriptionText] = useState('');
const [descriptionTitleFontSize, setDescriptionTitleFontSize] = useState('');
const [descriptionTextFontSize, setDescriptionTextFontSize] = useState('');
const [descriptionTitleFontFamily, setDescriptionTitleFontFamily] = useState('');
const [descriptionTextFontFamily, setDescriptionTextFontFamily] = useState('');
const [descriptionTitleColor, setDescriptionTitleColor] = useState('');
const [descriptionTextColor, setDescriptionTextColor] = useState('');
const [descriptionBackgroundColor, setDescriptionBackgroundColor] = useState('');
const [mediaUrl, setMediaUrl] = useState('');
const [mediaAutoplay, setMediaAutoplay] = useState(false);
const [mediaLoop, setMediaLoop] = useState(false);
@ -251,7 +265,7 @@ const PageElementsProjectEditPage = () => {
setFontWeight(String(item.fontWeight || ''));
setBorder(extractNumericValue(item.border));
setBorderRadius(extractNumericValue(item.borderRadius));
setOpacity(item.opacity === '0' || item.opacity === 0 ? '0' : String(item.opacity || ''));
setOpacity(item.opacity === '0' ? '0' : String(item.opacity || ''));
setBoxShadow(String(item.boxShadow || ''));
setDisplay(String(item.display || ''));
setPosition(String(item.position || ''));
@ -273,6 +287,13 @@ const PageElementsProjectEditPage = () => {
setTooltipText(String(item.tooltipText || ''));
setDescriptionTitle(String(item.descriptionTitle || ''));
setDescriptionText(String(item.descriptionText || ''));
setDescriptionTitleFontSize(String(item.descriptionTitleFontSize || ''));
setDescriptionTextFontSize(String(item.descriptionTextFontSize || ''));
setDescriptionTitleFontFamily(String(item.descriptionTitleFontFamily || ''));
setDescriptionTextFontFamily(String(item.descriptionTextFontFamily || ''));
setDescriptionTitleColor(String(item.descriptionTitleColor || ''));
setDescriptionTextColor(String(item.descriptionTextColor || ''));
setDescriptionBackgroundColor(String(item.descriptionBackgroundColor || ''));
setMediaUrl(String(item.mediaUrl || ''));
setMediaAutoplay(Boolean(item.mediaAutoplay));
setMediaLoop(Boolean(item.mediaLoop));
@ -484,6 +505,13 @@ const PageElementsProjectEditPage = () => {
nextElement.iconUrl = iconUrl.trim();
nextElement.descriptionTitle = descriptionTitle.trim();
nextElement.descriptionText = descriptionText;
nextElement.descriptionTitleFontSize = descriptionTitleFontSize.trim() || '48px';
nextElement.descriptionTextFontSize = descriptionTextFontSize.trim() || '36px';
nextElement.descriptionTitleFontFamily = descriptionTitleFontFamily.trim() || 'inherit';
nextElement.descriptionTextFontFamily = descriptionTextFontFamily.trim() || 'inherit';
nextElement.descriptionTitleColor = descriptionTitleColor.trim() || '#000000';
nextElement.descriptionTextColor = descriptionTextColor.trim() || '#4B5563';
nextElement.descriptionBackgroundColor = descriptionBackgroundColor.trim() || 'transparent';
}
if (isGalleryType) {
@ -879,6 +907,64 @@ const PageElementsProjectEditPage = () => {
/>
</FormField>
</div>
<FormField label='Title font size'>
<input
value={descriptionTitleFontSize}
onChange={(event) => setDescriptionTitleFontSize(event.target.value)}
disabled={!hasUpdatePermission}
placeholder='e.g. 48px'
/>
</FormField>
<FormField label='Text font size'>
<input
value={descriptionTextFontSize}
onChange={(event) => setDescriptionTextFontSize(event.target.value)}
disabled={!hasUpdatePermission}
placeholder='e.g. 36px'
/>
</FormField>
<FormField label='Title font family'>
<input
value={descriptionTitleFontFamily}
onChange={(event) => setDescriptionTitleFontFamily(event.target.value)}
disabled={!hasUpdatePermission}
placeholder='e.g. Arial, sans-serif'
/>
</FormField>
<FormField label='Text font family'>
<input
value={descriptionTextFontFamily}
onChange={(event) => setDescriptionTextFontFamily(event.target.value)}
disabled={!hasUpdatePermission}
placeholder='e.g. Arial, sans-serif'
/>
</FormField>
<FormField label='Title color'>
<input
type='color'
value={descriptionTitleColor || '#000000'}
onChange={(event) => setDescriptionTitleColor(event.target.value)}
disabled={!hasUpdatePermission}
className='h-10 w-full'
/>
</FormField>
<FormField label='Text color'>
<input
type='color'
value={descriptionTextColor || '#4B5563'}
onChange={(event) => setDescriptionTextColor(event.target.value)}
disabled={!hasUpdatePermission}
className='h-10 w-full'
/>
</FormField>
<FormField label='Background color'>
<input
value={descriptionBackgroundColor}
onChange={(event) => setDescriptionBackgroundColor(event.target.value)}
disabled={!hasUpdatePermission}
placeholder='e.g. transparent, #ffffff'
/>
</FormField>
</div>
</CardBox>
) : null}

83
frontend/src/pages/ui-elements/[id].tsx
View File

@ -162,6 +162,13 @@ const UiElementDetailsPage = () => {
const [tooltipText, setTooltipText] = useState('');
const [descriptionTitle, setDescriptionTitle] = useState('');
const [descriptionText, setDescriptionText] = useState('');
const [descriptionTitleFontSize, setDescriptionTitleFontSize] = useState('');
const [descriptionTextFontSize, setDescriptionTextFontSize] = useState('');
const [descriptionTitleFontFamily, setDescriptionTitleFontFamily] = useState('');
const [descriptionTextFontFamily, setDescriptionTextFontFamily] = useState('');
const [descriptionTitleColor, setDescriptionTitleColor] = useState('');
const [descriptionTextColor, setDescriptionTextColor] = useState('');
const [descriptionBackgroundColor, setDescriptionBackgroundColor] = useState('');
const [mediaUrl, setMediaUrl] = useState('');
const [mediaAutoplay, setMediaAutoplay] = useState(false);
const [mediaLoop, setMediaLoop] = useState(false);
@ -218,6 +225,13 @@ const UiElementDetailsPage = () => {
setTooltipText(String(settings.tooltipText || ''));
setDescriptionTitle(String(settings.descriptionTitle || ''));
setDescriptionText(String(settings.descriptionText || ''));
setDescriptionTitleFontSize(String(settings.descriptionTitleFontSize || ''));
setDescriptionTextFontSize(String(settings.descriptionTextFontSize || ''));
setDescriptionTitleFontFamily(String(settings.descriptionTitleFontFamily || ''));
setDescriptionTextFontFamily(String(settings.descriptionTextFontFamily || ''));
setDescriptionTitleColor(String(settings.descriptionTitleColor || ''));
setDescriptionTextColor(String(settings.descriptionTextColor || ''));
setDescriptionBackgroundColor(String(settings.descriptionBackgroundColor || ''));
setMediaUrl(String(settings.mediaUrl || ''));
setMediaAutoplay(Boolean(settings.mediaAutoplay));
setMediaLoop(Boolean(settings.mediaLoop));
@ -416,6 +430,13 @@ const UiElementDetailsPage = () => {
defaultSettings.iconUrl = iconUrl.trim();
defaultSettings.descriptionTitle = descriptionTitle.trim();
defaultSettings.descriptionText = descriptionText;
defaultSettings.descriptionTitleFontSize = descriptionTitleFontSize.trim() || '48px';
defaultSettings.descriptionTextFontSize = descriptionTextFontSize.trim() || '36px';
defaultSettings.descriptionTitleFontFamily = descriptionTitleFontFamily.trim() || 'inherit';
defaultSettings.descriptionTextFontFamily = descriptionTextFontFamily.trim() || 'inherit';
defaultSettings.descriptionTitleColor = descriptionTitleColor.trim() || '#000000';
defaultSettings.descriptionTextColor = descriptionTextColor.trim() || '#4B5563';
defaultSettings.descriptionBackgroundColor = descriptionBackgroundColor.trim() || 'transparent';
}
if (isGalleryType) {
@ -481,8 +502,15 @@ const UiElementDetailsPage = () => {
carouselSlides,
currentElementType,
descriptionText,
display,
descriptionTitle,
descriptionTitleFontSize,
descriptionTextFontSize,
descriptionTitleFontFamily,
descriptionTextFontFamily,
descriptionTitleColor,
descriptionTextColor,
descriptionBackgroundColor,
display,
fontSize,
fontWeight,
gap,
@ -790,6 +818,59 @@ const UiElementDetailsPage = () => {
className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
/>
</FormField>
<div className='grid gap-3 md:grid-cols-2'>
<FormField label='Title font size'>
<input
value={descriptionTitleFontSize}
onChange={(event) => setDescriptionTitleFontSize(event.target.value)}
placeholder='e.g. 48px'
/>
</FormField>
<FormField label='Text font size'>
<input
value={descriptionTextFontSize}
onChange={(event) => setDescriptionTextFontSize(event.target.value)}
placeholder='e.g. 36px'
/>
</FormField>
<FormField label='Title font family'>
<input
value={descriptionTitleFontFamily}
onChange={(event) => setDescriptionTitleFontFamily(event.target.value)}
placeholder='e.g. Arial, sans-serif'
/>
</FormField>
<FormField label='Text font family'>
<input
value={descriptionTextFontFamily}
onChange={(event) => setDescriptionTextFontFamily(event.target.value)}
placeholder='e.g. Arial, sans-serif'
/>
</FormField>
<FormField label='Title color'>
<input
type='color'
value={descriptionTitleColor || '#000000'}
onChange={(event) => setDescriptionTitleColor(event.target.value)}
className='h-10 w-full'
/>
</FormField>
<FormField label='Text color'>
<input
type='color'
value={descriptionTextColor || '#4B5563'}
onChange={(event) => setDescriptionTextColor(event.target.value)}
className='h-10 w-full'
/>
</FormField>
<FormField label='Background color'>
<input
value={descriptionBackgroundColor}
onChange={(event) => setDescriptionBackgroundColor(event.target.value)}
placeholder='e.g. transparent, #ffffff'
/>
</FormField>
</div>
</>
) : null}

2
frontend/tsconfig.tsbuildinfo
View File

File diff suppressed because one or more lines are too long