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

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

@ -118,9 +118,13 @@ export function FinderToolbar({
{VIEW_BUTTONS.map(({ value, label, Icon }) => { {VIEW_BUTTONS.map(({ value, label, Icon }) => {
const disabled = value === 'columns' && isNarrow; const disabled = value === 'columns' && isNarrow;
const active = viewMode === value; const active = viewMode === value;
const isIconsToggle = value === 'icons';
return ( return (
<button <div
key={value} key={value}
className={isIconsToggle ? 'relative group/icons inline-flex items-center' : 'inline-flex items-center'}
>
<button
type="button" type="button"
disabled={disabled} disabled={disabled}
onClick={() => onViewModeChange(value)} onClick={() => onViewModeChange(value)}
@ -136,33 +140,37 @@ export function FinderToolbar({
> >
<Icon className="w-4 h-4" /> <Icon className="w-4 h-4" />
</button> </button>
); {isIconsToggle && viewMode === 'icons' && (
})} <div
</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"
>
{viewMode === 'icons' && ( <div className={`${PILL} shadow-lg`}>
<div className={`${PILL} hidden sm:inline-flex`}> {ICON_SIZES.map(({ value: sizeValue, label: sizeLabel }) => {
{ICON_SIZES.map(({ value, label }) => { const sizeActive = iconSize === sizeValue;
const active = iconSize === value;
return ( return (
<button <button
key={value} key={sizeValue}
type="button" type="button"
onClick={() => onIconSizeChange(value)} onClick={() => onIconSizeChange(sizeValue)}
aria-pressed={active} aria-pressed={sizeActive}
aria-label={`Icon size ${label}`} aria-label={`Icon size ${sizeLabel}`}
className={ className={
PILL_SEGMENT + PILL_SEGMENT +
' h-6 min-w-[26px] px-1.5 font-semibold tracking-wide ' + ' h-6 min-w-[26px] px-1.5 font-semibold tracking-wide ' +
(active ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE) (sizeActive ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE)
} }
> >
{label} {sizeLabel}
</button> </button>
); );
})} })}
</div> </div>
</div>
)} )}
</div>
);
})}
</div>
<div className="flex items-center gap-1 shrink-0"> <div className="flex items-center gap-1 shrink-0">
<button <button