7394b16999
- Implemented a FontSizeToggle component in HomePageClient for adjusting task font sizes in kanban views. - Updated TaskCard to apply dynamic font size classes based on user preferences. - Enhanced user preferences to include font size settings, defaulting to 'medium'. - Modified TODO.md to mark the font size toggle task as complete.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useUserPreferences } from '@/contexts/UserPreferencesContext';
|
|
|
|
export function FontSizeToggle() {
|
|
const { preferences, toggleFontSize } = useUserPreferences();
|
|
|
|
// Icône pour la taille de police
|
|
const getFontSizeIcon = () => {
|
|
switch (preferences.viewPreferences.fontSize) {
|
|
case 'small':
|
|
return 'A';
|
|
case 'large':
|
|
return 'A';
|
|
default:
|
|
return 'A';
|
|
}
|
|
};
|
|
|
|
const getFontSizeScale = () => {
|
|
switch (preferences.viewPreferences.fontSize) {
|
|
case 'small':
|
|
return 'text-xs';
|
|
case 'large':
|
|
return 'text-lg';
|
|
default:
|
|
return 'text-sm';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleFontSize}
|
|
className="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50 hover:text-[var(--primary)]"
|
|
title={`Font size: ${preferences.viewPreferences.fontSize} (click to cycle)`}
|
|
>
|
|
<span className={`font-mono font-bold ${getFontSizeScale()}`}>
|
|
{getFontSizeIcon()}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|