feat: update background gradients and presets in BackgroundImageSelector
- Adjusted gradient definitions for various themes to enhance visual appeal and consistency. - Added new gradient presets (sunset, ocean, forest, galaxy) to the BackgroundContext for broader customization options. - Cleaned up unused console logs in useBackgroundCycle for better performance and readability.
This commit is contained in:
Julien Froidefond
@@ -17,67 +17,67 @@ const PRESET_BACKGROUNDS = [
|
||||
id: 'theme-subtle',
|
||||
name: 'Dégradé subtil',
|
||||
description: 'Dégradé doux avec les couleurs du thème',
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, var(--card-column) 100%)'
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-primary',
|
||||
name: 'Dégradé primaire',
|
||||
description: 'Dégradé marqué avec la couleur primaire',
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 60%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-accent',
|
||||
name: 'Dégradé accent',
|
||||
description: 'Dégradé marqué avec la couleur d\'accent',
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 60%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 25%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-success',
|
||||
name: 'Dégradé succès',
|
||||
description: 'Dégradé marqué avec la couleur de succès',
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 60%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 25%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-purple',
|
||||
name: 'Dégradé violet',
|
||||
description: 'Dégradé marqué avec la couleur violette',
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 60%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 25%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-diagonal',
|
||||
name: 'Dégradé diagonal',
|
||||
description: 'Dégradé diagonal avec plusieurs couleurs',
|
||||
preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 40%, var(--background)) 50%, color-mix(in srgb, var(--accent) 40%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 50%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-radial',
|
||||
name: 'Dégradé radial',
|
||||
description: 'Dégradé radial centré avec les couleurs du thème',
|
||||
preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)'
|
||||
preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-sunset',
|
||||
name: 'Dégradé coucher de soleil',
|
||||
description: 'Dégradé orange-rouge intense',
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 60%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 20%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-ocean',
|
||||
name: 'Dégradé océan',
|
||||
description: 'Dégradé bleu profond',
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 70%, var(--background)) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 25%, var(--background)) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-forest',
|
||||
name: 'Dégradé forêt',
|
||||
description: 'Dégradé vert naturel',
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 60%, var(--background)) 0%, color-mix(in srgb, var(--success) 40%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, var(--background)) 0%, color-mix(in srgb, var(--success) 15%, var(--background)) 100%)'
|
||||
},
|
||||
{
|
||||
id: 'theme-galaxy',
|
||||
name: 'Dégradé galaxie',
|
||||
description: 'Dégradé violet-bleu mystique',
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 70%, var(--background)) 0%, color-mix(in srgb, var(--blue) 50%, var(--background)) 100%)'
|
||||
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, var(--background)) 0%, color-mix(in srgb, var(--blue) 20%, var(--background)) 100%)'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -76,19 +76,27 @@ export function BackgroundProvider({ children }: BackgroundProviderProps) {
|
||||
'theme-success',
|
||||
'theme-purple',
|
||||
'theme-diagonal',
|
||||
'theme-radial'
|
||||
'theme-radial',
|
||||
'theme-sunset',
|
||||
'theme-ocean',
|
||||
'theme-forest',
|
||||
'theme-galaxy'
|
||||
];
|
||||
|
||||
if (PRESET_BACKGROUNDS.includes(backgroundImage)) {
|
||||
// Appliquer le preset basé sur le thème
|
||||
const presetStyles = {
|
||||
'theme-subtle': 'linear-gradient(135deg, var(--background) 0%, var(--card-column) 100%)',
|
||||
'theme-primary': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)',
|
||||
'theme-accent': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)',
|
||||
'theme-success': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 20%, var(--background)) 100%)',
|
||||
'theme-purple': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 20%, var(--background)) 100%)',
|
||||
'theme-diagonal': 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 50%, color-mix(in srgb, var(--accent) 15%, var(--background)) 100%)',
|
||||
'theme-radial': 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)'
|
||||
'theme-subtle': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)',
|
||||
'theme-primary': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)',
|
||||
'theme-accent': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 25%, var(--background)) 100%)',
|
||||
'theme-success': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 25%, var(--background)) 100%)',
|
||||
'theme-purple': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 25%, var(--background)) 100%)',
|
||||
'theme-diagonal': 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 50%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)',
|
||||
'theme-radial': 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)',
|
||||
'theme-sunset': 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 20%, var(--background)) 100%)',
|
||||
'theme-ocean': 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 25%, var(--background)) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)',
|
||||
'theme-forest': 'linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, var(--background)) 0%, color-mix(in srgb, var(--success) 15%, var(--background)) 100%)',
|
||||
'theme-galaxy': 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, var(--background)) 0%, color-mix(in srgb, var(--blue) 20%, var(--background)) 100%)'
|
||||
};
|
||||
|
||||
backgroundElement.style.backgroundImage = presetStyles[backgroundImage as keyof typeof presetStyles];
|
||||
|
||||
@@ -29,11 +29,6 @@ export function useBackgroundCycle() {
|
||||
|
||||
// Ajouter l'image personnalisée préservée si elle existe
|
||||
const preservedCustomUrl = localStorage.getItem('preservedCustomBackground');
|
||||
console.log('Debug cycle:', {
|
||||
currentBackground,
|
||||
preservedCustomUrl,
|
||||
localStorageKeys: Object.keys(localStorage)
|
||||
});
|
||||
|
||||
if (preservedCustomUrl && !BACKGROUND_CYCLE.includes(preservedCustomUrl)) {
|
||||
allBackgrounds.push(preservedCustomUrl);
|
||||
@@ -67,33 +62,10 @@ export function useBackgroundCycle() {
|
||||
const nextNextBackground = allBackgrounds[nextNextIndex];
|
||||
const finalBackgroundImage = nextNextBackground === 'none' ? undefined : nextNextBackground;
|
||||
|
||||
console.log('Cycle result:', {
|
||||
allBackgrounds,
|
||||
currentIndex,
|
||||
actualCurrentIndex,
|
||||
nextIndex,
|
||||
nextBackground,
|
||||
backgroundImage,
|
||||
currentBackground,
|
||||
nextNextIndex,
|
||||
nextNextBackground,
|
||||
finalBackgroundImage
|
||||
});
|
||||
|
||||
updateViewPreferences({ backgroundImage: finalBackgroundImage });
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Cycle result:', {
|
||||
allBackgrounds,
|
||||
currentIndex,
|
||||
actualCurrentIndex,
|
||||
nextIndex,
|
||||
nextBackground,
|
||||
backgroundImage,
|
||||
currentBackground
|
||||
});
|
||||
|
||||
updateViewPreferences({ backgroundImage });
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user