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

updated Description element default styles

Browse Source
This commit is contained in:
Dmitri 2026-03-20 09:59:49 +04:00
parent b2f641a398
commit f839e6c562
2 changed files with 94 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/src/db/api/ui_elements.js
View File

@ -93,8 +93,11 @@ class Ui_elementsDBApi extends GenericDBApi {
sort_order: 4,
default_settings_json: {
label: 'Description',
descriptionTitle: 'Description title',
descriptionText: 'Description text',
descriptionTitle: 'TITLE',
descriptionText: '',
descriptionTitleFontSize: '48px',
descriptionTextFontSize: '36px',
descriptionBackgroundColor: 'transparent',
appearDelaySec: 0,
appearDurationSec: null,
},

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

@ -31,6 +31,8 @@ type TourPage = {
slug?: string;
sort_order?: number;
environment?: string;
source_key?: string;
requires_auth?: boolean;
ui_schema_json?: string;
background_image_url?: string;
background_video_url?: string;
@ -117,6 +119,9 @@ type CanvasElement = {
tooltipText?: string;
descriptionTitle?: string;
descriptionText?: string;
descriptionTitleFontSize?: string;
descriptionTextFontSize?: string;
descriptionBackgroundColor?: string;
navLabel?: string;
navType?: NavigationButtonKind;
targetPageId?: string;
@ -479,8 +484,11 @@ const createDefaultElement = (
return {
...base,
iconUrl: '',
descriptionTitle: 'Description title',
descriptionText: 'Description text',
descriptionTitle: 'TITLE',
descriptionText: '',
descriptionTitleFontSize: '48px',
descriptionTextFontSize: '36px',
descriptionBackgroundColor: 'transparent',
};
}
@ -515,11 +523,16 @@ const mergeElementWithDefaults = (
if (!defaults) return element;
const preferElementValues = Boolean(options?.preferElementValues);
const base = preferElementValues ? defaults : element;
const override = preferElementValues ? element : defaults;
const merged: CanvasElement = {
...(preferElementValues ? defaults : element),
...(preferElementValues ? element : defaults),
...base,
...override,
id: element.id,
type: element.type,
label: element.label || defaults.label || element.type,
xPercent: element.xPercent ?? defaults.xPercent ?? 50,
yPercent: element.yPercent ?? defaults.yPercent ?? 50,
};
merged.xPercent = clamp(Number(merged.xPercent ?? element.xPercent), 0, 100);
@ -691,7 +704,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
useState<EditorMenuItem>('none');
const [transitionPreview, setTransitionPreview] =
useState<TransitionPreviewState | null>(null);
const [pendingNavigationPageId, setPendingNavigationPageId] = useState('');
const [_pendingNavigationPageId, setPendingNavigationPageId] = useState('');
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
@ -2094,14 +2107,34 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
);
}
const bgColor = element.descriptionBackgroundColor || 'transparent';
return (
<div className='max-w-[220px] text-left'>
<p className='text-[11px] font-bold'>
{element.descriptionTitle}
</p>
<p className='text-[10px] text-gray-600 line-clamp-4'>
{element.descriptionText || 'Description text'}
<div
className='max-w-[220px] text-left p-2 rounded'
style={{ backgroundColor: bgColor }}
>
<p
className='font-bold'
style={{
fontSize: element.descriptionTitleFontSize
? `calc(${element.descriptionTitleFontSize} * 0.25)`
: '12px',
}}
>
{element.descriptionTitle || 'TITLE'}
</p>
{element.descriptionText && (
<p
className='text-gray-600 line-clamp-4'
style={{
fontSize: element.descriptionTextFontSize
? `calc(${element.descriptionTextFontSize} * 0.25)`
: '9px',
}}
>
{element.descriptionText}
</p>
)}
</div>
);
}
@ -3414,6 +3447,51 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
}
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Title font size
</label>
<input
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={selectedElement.descriptionTitleFontSize || '48px'}
onChange={(event) =>
updateSelectedElement({
descriptionTitleFontSize: event.target.value,
})
}
placeholder='e.g. 48px'
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Text font size
</label>
<input
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={selectedElement.descriptionTextFontSize || '36px'}
onChange={(event) =>
updateSelectedElement({
descriptionTextFontSize: event.target.value,
})
}
placeholder='e.g. 36px'
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Background color
</label>
<input
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={selectedElement.descriptionBackgroundColor || 'transparent'}
onChange={(event) =>
updateSelectedElement({
descriptionBackgroundColor: event.target.value,
})
}
placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)'
/>
</div>
</div>
)}