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

fixed font selection issue

Browse Source
This commit is contained in:
Dmitri 2026-03-31 10:26:13 +04:00
parent e92ab8143b
commit e6b4fe69c7
22 changed files with 175 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -366,6 +366,7 @@ export function ElementEditorPanel({
}
navType={selectedElement.navType}
navLabel={selectedElement.navLabel || ''}
navLabelFontFamily={selectedElement.navLabelFontFamily || ''}
navDisabled={selectedElement.navDisabled || false}
iconUrl={selectedElement.iconUrl || ''}
targetPageSlug={selectedElement.targetPageSlug || ''}
@ -506,8 +507,8 @@ export function ElementEditorPanel({
galleryTitleFontFamily={
selectedElement.galleryTitleFontFamily || ''
}
galleryCardFontFamily={
selectedElement.galleryCardFontFamily || ''
galleryTextFontFamily={
selectedElement.galleryTextFontFamily || ''
}
galleryCards={selectedElement.galleryCards || []}
imageAssetOptions={imageAssetOptions}

2
frontend/src/components/ElementSettings/CarouselSettingsSection.tsx
View File

@ -98,7 +98,7 @@ const CarouselSettingsSection: React.FC<CarouselSettingsSectionProps> = ({
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

2
frontend/src/components/ElementSettings/CarouselSettingsSectionCompact.tsx
View File

@ -97,7 +97,7 @@ const CarouselSettingsSectionCompact: React.FC<
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

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

@ -94,7 +94,7 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
@ -109,7 +109,7 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

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

@ -129,7 +129,7 @@ const DescriptionSettingsSectionCompact: React.FC<
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
@ -149,7 +149,7 @@ const DescriptionSettingsSectionCompact: React.FC<
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

12
frontend/src/components/ElementSettings/GallerySettingsSection.tsx
View File

@ -16,7 +16,7 @@ import { FONT_OPTIONS } from '../../lib/fonts';
const GallerySettingsSection: React.FC<GallerySettingsSectionProps> = ({
galleryCards,
galleryTitleFontFamily,
galleryCardFontFamily,
galleryTextFontFamily,
onAddCard,
onRemoveCard,
onUpdateCard,
@ -40,22 +40,22 @@ const GallerySettingsSection: React.FC<GallerySettingsSectionProps> = ({
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
</select>
</FormField>
<FormField label='Card font family'>
<FormField label='Text font family'>
<select
value={galleryCardFontFamily}
value={galleryTextFontFamily}
onChange={(event) =>
onChange('galleryCardFontFamily', event.target.value)
onChange('galleryTextFontFamily', event.target.value)
}
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

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

@ -22,7 +22,7 @@ interface GallerySettingsSectionCompactProps {
galleryColumns: number;
// Font settings
galleryTitleFontFamily: string;
galleryCardFontFamily: string;
galleryTextFontFamily: string;
// Cards
galleryCards: GalleryCard[];
imageAssetOptions: AssetOption[];
@ -32,7 +32,7 @@ interface GallerySettingsSectionCompactProps {
galleryTitle?: string;
galleryColumns?: number;
galleryTitleFontFamily?: string;
galleryCardFontFamily?: string;
galleryTextFontFamily?: string;
}) => void;
onAddInfoSpan: () => void;
onUpdateInfoSpan: (spanId: string, text: string) => void;
@ -51,7 +51,7 @@ const GallerySettingsSectionCompact: React.FC<
galleryInfoSpans,
galleryColumns,
galleryTitleFontFamily,
galleryCardFontFamily,
galleryTextFontFamily,
galleryCards,
imageAssetOptions,
onUpdateHeader,
@ -123,7 +123,7 @@ const GallerySettingsSectionCompact: React.FC<
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
@ -131,17 +131,17 @@ const GallerySettingsSectionCompact: React.FC<
</div>
<div>
<label className='text-[10px] text-gray-600'>Card font:</label>
<label className='text-[10px] text-gray-600'>Text font:</label>
<select
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={galleryCardFontFamily}
value={galleryTextFontFamily}
onChange={(event) =>
onUpdateHeader({ galleryCardFontFamily: event.target.value })
onUpdateHeader({ galleryTextFontFamily: event.target.value })
}
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

18
frontend/src/components/ElementSettings/NavigationSettingsSection.tsx
View File

@ -7,10 +7,12 @@
import React from 'react';
import FormField from '../FormField';
import type { NavigationSettingsSectionProps } from './types';
import { FONT_OPTIONS } from '../../lib/fonts';
const NavigationSettingsSection: React.FC<NavigationSettingsSectionProps> = ({
iconUrl,
navLabel,
navLabelFontFamily,
navType,
navDisabled,
targetPageId,
@ -64,6 +66,22 @@ const NavigationSettingsSection: React.FC<NavigationSettingsSectionProps> = ({
/>
</FormField>
<FormField label='Label font family'>
<select
value={navLabelFontFamily}
onChange={(event) =>
onChange('navLabelFontFamily', event.target.value)
}
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
</select>
</FormField>
<FormField label='Navigation type'>
<select
value={navType}

21
frontend/src/components/ElementSettings/NavigationSettingsSectionCompact.tsx
View File

@ -13,6 +13,7 @@ import type {
CanvasElementType,
} from '../../types/constructor';
import { addFallbackAssetOption } from '../../lib/constructorHelpers';
import { FONT_OPTIONS } from '../../lib/fonts';
type NavigationElementType = Extract<
CanvasElementType,
@ -23,6 +24,7 @@ interface NavigationSettingsSectionCompactProps {
type: NavigationElementType;
navType?: NavigationButtonKind;
navLabel: string;
navLabelFontFamily: string;
navDisabled: boolean;
iconUrl: string;
targetPageSlug: string;
@ -58,6 +60,7 @@ const NavigationSettingsSectionCompact: React.FC<
type,
navType,
navLabel,
navLabelFontFamily,
navDisabled,
iconUrl,
targetPageSlug,
@ -123,6 +126,24 @@ const NavigationSettingsSectionCompact: React.FC<
/>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Label font
</label>
<select
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={navLabelFontFamily}
onChange={(event) => onChange('navLabelFontFamily', event.target.value)}
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
</select>
</div>
<div>
<label className='flex items-center gap-2 text-[11px] font-semibold text-gray-600'>
<input

4
frontend/src/components/ElementSettings/TooltipSettingsSection.tsx
View File

@ -71,7 +71,7 @@ const TooltipSettingsSection: React.FC<TooltipSettingsSectionProps> = ({
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
@ -86,7 +86,7 @@ const TooltipSettingsSection: React.FC<TooltipSettingsSectionProps> = ({
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

4
frontend/src/components/ElementSettings/TooltipSettingsSectionCompact.tsx
View File

@ -91,7 +91,7 @@ const TooltipSettingsSectionCompact: React.FC<
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}
@ -111,7 +111,7 @@ const TooltipSettingsSectionCompact: React.FC<
>
<option value=''>Not set</option>
{FONT_OPTIONS.map((font) => (
<option key={font.key} value={font.fontFamily}>
<option key={font.key} value={font.key}>
{font.label}
</option>
))}

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

@ -83,6 +83,7 @@ export interface CommonSettingsSectionProps {
export interface NavigationSettingsSectionProps {
iconUrl: string;
navLabel: string;
navLabelFontFamily: string;
navType: 'forward' | 'back';
navDisabled: boolean;
targetPageId: string;
@ -152,7 +153,7 @@ export interface MediaSettingsSectionProps {
export interface GallerySettingsSectionProps {
galleryCards: GalleryCard[];
galleryTitleFontFamily: string;
galleryCardFontFamily: string;
galleryTextFontFamily: string;
onAddCard: () => void;
onRemoveCard: (cardId: string) => void;
onUpdateCard: (
@ -177,7 +178,7 @@ export interface GallerySettingsSectionCompactProps {
galleryColumns: number;
// Font settings
galleryTitleFontFamily: string;
galleryCardFontFamily: string;
galleryTextFontFamily: string;
// Cards
galleryCards: GalleryCard[];
imageAssetOptions: AssetOption[];
@ -187,7 +188,7 @@ export interface GallerySettingsSectionCompactProps {
galleryTitle?: string;
galleryColumns?: number;
galleryTitleFontFamily?: string;
galleryCardFontFamily?: string;
galleryTextFontFamily?: string;
}) => void;
// Info span handlers
onAddInfoSpan: () => void;

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

@ -91,6 +91,7 @@ interface FormState {
// Navigation settings
iconUrl: string;
navLabel: string;
navLabelFontFamily: string;
navType: 'forward' | 'back';
navDisabled: boolean;
targetPageId: string;
@ -129,7 +130,7 @@ interface FormState {
// Gallery settings
galleryTitleFontFamily: string;
galleryCardFontFamily: string;
galleryTextFontFamily: string;
// Complex arrays
galleryCards: GalleryCard[];
@ -186,6 +187,7 @@ const initialState: FormState = {
activeBackgroundColor: '',
iconUrl: '',
navLabel: '',
navLabelFontFamily: '',
navType: 'forward',
navDisabled: false,
targetPageId: '',
@ -214,7 +216,7 @@ const initialState: FormState = {
carouselNextIconUrl: '',
carouselCaptionFontFamily: '',
galleryTitleFontFamily: '',
galleryCardFontFamily: '',
galleryTextFontFamily: '',
galleryCards: [],
carouselSlides: [],
};
@ -295,6 +297,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
: String(settings.appearDurationSec),
iconUrl: String(settings.iconUrl || ''),
navLabel: String(settings.navLabel || ''),
navLabelFontFamily: String(settings.navLabelFontFamily || ''),
navType: settings.navType === 'back' ? 'back' : 'forward',
navDisabled: Boolean(settings.navDisabled),
targetPageId: String(settings.targetPageId || ''),
@ -334,7 +337,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
carouselNextIconUrl: String(settings.carouselNextIconUrl || ''),
carouselCaptionFontFamily: String(settings.carouselCaptionFontFamily || ''),
galleryTitleFontFamily: String(settings.galleryTitleFontFamily || ''),
galleryCardFontFamily: String(settings.galleryCardFontFamily || ''),
galleryTextFontFamily: String(settings.galleryTextFontFamily || ''),
galleryCards: Array.isArray(settings.galleryCards)
? settings.galleryCards.map(
(card: Record<string, unknown>, index: number) => ({
@ -638,6 +641,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
if (isNavigationType) {
settings.iconUrl = state.iconUrl.trim();
settings.navLabel = state.navLabel.trim();
settings.navLabelFontFamily = state.navLabelFontFamily.trim();
settings.navType = state.navType;
settings.navDisabled = state.navDisabled;
settings.targetPageId = state.targetPageId.trim();
@ -686,7 +690,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
description: card.description,
}));
settings.galleryTitleFontFamily = state.galleryTitleFontFamily.trim();
settings.galleryCardFontFamily = state.galleryCardFontFamily.trim();
settings.galleryTextFontFamily = state.galleryTextFontFamily.trim();
}
// Carousel type settings

11
frontend/src/components/UiElements/elements/CarouselElement.tsx
View File

@ -5,10 +5,11 @@
* Renders with unified wrapper styling + content.
*/
import React from 'react';
import React, { useMemo } from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement, CarouselSlide } from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
import { getFontByKey, getFontStyle } from '../../../lib/fonts';
interface CarouselElementProps {
element: CanvasElement;
@ -27,6 +28,14 @@ const CarouselElement: React.FC<CarouselElementProps> = ({
const slides: CarouselSlide[] = element.carouselSlides || [];
const firstSlide = slides[0];
// Resolve font key to full CSS style (including fontStretch for condensed variants)
const captionFontStyle = useMemo(() => {
const fontKey = element.carouselCaptionFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.carouselCaptionFontFamily]);
return (
<div className={className} style={style}>
<div className='relative w-full h-full min-w-[120px] min-h-[80px]'>

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

@ -5,10 +5,11 @@
* Renders with unified wrapper styling + content.
*/
import React from 'react';
import React, { useMemo } from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement } from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
import { getFontByKey, getFontStyle } from '../../../lib/fonts';
interface DescriptionElementProps {
element: CanvasElement;
@ -25,6 +26,21 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
}) => {
const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
// Resolve font keys to full CSS styles (including fontStretch for condensed variants)
const titleFontStyle = useMemo(() => {
const fontKey = element.descriptionTitleFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.descriptionTitleFontFamily]);
const textFontStyle = useMemo(() => {
const fontKey = element.descriptionTextFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.descriptionTextFontFamily]);
// With icon: render image
if (element.iconUrl) {
const imgStyle: CSSProperties = {
@ -56,8 +72,8 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
className='font-bold'
style={{
fontSize: element.descriptionTitleFontSize || '24px',
fontFamily: element.descriptionTitleFontFamily || 'inherit',
color: element.descriptionTitleColor || '#ffffff',
...titleFontStyle,
}}
>
{element.descriptionTitle || ''}
@ -66,8 +82,8 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
<p
style={{
fontSize: element.descriptionTextFontSize || '16px',
fontFamily: element.descriptionTextFontFamily || 'inherit',
color: element.descriptionTextColor || '#ffffff',
...textFontStyle,
}}
>
{element.descriptionText}

29
frontend/src/components/UiElements/elements/GalleryElement.tsx
View File

@ -5,7 +5,7 @@
* Renders with unified wrapper styling + content.
*/
import React from 'react';
import React, { useMemo } from 'react';
import type { CSSProperties } from 'react';
import type {
CanvasElement,
@ -13,6 +13,7 @@ import type {
GalleryInfoSpan,
} from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
import { getFontByKey, getFontStyle } from '../../../lib/fonts';
interface GalleryElementProps {
element: CanvasElement;
@ -36,6 +37,21 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
const title = element.galleryTitle;
const columns = element.galleryColumns || 3;
// Resolve font keys to full CSS styles (including fontStretch for condensed variants)
const titleFontStyle = useMemo(() => {
const fontKey = element.galleryTitleFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.galleryTitleFontFamily]);
const textFontStyle = useMemo(() => {
const fontKey = element.galleryTextFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.galleryTextFontFamily]);
return (
<div className={className} style={style}>
<div className='flex flex-col gap-2 p-3 bg-black/60 rounded-xl min-w-[200px] backdrop-blur-sm'>
@ -52,7 +68,10 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
{/* Title */}
{title && (
<div className='bg-amber-50 text-slate-800 text-center py-2 px-3 rounded-lg font-semibold text-sm'>
<div
className='bg-amber-50 text-slate-800 text-center py-2 px-3 rounded-lg font-semibold text-sm'
style={titleFontStyle}
>
{title}
</div>
)}
@ -67,6 +86,7 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
<div
key={span.id}
className='bg-slate-700 text-amber-50 text-center py-2 px-2 rounded-lg text-xs font-medium'
style={textFontStyle}
>
{span.text}
</div>
@ -106,7 +126,10 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
)}
{card.title && (
<div className='absolute inset-0 flex items-center justify-center'>
<span className='text-white text-xs font-bold drop-shadow-lg'>
<span
className='text-white text-xs font-bold drop-shadow-lg'
style={textFontStyle}
>
{card.title}
</span>
</div>

13
frontend/src/components/UiElements/elements/NavigationElement.tsx
View File

@ -5,10 +5,11 @@
* Renders with unified wrapper styling + content.
*/
import React from 'react';
import React, { useMemo } from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement } from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
import { getFontByKey, getFontStyle } from '../../../lib/fonts';
interface NavigationElementProps {
element: CanvasElement;
@ -25,6 +26,14 @@ const NavigationElement: React.FC<NavigationElementProps> = ({
}) => {
const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
// Resolve font key to full CSS style (including fontStretch for condensed variants)
const labelFontStyle = useMemo(() => {
const fontKey = element.navLabelFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.navLabelFontFamily]);
// With icon: render image
if (element.iconUrl) {
const imgStyle: CSSProperties = {
@ -49,7 +58,7 @@ const NavigationElement: React.FC<NavigationElementProps> = ({
// Without icon: render text label
return (
<div className={className} style={style}>
<span className='px-4 py-2 text-sm'>
<span className='px-4 py-2 text-sm' style={labelFontStyle}>
{element.navLabel ||
(element.type === 'navigation_next' ? 'Next' : 'Back')}
</span>

26
frontend/src/components/UiElements/elements/TooltipElement.tsx
View File

@ -5,10 +5,11 @@
* Renders with unified wrapper styling + content.
*/
import React from 'react';
import React, { useMemo } from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement } from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
import { getFontByKey, getFontStyle } from '../../../lib/fonts';
interface TooltipElementProps {
element: CanvasElement;
@ -25,6 +26,21 @@ const TooltipElement: React.FC<TooltipElementProps> = ({
}) => {
const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
// Resolve font keys to full CSS styles (including fontStretch for condensed variants)
const titleFontStyle = useMemo(() => {
const fontKey = element.tooltipTitleFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.tooltipTitleFontFamily]);
const textFontStyle = useMemo(() => {
const fontKey = element.tooltipTextFontFamily;
if (!fontKey) return {};
const font = getFontByKey(fontKey);
return font ? getFontStyle(font) : { fontFamily: fontKey };
}, [element.tooltipTextFontFamily]);
// With icon: render image
if (element.iconUrl) {
const imgStyle: CSSProperties = {
@ -50,8 +66,12 @@ const TooltipElement: React.FC<TooltipElementProps> = ({
return (
<div className={className} style={style}>
<div className='p-3 max-w-[200px]'>
<p className='font-bold text-sm'>{element.tooltipTitle}</p>
<p className='text-xs opacity-70'>{element.tooltipText}</p>
<p className='font-bold text-sm' style={titleFontStyle}>
{element.tooltipTitle}
</p>
<p className='text-xs opacity-70' style={textFontStyle}>
{element.tooltipText}
</p>
</div>
</div>
);

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

@ -538,8 +538,8 @@ export const buildElementSettings = (
);
addIfNotEmpty(
settings,
'galleryCardFontFamily',
element.galleryCardFontFamily,
'galleryTextFontFamily',
element.galleryTextFontFamily,
);
}

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

@ -297,6 +297,7 @@ const ElementTypeDefaultDetailsPage = () => {
<NavigationSettingsSection
iconUrl={form.state.iconUrl}
navLabel={form.state.navLabel}
navLabelFontFamily={form.state.navLabelFontFamily}
navType={form.state.navType}
navDisabled={form.state.navDisabled}
targetPageId={form.state.targetPageId}
@ -352,7 +353,7 @@ const ElementTypeDefaultDetailsPage = () => {
<GallerySettingsSection
galleryCards={form.state.galleryCards}
galleryTitleFontFamily={form.state.galleryTitleFontFamily}
galleryCardFontFamily={form.state.galleryCardFontFamily}
galleryTextFontFamily={form.state.galleryTextFontFamily}
onAddCard={form.addGalleryCard}
onRemoveCard={form.removeGalleryCard}
onUpdateCard={form.updateGalleryCard}

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

@ -483,6 +483,7 @@ const ProjectElementDefaultDetailsPage = () => {
<NavigationSettingsSection
iconUrl={form.state.iconUrl}
navLabel={form.state.navLabel}
navLabelFontFamily={form.state.navLabelFontFamily}
navType={form.state.navType}
navDisabled={form.state.navDisabled}
targetPageId={form.state.targetPageId}
@ -537,7 +538,7 @@ const ProjectElementDefaultDetailsPage = () => {
<GallerySettingsSection
galleryCards={form.state.galleryCards}
galleryTitleFontFamily={form.state.galleryTitleFontFamily}
galleryCardFontFamily={form.state.galleryCardFontFamily}
galleryTextFontFamily={form.state.galleryTextFontFamily}
onAddCard={form.addGalleryCard}
onRemoveCard={form.removeGalleryCard}
onUpdateCard={form.updateGalleryCard}

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

@ -98,7 +98,7 @@ export interface CanvasElement extends BaseCanvasElement {
galleryInfoSpans?: GalleryInfoSpan[];
galleryColumns?: number;
galleryTitleFontFamily?: string;
galleryCardFontFamily?: string;
galleryTextFontFamily?: string;
carouselSlides?: CarouselSlide[];
carouselCaptionFontFamily?: string;
carouselPrevIconUrl?: string;
@ -117,6 +117,7 @@ export interface CanvasElement extends BaseCanvasElement {
descriptionTextColor?: string;
descriptionBackgroundColor?: string;
navLabel?: string;
navLabelFontFamily?: string;
navType?: NavigationButtonKind;
navDisabled?: boolean;
/** @deprecated Use targetPageSlug instead - IDs change when copied between environments */