danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(doclist): convert icon size controls to dropdown for icons view toggle

Browse source 
Replace inline icon size buttons with a dropdown menu that appears when
the icons view toggle is active. This change improves toolbar clarity by
grouping related controls and enhances accessibility with better focus
handling. The update also streamlines the button structure for view mode
selection.
This commit is contained in:
Richard R 2026-05-27 21:10:01 -06:00
parent 8104afa3e3
commit 13e0647b47
1 changed files with 47 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/components/doclist/window/FinderToolbar.tsx
View file

@ -118,52 +118,60 @@ export function FinderToolbar({
{VIEW_BUTTONS.map(({ value, label, Icon }) => {
const disabled = value === 'columns' && isNarrow;
const active = viewMode === value;
const isIconsToggle = value === 'icons';
return (
<button
<div
key={value}
type="button"
disabled={disabled}
onClick={() => onViewModeChange(value)}
aria-pressed={active}
aria-label={`${label} view`}
title={disabled ? `${label} (desktop only)` : `${label} view`}
className={
PILL_SEGMENT +
' h-6 w-7 ' +
(active ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE) +
(disabled ? ' opacity-40 cursor-not-allowed hover:bg-transparent hover:text-muted' : '')
}
className={isIconsToggle ? 'relative group/icons inline-flex items-center' : 'inline-flex items-center'}
>
<Icon className="w-4 h-4" />
</button>
<button
type="button"
disabled={disabled}
onClick={() => onViewModeChange(value)}
aria-pressed={active}
aria-label={`${label} view`}
title={disabled ? `${label} (desktop only)` : `${label} view`}
className={
PILL_SEGMENT +
' h-6 w-7 ' +
(active ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE) +
(disabled ? ' opacity-40 cursor-not-allowed hover:bg-transparent hover:text-muted' : '')
}
>
<Icon className="w-4 h-4" />
</button>
{isIconsToggle && viewMode === 'icons' && (
<div
className="absolute top-full left-1/2 z-30 -translate-x-1/2 pt-1 opacity-0 pointer-events-none transition-opacity duration-150 group-hover/icons:opacity-100 group-hover/icons:pointer-events-auto group-focus-within/icons:opacity-100 group-focus-within/icons:pointer-events-auto"
>
<div className={`${PILL} shadow-lg`}>
{ICON_SIZES.map(({ value: sizeValue, label: sizeLabel }) => {
const sizeActive = iconSize === sizeValue;
return (
<button
key={sizeValue}
type="button"
onClick={() => onIconSizeChange(sizeValue)}
aria-pressed={sizeActive}
aria-label={`Icon size ${sizeLabel}`}
className={
PILL_SEGMENT +
' h-6 min-w-[26px] px-1.5 font-semibold tracking-wide ' +
(sizeActive ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE)
}
>
{sizeLabel}
</button>
);
})}
</div>
</div>
)}
</div>
);
})}
</div>
{viewMode === 'icons' && (
<div className={`${PILL} hidden sm:inline-flex`}>
{ICON_SIZES.map(({ value, label }) => {
const active = iconSize === value;
return (
<button
key={value}
type="button"
onClick={() => onIconSizeChange(value)}
aria-pressed={active}
aria-label={`Icon size ${label}`}
className={
PILL_SEGMENT +
' h-6 min-w-[26px] px-1.5 font-semibold tracking-wide ' +
(active ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE)
}
>
{label}
</button>
);
})}
</div>
)}
<div className="flex items-center gap-1 shrink-0">
<button
type="button"