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

updated Descriptionelement styles

Browse Source
This commit is contained in:
Dmitri 2026-03-20 11:54:30 +04:00
parent d3644125db
commit df0594f59f
2 changed files with 77 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,6 +97,10 @@ class Ui_elementsDBApi extends GenericDBApi {
descriptionText: '',
descriptionTitleFontSize: '48px',
descriptionTextFontSize: '36px',
descriptionTitleFontFamily: 'inherit',
descriptionTextFontFamily: 'inherit',
descriptionTitleColor: '#000000',
descriptionTextColor: '#4B5563',
descriptionBackgroundColor: 'transparent',
appearDelaySec: 0,
appearDurationSec: null,

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

@ -121,6 +121,10 @@ type CanvasElement = {
descriptionText?: string;
descriptionTitleFontSize?: string;
descriptionTextFontSize?: string;
descriptionTitleFontFamily?: string;
descriptionTextFontFamily?: string;
descriptionTitleColor?: string;
descriptionTextColor?: string;
descriptionBackgroundColor?: string;
navLabel?: string;
navType?: NavigationButtonKind;
@ -488,6 +492,10 @@ const createDefaultElement = (
descriptionText: '',
descriptionTitleFontSize: '48px',
descriptionTextFontSize: '36px',
descriptionTitleFontFamily: 'inherit',
descriptionTextFontFamily: 'inherit',
descriptionTitleColor: '#000000',
descriptionTextColor: '#4B5563',
descriptionBackgroundColor: 'transparent',
};
}
@ -2119,17 +2127,21 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
fontSize: element.descriptionTitleFontSize
? `calc(${element.descriptionTitleFontSize} * 0.25)`
: '12px',
fontFamily: element.descriptionTitleFontFamily || 'inherit',
color: element.descriptionTitleColor || '#000000',
}}
>
{element.descriptionTitle || 'TITLE'}
</p>
{element.descriptionText && (
<p
className='text-gray-600 line-clamp-4'
className='line-clamp-4'
style={{
fontSize: element.descriptionTextFontSize
? `calc(${element.descriptionTextFontSize} * 0.25)`
: '9px',
fontFamily: element.descriptionTextFontFamily || 'inherit',
color: element.descriptionTextColor || '#4B5563',
}}
>
{element.descriptionText}
@ -3486,6 +3498,66 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
placeholder='e.g. 36px'
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Title font family
</label>
<input
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={selectedElement.descriptionTitleFontFamily || 'inherit'}
onChange={(event) =>
updateSelectedElement({
descriptionTitleFontFamily: event.target.value,
})
}
placeholder='e.g. Arial, Helvetica, sans-serif'
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Text font family
</label>
<input
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={selectedElement.descriptionTextFontFamily || 'inherit'}
onChange={(event) =>
updateSelectedElement({
descriptionTextFontFamily: event.target.value,
})
}
placeholder='e.g. Arial, Helvetica, sans-serif'
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Title color
</label>
<input
type='color'
className='w-full h-8 rounded border border-gray-300 px-1 py-1'
value={selectedElement.descriptionTitleColor || '#000000'}
onChange={(event) =>
updateSelectedElement({
descriptionTitleColor: event.target.value,
})
}
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Text color
</label>
<input
type='color'
className='w-full h-8 rounded border border-gray-300 px-1 py-1'
value={selectedElement.descriptionTextColor || '#4B5563'}
onChange={(event) =>
updateSelectedElement({
descriptionTextColor: event.target.value,
})
}
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Background color