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

fixed global styles redundancy

Browse Source
This commit is contained in:
Dmitri 2026-03-31 11:08:32 +04:00
parent a31af13c84
commit fcc3d9e868
14 changed files with 4 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Constructor/ElementEditorPanel.tsx
View File

@ -461,10 +461,6 @@ export function ElementEditorPanel({
descriptionTextColor={
selectedElement.descriptionTextColor || '#4B5563'
}
descriptionBackgroundColor={
selectedElement.descriptionBackgroundColor ||
'transparent'
}
iconAssetOptions={iconAssetOptions}
onChange={(prop, value) =>
onUpdateElement({ [prop]: value })
@ -611,8 +607,6 @@ export function ElementEditorPanel({
zIndex: selectedElement.zIndex || '',
backgroundColor: selectedElement.backgroundColor || '',
color: selectedElement.color || '',
fontFamily: selectedElement.fontFamily || '',
fontStretch: selectedElement.fontStretch || '',
}}
onChange={(prop, value) =>
handleCssPropertyChange(prop, value, onUpdateElement)

10
frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
View File

@ -19,7 +19,6 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
descriptionTextFontFamily,
descriptionTitleColor,
descriptionTextColor,
descriptionBackgroundColor,
onChange,
context,
iconAssetOptions = [],
@ -135,15 +134,6 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
className='h-10 w-full'
/>
</FormField>
<FormField label='Background color'>
<input
value={descriptionBackgroundColor}
onChange={(event) =>
onChange('descriptionBackgroundColor', event.target.value)
}
placeholder='e.g. transparent, #ffffff'
/>
</FormField>
</div>
</div>
);

16
frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx
View File

@ -20,7 +20,6 @@ interface DescriptionSettingsSectionCompactProps {
descriptionTextFontFamily: string;
descriptionTitleColor: string;
descriptionTextColor: string;
descriptionBackgroundColor: string;
iconAssetOptions: AssetOption[];
onChange: (prop: string, value: string) => void;
}
@ -37,7 +36,6 @@ const DescriptionSettingsSectionCompact: React.FC<
descriptionTextFontFamily,
descriptionTitleColor,
descriptionTextColor,
descriptionBackgroundColor,
iconAssetOptions,
onChange,
}) => {
@ -183,20 +181,6 @@ const DescriptionSettingsSectionCompact: React.FC<
}
/>
</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={descriptionBackgroundColor}
onChange={(event) =>
onChange('descriptionBackgroundColor', event.target.value)
}
placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)'
/>
</div>
</div>
);
};

26
frontend/src/components/ElementSettings/StyleSettingsSection.tsx
View File

@ -8,7 +8,6 @@
import React from 'react';
import FormField from '../FormField';
import type { StyleSettingsSectionProps } from './types';
import { FONT_OPTIONS, getFontByKey, getFontKeyFromValues } from '../../lib/fonts';
const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
values,
@ -241,31 +240,6 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
placeholder='e.g. #131C22 / inherit'
/>
</FormField>
<FormField label='Font family'>
<select
value={getFontKeyFromValues(values.fontFamily, values.fontStretch)}
onChange={(event) => {
const fontKey = event.target.value;
if (!fontKey) {
onChange('fontFamily', '');
onChange('fontStretch', '');
} else {
const font = getFontByKey(fontKey);
if (font) {
onChange('fontFamily', font.fontFamily);
onChange('fontStretch', font.fontStretch || '');
}
}
}}
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
</select>
</FormField>
</div>
</div>
);

31
frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
View File

@ -7,7 +7,6 @@
import React from 'react';
import type { StyleSettingsSectionProps } from './types';
import { FONT_OPTIONS, getFontByKey, getFontKeyFromValues } from '../../lib/fonts';
const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
values,
@ -337,36 +336,6 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
/>
</div>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Font family
</label>
<select
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={getFontKeyFromValues(values.fontFamily, values.fontStretch)}
onChange={(e) => {
const fontKey = e.target.value;
if (!fontKey) {
onChange('fontFamily', '');
onChange('fontStretch', '');
} else {
const font = getFontByKey(fontKey);
if (font) {
onChange('fontFamily', font.fontFamily);
onChange('fontStretch', font.fontStretch || '');
}
}
}}
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
</select>
</div>
</div>
);
};

1
frontend/src/components/ElementSettings/types.ts
View File

@ -125,7 +125,6 @@ export interface DescriptionSettingsSectionProps {
descriptionTextFontFamily: string;
descriptionTitleColor: string;
descriptionTextColor: string;
descriptionBackgroundColor: string;
onChange: (field: string, value: string) => void;
context: ElementSettingsContext;
iconAssetOptions?: AssetOption[];

13
frontend/src/components/ElementSettings/useElementSettingsForm.ts
View File

@ -68,7 +68,6 @@ interface FormState {
zIndex: string;
backgroundColor: string;
color: string;
fontFamily: string;
// Effect settings
appearAnimation: string;
@ -115,7 +114,6 @@ interface FormState {
descriptionTextFontFamily: string;
descriptionTitleColor: string;
descriptionTextColor: string;
descriptionBackgroundColor: string;
// Media settings
mediaUrl: string;
@ -167,7 +165,6 @@ const initialState: FormState = {
zIndex: '',
backgroundColor: '',
color: '',
fontFamily: '',
// Effect settings
appearAnimation: '',
appearAnimationDuration: '',
@ -207,7 +204,6 @@ const initialState: FormState = {
descriptionTextFontFamily: '',
descriptionTitleColor: '',
descriptionTextColor: '',
descriptionBackgroundColor: '',
mediaUrl: '',
mediaAutoplay: false,
mediaLoop: false,
@ -271,7 +267,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
zIndex: String(settings.zIndex || ''),
backgroundColor: String(settings.backgroundColor || ''),
color: String(settings.color || ''),
fontFamily: String(settings.fontFamily || ''),
// Effect settings
appearAnimation: String(settings.appearAnimation || ''),
appearAnimationDuration: String(settings.appearAnimationDuration || ''),
@ -326,9 +321,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
),
descriptionTitleColor: String(settings.descriptionTitleColor || ''),
descriptionTextColor: String(settings.descriptionTextColor || ''),
descriptionBackgroundColor: String(
settings.descriptionBackgroundColor || '',
),
mediaUrl: String(settings.mediaUrl || ''),
mediaAutoplay: Boolean(settings.mediaAutoplay),
mediaLoop: Boolean(settings.mediaLoop),
@ -408,7 +400,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
zIndex: state.zIndex,
backgroundColor: state.backgroundColor,
color: state.color,
fontFamily: state.fontFamily,
};
}, [state]);
@ -581,11 +572,9 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
// Additional CSS properties
const backgroundColorValue = toOptionalTrimmed(state.backgroundColor);
const colorValue = toOptionalTrimmed(state.color);
const fontFamilyValue = toOptionalTrimmed(state.fontFamily);
if (backgroundColorValue) settings.backgroundColor = backgroundColorValue;
if (colorValue) settings.color = colorValue;
if (fontFamilyValue) settings.fontFamily = fontFamilyValue;
// Effect properties
const appearAnimationValue = toOptionalTrimmed(state.appearAnimation);
@ -677,8 +666,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
state.descriptionTitleColor.trim() || '#000000';
settings.descriptionTextColor =
state.descriptionTextColor.trim() || '#4B5563';
settings.descriptionBackgroundColor =
state.descriptionBackgroundColor.trim() || 'transparent';
}
// Gallery type settings

5
frontend/src/components/UiElements/elements/DescriptionElement.tsx
View File

@ -63,11 +63,10 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
}
// Without icon: render styled text description
const bgColor = element.descriptionBackgroundColor || 'transparent';
// Background color is controlled via CSS Styles tab (backgroundColor property)
return (
<div className={className} style={style}>
<div className='p-4 rounded' style={{ backgroundColor: bgColor }}>
<div className='p-4'>
<p
className='font-bold'
style={{

4
frontend/src/components/UiElements/shared/useElementWrapperStyle.ts
View File

@ -61,8 +61,8 @@ export function useElementWrapperStyle({
const hasTransparentBackground =
(isDescriptionElementType(element.type) &&
!element.iconUrl &&
(!element.descriptionBackgroundColor ||
element.descriptionBackgroundColor === 'transparent')) ||
(!element.backgroundColor ||
element.backgroundColor === 'transparent')) ||
(isNavigationElementType(element.type) && Boolean(element.iconUrl)) ||
isTooltipElementType(element.type) ||
isGalleryElementType(element.type) ||

6
frontend/src/lib/elementDefaults.ts
View File

@ -124,7 +124,6 @@ export const TYPE_SPECIFIC_DEFAULTS: Partial<
descriptionTextFontFamily: 'inherit',
descriptionTitleColor: '#ffffff',
descriptionTextColor: '#ffffff',
descriptionBackgroundColor: 'transparent',
},
gallery: {
galleryCards: [],
@ -514,11 +513,6 @@ export const buildElementSettings = (
'descriptionTextColor',
element.descriptionTextColor,
);
addIfNotEmpty(
settings,
'descriptionBackgroundColor',
element.descriptionBackgroundColor,
);
}
// Gallery type settings

4
frontend/src/lib/elementStyles.ts
View File

@ -36,8 +36,6 @@ export interface ElementStyleProperties {
zIndex?: string;
backgroundColor?: string;
color?: string;
fontFamily?: string;
fontStretch?: string;
}
/**
@ -68,8 +66,6 @@ export const ELEMENT_STYLE_PROPS = [
'zIndex',
'backgroundColor',
'color',
'fontFamily',
'fontStretch',
] as const;
/**

3
frontend/src/pages/element-type-defaults/[id].tsx
View File

@ -341,9 +341,6 @@ const ElementTypeDefaultDetailsPage = () => {
}
descriptionTitleColor={form.state.descriptionTitleColor}
descriptionTextColor={form.state.descriptionTextColor}
descriptionBackgroundColor={
form.state.descriptionBackgroundColor
}
onChange={handleTypeChange}
context='global'
/>

3
frontend/src/pages/project-element-defaults/[id].tsx
View File

@ -526,9 +526,6 @@ const ProjectElementDefaultDetailsPage = () => {
}
descriptionTitleColor={form.state.descriptionTitleColor}
descriptionTextColor={form.state.descriptionTextColor}
descriptionBackgroundColor={
form.state.descriptionBackgroundColor
}
onChange={handleTypeChange}
context='project'
/>

1
frontend/src/types/constructor.ts
View File

@ -115,7 +115,6 @@ export interface CanvasElement extends BaseCanvasElement {
descriptionTextFontFamily?: string;
descriptionTitleColor?: string;
descriptionTextColor?: string;
descriptionBackgroundColor?: string;
navLabel?: string;
navLabelFontFamily?: string;
navType?: NavigationButtonKind;