fix(branding): when a force lock is active, collapse the theme customizer to just the Force control

Follow-up to the force-mode change: hide ALL gallery theme customization while
a force light/dark lock is on, not only colors + typography. Theme presets,
gallery layout, header style, controls style, the colour pickers (incl. accent),
Typography & Style, CSS templates, the PDF-typography slot and event custom CSS
are all hidden — only the Force color mode control (with an explanatory note)
and the Reset/Apply actions remain. Accent brand colours still apply to the
gallery; their picker is just hidden while the lock is on. Turning the lock off
restores the full customizer. Note text + i18n (en/de) updated.
This commit is contained in:
Luca
2026-06-16 15:42:10 +02:00
parent 4749e222dc
commit 1ac653ad1b
3 changed files with 8 additions and 4 deletions
@@ -311,6 +311,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{!forcedColorActive && (<>
{/* Preset Themes */} {/* Preset Themes */}
<Card className="p-6"> <Card className="p-6">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2"> <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
@@ -895,6 +896,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
)} )}
</Card> </Card>
)} )}
</>)}
{/* Color Customization */} {/* Color Customization */}
<Card className="p-6"> <Card className="p-6">
@@ -923,7 +925,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
<div className="mb-6"> <div className="mb-6">
{forcedColorActive && ( {forcedColorActive && (
<div className="mb-2 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 px-3 py-2 text-xs text-amber-800 dark:text-amber-300"> <div className="mb-2 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 px-3 py-2 text-xs text-amber-800 dark:text-amber-300">
{t('branding.forcedStandardLookNote', 'A forced color mode is active — the gallery uses the standard light/dark look. Color mode, surface & text colors, and Typography & Style are hidden here because they dont apply while the lock is on. Accent colors still apply. Set Force below to “No force” to customize them.')} {t('branding.forcedStandardLookNote', 'A forced color mode is active — the gallery uses the standard light/dark look, so the theme customization is hidden (it doesnt apply while the lock is on). Your accent brand colors still apply. Set Force to “No force” to customize the gallery theme again.')}
</div> </div>
)} )}
{!forcedColorActive && (<> {!forcedColorActive && (<>
@@ -1142,7 +1144,6 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
))} ))}
</div> </div>
</div> </div>
</>)}
{/* Accent */} {/* Accent */}
<div> <div>
@@ -1193,6 +1194,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
{/* primaryColor is kept in sync with accentDarkColor inside {/* primaryColor is kept in sync with accentDarkColor inside
handleChange() — no dedicated picker. */} handleChange() — no dedicated picker. */}
</div> </div>
</>)}
</div> </div>
</Card> </Card>
@@ -1330,6 +1332,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
</Card> </Card>
)} )}
{!forcedColorActive && (<>
{/* CSS Template Selector - only show if templates are provided */} {/* CSS Template Selector - only show if templates are provided */}
{cssTemplates && cssTemplates.length > 0 && onCssTemplateChange && ( {cssTemplates && cssTemplates.length > 0 && onCssTemplateChange && (
<Card className="p-6"> <Card className="p-6">
@@ -1506,6 +1509,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
{t('branding.customCSSHelp')} {t('branding.customCSSHelp')}
</p> </p>
</Card> </Card>
</>)}
{/* Actions */} {/* Actions */}
{!hideActions && ( {!hideActions && (
+1 -1
View File
@@ -1956,7 +1956,7 @@
"forceColorModeNone": "Kein Zwang (Benutzerauswahl)", "forceColorModeNone": "Kein Zwang (Benutzerauswahl)",
"forceColorModeDark": "Dunkelmodus erzwingen", "forceColorModeDark": "Dunkelmodus erzwingen",
"forceColorModeLight": "Hellmodus erzwingen", "forceColorModeLight": "Hellmodus erzwingen",
"forcedStandardLookNote": "Ein erzwungener Farbmodus ist aktiv — die Galerie verwendet das Standard-Hell-/Dunkel-Design. Farbmodus, Flächen- & Textfarben sowie Typografie & Stil werden hier ausgeblendet, da sie bei aktiver Sperre nicht greifen. Akzentfarben gelten weiterhin. Setze „Erzwingen“ unten auf „Keine Erzwingung“, um sie anzupassen.", "forcedStandardLookNote": "Ein erzwungener Farbmodus ist aktiv — die Galerie verwendet das Standard-Hell-/Dunkel-Design, daher ist die Theme-Anpassung ausgeblendet (sie greift bei aktiver Sperre nicht). Deine Akzent-Markenfarben gelten weiterhin. Setze „Erzwingen“ auf „Keine Erzwingung“, um das Galerie-Theme wieder anzupassen.",
"colorGroupSurfaces": "Oberflächen", "colorGroupSurfaces": "Oberflächen",
"colorGroupSurfacesHelp": "Die neutralen Ebenen hinter Ihrem Inhalt. Hintergrund liegt am weitesten zurück; Oberfläche und Erhöht stapeln sich darüber.", "colorGroupSurfacesHelp": "Die neutralen Ebenen hinter Ihrem Inhalt. Hintergrund liegt am weitesten zurück; Oberfläche und Erhöht stapeln sich darüber.",
"backgroundColorHelp": "Die Seite selbst — Hintergrundfarbe jeder Galerie, Admin-Seite und CMS-Seite.", "backgroundColorHelp": "Die Seite selbst — Hintergrundfarbe jeder Galerie, Admin-Seite und CMS-Seite.",
+1 -1
View File
@@ -1545,7 +1545,7 @@
"forceColorModeNone": "No force (user choice)", "forceColorModeNone": "No force (user choice)",
"forceColorModeDark": "Force dark", "forceColorModeDark": "Force dark",
"forceColorModeLight": "Force light", "forceColorModeLight": "Force light",
"forcedStandardLookNote": "A forced color mode is active — the gallery uses the standard light/dark look. Color mode, surface & text colors, and Typography & Style are hidden here because they dont apply while the lock is on. Accent colors still apply. Set Force below to “No force” to customize them.", "forcedStandardLookNote": "A forced color mode is active — the gallery uses the standard light/dark look, so the theme customization is hidden (it doesnt apply while the lock is on). Your accent brand colors still apply. Set Force to “No force” to customize the gallery theme again.",
"colorGroupSurfaces": "Surfaces", "colorGroupSurfaces": "Surfaces",
"colorGroupSurfacesHelp": "The neutral layers behind your content. Background sits furthest back; Surface and Elevated stack on top.", "colorGroupSurfacesHelp": "The neutral layers behind your content. Background sits furthest back; Surface and Elevated stack on top.",
"backgroundColorHelp": "The page itself — body background of every gallery, admin page and CMS page.", "backgroundColorHelp": "The page itself — body background of every gallery, admin page and CMS page.",