feat: thème dark/light/system, taille police, page config, paste photo todo
ThemeContext - ThemeMode dark/light/system persisté en localStorage - fontScale 0.8–1.4 appliqué via CSS zoom sur <html> - Écoute prefers-color-scheme pour le mode système index.html - Script anti-flash : applique thème et zoom synchrone avant le premier rendu Layout - TopBar fixe 44px : bouton icône qui cycle dark→light→system→dark - Contenu décalé de 44px vers le bas ConfigPage (/config) - Sélecteur de thème (3 boutons avec icônes) - Slider taille de texte avec aperçu temps réel - Bouton Réinitialiser HomePage - Tuile Paramètres (fa-sliders) → /config TodoForm - Paste Ctrl+V pour ajouter une photo (même mécanique que CatalogueModal) - Indice visuel "ou Ctrl+V" v0.5.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useTheme, type ThemeMode } from '../contexts/ThemeContext'
|
||||
|
||||
const sectionStyle: React.CSSProperties = {
|
||||
background: 'var(--bg-3)',
|
||||
borderRadius: 10,
|
||||
padding: '16px 16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 12,
|
||||
}
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
color: 'var(--ink-3)',
|
||||
fontSize: 11,
|
||||
fontFamily: 'var(--font-ui)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
}
|
||||
|
||||
const THEME_OPTIONS: { value: ThemeMode; label: string; icon: string }[] = [
|
||||
{ value: 'dark', label: 'Sombre', icon: 'moon' },
|
||||
{ value: 'light', label: 'Clair', icon: 'sun' },
|
||||
{ value: 'system', label: 'Système', icon: 'circle-half-stroke' },
|
||||
]
|
||||
|
||||
const FONT_LABELS: Record<string, string> = {
|
||||
'0.8': 'XS', '0.85': 'S', '0.9': 'S+',
|
||||
'0.95': 'M-', '1': 'M', '1.05': 'M+',
|
||||
'1.1': 'L-', '1.15': 'L', '1.2': 'L+',
|
||||
'1.25': 'XL', '1.3': 'XL+', '1.35': 'XXL', '1.4': 'XXL+',
|
||||
}
|
||||
|
||||
export default function ConfigPage() {
|
||||
const navigate = useNavigate()
|
||||
const { theme, setTheme, fontScale, setFontScale } = useTheme()
|
||||
|
||||
const scaleLabel = FONT_LABELS[String(fontScale)] ?? `${Math.round(fontScale * 100)}%`
|
||||
|
||||
return (
|
||||
<div style={{ padding: '12px 16px 32px', maxWidth: 520, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{/* Titre */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
style={{ background: 'var(--bg-4)', border: 'none', borderRadius: 8, width: 36, height: 36, cursor: 'pointer', color: 'var(--ink-2)', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left" />
|
||||
</button>
|
||||
<h2 style={{ margin: 0, color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: 18, fontWeight: 600 }}>
|
||||
Paramètres
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Thème */}
|
||||
<div style={sectionStyle}>
|
||||
<div style={labelStyle}>Thème d'affichage</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
{THEME_OPTIONS.map(opt => {
|
||||
const active = theme === opt.value
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => setTheme(opt.value)}
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
|
||||
padding: '10px 6px',
|
||||
borderRadius: 8,
|
||||
border: active ? 'none' : '1px solid var(--bg-5)',
|
||||
background: active ? 'var(--accent)' : 'var(--bg-4)',
|
||||
color: active ? '#1d2021' : 'var(--ink-3)',
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'var(--font-ui)',
|
||||
fontSize: 12,
|
||||
fontWeight: active ? 600 : 400,
|
||||
minHeight: 64,
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
<i className={`fa-solid fa-${opt.icon}`} style={{ fontSize: 20 }} />
|
||||
{opt.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Taille du texte */}
|
||||
<div style={sectionStyle}>
|
||||
<div style={labelStyle}>Taille du texte</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: 12, minWidth: 16, textAlign: 'center' }}>A</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0.8}
|
||||
max={1.4}
|
||||
step={0.05}
|
||||
value={fontScale}
|
||||
onChange={e => setFontScale(parseFloat(e.target.value))}
|
||||
style={{ flex: 1, accentColor: 'var(--accent)', cursor: 'pointer' }}
|
||||
/>
|
||||
<span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: 20, minWidth: 16, textAlign: 'center' }}>A</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
|
||||
<span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
|
||||
{scaleLabel} — {Math.round(fontScale * 100)}%
|
||||
</span>
|
||||
{fontScale !== 1 && (
|
||||
<button
|
||||
onClick={() => setFontScale(1)}
|
||||
style={{ padding: '3px 10px', borderRadius: 999, border: '1px solid var(--bg-5)', background: 'transparent', color: 'var(--ink-3)', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 11 }}
|
||||
>Réinitialiser</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Aperçu */}
|
||||
<div style={{ background: 'var(--bg-4)', borderRadius: 8, padding: '10px 12px' }}>
|
||||
<div style={{ color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: `${14 * fontScale}px`, lineHeight: 1.5 }}>
|
||||
Aperçu du texte principal
|
||||
</div>
|
||||
<div style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: `${12 * fontScale}px`, marginTop: 4 }}>
|
||||
Texte secondaire et labels
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user