From fcc3d9e86823975becc5c35c3b5fc6825d7fb6ee Mon Sep 17 00:00:00 2001 From: Dmitri Date: Tue, 31 Mar 2026 11:08:32 +0400 Subject: [PATCH] fixed global styles redundancy --- .../Constructor/ElementEditorPanel.tsx | 6 ---- .../DescriptionSettingsSection.tsx | 10 ------ .../DescriptionSettingsSectionCompact.tsx | 16 ---------- .../ElementSettings/StyleSettingsSection.tsx | 26 ---------------- .../StyleSettingsSectionCompact.tsx | 31 ------------------- .../src/components/ElementSettings/types.ts | 1 - .../ElementSettings/useElementSettingsForm.ts | 13 -------- .../elements/DescriptionElement.tsx | 5 ++- .../shared/useElementWrapperStyle.ts | 4 +-- frontend/src/lib/elementDefaults.ts | 6 ---- frontend/src/lib/elementStyles.ts | 4 --- .../src/pages/element-type-defaults/[id].tsx | 3 -- .../pages/project-element-defaults/[id].tsx | 3 -- frontend/src/types/constructor.ts | 1 - 14 files changed, 4 insertions(+), 125 deletions(-) diff --git a/frontend/src/components/Constructor/ElementEditorPanel.tsx b/frontend/src/components/Constructor/ElementEditorPanel.tsx index 29d039d..c7a18fc 100644 --- a/frontend/src/components/Constructor/ElementEditorPanel.tsx +++ b/frontend/src/components/Constructor/ElementEditorPanel.tsx @@ -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) diff --git a/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx b/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx index 86f03ec..cb9b8f4 100644 --- a/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx +++ b/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx @@ -19,7 +19,6 @@ const DescriptionSettingsSection: React.FC = ({ descriptionTextFontFamily, descriptionTitleColor, descriptionTextColor, - descriptionBackgroundColor, onChange, context, iconAssetOptions = [], @@ -135,15 +134,6 @@ const DescriptionSettingsSection: React.FC = ({ className='h-10 w-full' /> - - - onChange('descriptionBackgroundColor', event.target.value) - } - placeholder='e.g. transparent, #ffffff' - /> - ); diff --git a/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx index 6ca912d..afbfcde 100644 --- a/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx +++ b/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx @@ -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< } /> - -
- - - onChange('descriptionBackgroundColor', event.target.value) - } - placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)' - /> -
); }; diff --git a/frontend/src/components/ElementSettings/StyleSettingsSection.tsx b/frontend/src/components/ElementSettings/StyleSettingsSection.tsx index a2ea474..bcc99c4 100644 --- a/frontend/src/components/ElementSettings/StyleSettingsSection.tsx +++ b/frontend/src/components/ElementSettings/StyleSettingsSection.tsx @@ -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 = ({ values, @@ -241,31 +240,6 @@ const StyleSettingsSection: React.FC = ({ placeholder='e.g. #131C22 / inherit' /> - - - ); diff --git a/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx index c359040..4a235e7 100644 --- a/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx +++ b/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx @@ -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 = ({ values, @@ -337,36 +336,6 @@ const StyleSettingsSectionCompact: React.FC = ({ /> - -
- - -
); }; diff --git a/frontend/src/components/ElementSettings/types.ts b/frontend/src/components/ElementSettings/types.ts index 7bbe732..b694f62 100644 --- a/frontend/src/components/ElementSettings/types.ts +++ b/frontend/src/components/ElementSettings/types.ts @@ -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[]; diff --git a/frontend/src/components/ElementSettings/useElementSettingsForm.ts b/frontend/src/components/ElementSettings/useElementSettingsForm.ts index 941c055..7ed24b9 100644 --- a/frontend/src/components/ElementSettings/useElementSettingsForm.ts +++ b/frontend/src/components/ElementSettings/useElementSettingsForm.ts @@ -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 diff --git a/frontend/src/components/UiElements/elements/DescriptionElement.tsx b/frontend/src/components/UiElements/elements/DescriptionElement.tsx index 9fff21f..e3c9813 100644 --- a/frontend/src/components/UiElements/elements/DescriptionElement.tsx +++ b/frontend/src/components/UiElements/elements/DescriptionElement.tsx @@ -63,11 +63,10 @@ const DescriptionElement: React.FC = ({ } // Without icon: render styled text description - const bgColor = element.descriptionBackgroundColor || 'transparent'; - + // Background color is controlled via CSS Styles tab (backgroundColor property) return (
-
+

{ } descriptionTitleColor={form.state.descriptionTitleColor} descriptionTextColor={form.state.descriptionTextColor} - descriptionBackgroundColor={ - form.state.descriptionBackgroundColor - } onChange={handleTypeChange} context='global' /> diff --git a/frontend/src/pages/project-element-defaults/[id].tsx b/frontend/src/pages/project-element-defaults/[id].tsx index 0026fd1..a693917 100644 --- a/frontend/src/pages/project-element-defaults/[id].tsx +++ b/frontend/src/pages/project-element-defaults/[id].tsx @@ -526,9 +526,6 @@ const ProjectElementDefaultDetailsPage = () => { } descriptionTitleColor={form.state.descriptionTitleColor} descriptionTextColor={form.state.descriptionTextColor} - descriptionBackgroundColor={ - form.state.descriptionBackgroundColor - } onChange={handleTypeChange} context='project' /> diff --git a/frontend/src/types/constructor.ts b/frontend/src/types/constructor.ts index 30eb017..2a9686f 100644 --- a/frontend/src/types/constructor.ts +++ b/frontend/src/types/constructor.ts @@ -115,7 +115,6 @@ export interface CanvasElement extends BaseCanvasElement { descriptionTextFontFamily?: string; descriptionTitleColor?: string; descriptionTextColor?: string; - descriptionBackgroundColor?: string; navLabel?: string; navLabelFontFamily?: string; navType?: NavigationButtonKind;