andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add state reset

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-05 22:12:01 +01:00
parent 1e90acf6a5
commit 589de0c5ac
1 changed files with 61 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

70
frontend/src/components/map/MapLegend.tsx
View file

@ -11,6 +11,23 @@ import { gradientToCss } from '../../lib/utils';
import { CloseIcon } from '../ui/icons/CloseIcon';
import { TickerValue } from '../ui/TickerValue';
function ResetScaleIcon({ className = 'w-4 h-4' }: { className?: string }) {
return (
<svg
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M3 12a9 9 0 0115.13-6.36L21 8" />
<path strokeLinecap="round" strokeLinejoin="round" d="M21 3v5h-5" />
<path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 01-15.13 6.36L3 16" />
<path strokeLinecap="round" strokeLinejoin="round" d="M3 21v-5h5" />
</svg>
);
}
function EnumSwatches({
values,
palette,
@ -76,6 +93,8 @@ export default function MapLegend({
suffix,
raw,
totalCount,
onResetScale,
resetScaleDisabled = false,
}: {
featureLabel: string;
range: [number, number];
@ -89,9 +108,12 @@ export default function MapLegend({
suffix?: string;
raw?: boolean;
totalCount?: number;
onResetScale?: () => void;
resetScaleDisabled?: boolean;
}) {
const { t } = useTranslation();
const isEnum = enumValues && enumValues.length > 0;
const showResetScale = Boolean(onResetScale) && !isEnum;
const enumPalette = getEnumPaletteForFeature(featureName ?? null, enumValues);
const densityGradient = theme === 'dark' ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
const gradientStyle =
@ -121,11 +143,23 @@ export default function MapLegend({
<span className="font-semibold text-xs text-warm-800 dark:text-warm-200 truncate">
{featureLabel}
</span>
{showResetScale && (
<button
onClick={onResetScale}
disabled={resetScaleDisabled}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 disabled:opacity-40 disabled:hover:text-warm-400 dark:disabled:hover:text-warm-400 shrink-0"
title={t('mapLegend.resetColourScale')}
aria-label={t('mapLegend.resetColourScale')}
>
<ResetScaleIcon className="w-3.5 h-3.5" />
</button>
)}
{showCancel && (
<button
onClick={onCancel}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
title={t('mapLegend.clearColourView')}
aria-label={t('mapLegend.clearColourView')}
>
<CloseIcon className="w-3.5 h-3.5" />
</button>
@ -149,15 +183,33 @@ export default function MapLegend({
return (
<div className="bg-white dark:bg-navy-800 dark:text-white rounded shadow-lg p-3 text-xs min-w-[300px] pointer-events-auto">
<div className="flex items-center justify-between mb-2">
<span className="font-semibold text-sm dark:text-white">{featureLabel}</span>
{showCancel && (
<button
onClick={onCancel}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 ml-2"
title={t('mapLegend.clearColourView')}
>
<CloseIcon className="w-4 h-4" />
</button>
<span className="font-semibold text-sm dark:text-white min-w-0 truncate">
{featureLabel}
</span>
{(showResetScale || showCancel) && (
<div className="flex items-center gap-1.5 ml-2 shrink-0">
{showResetScale && (
<button
onClick={onResetScale}
disabled={resetScaleDisabled}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 disabled:opacity-40 disabled:hover:text-warm-400 dark:disabled:hover:text-warm-400"
title={t('mapLegend.resetColourScale')}
aria-label={t('mapLegend.resetColourScale')}
>
<ResetScaleIcon className="w-4 h-4" />
</button>
)}
{showCancel && (
<button
onClick={onCancel}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300"
title={t('mapLegend.clearColourView')}
aria-label={t('mapLegend.clearColourView')}
>
<CloseIcon className="w-4 h-4" />
</button>
)}
</div>
)}
</div>
{isEnum ? (