administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

ensure mobile buttons don't stay selected

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-29 12:33:50 -05:00
parent d9f62548de
commit 7c5746cd6a
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/components/timeline/ReviewTimeline.tsx
View File

@ -511,36 +511,38 @@ export function ReviewTimeline({
<div <div
className={`absolute z-30 flex gap-2 ${ className={`absolute z-30 flex gap-2 ${
isMobile isMobile
? "bottom-4 right-2 flex-col gap-4" ? "bottom-4 right-1 flex-col gap-3"
: "bottom-2 left-1/2 -translate-x-1/2" : "bottom-2 left-1/2 -translate-x-1/2"
}`} }`}
> >
<Button <Button
onClick={() => { onClick={(e) => {
const newLevel = Math.max(0, currentZoomLevelIndex - 1); const newLevel = Math.max(0, currentZoomLevelIndex - 1);
onZoomChange(newLevel); onZoomChange(newLevel);
e.currentTarget.blur();
}} }}
variant="outline" variant="outline"
disabled={currentZoomLevelIndex === 0} disabled={currentZoomLevelIndex === 0}
className="p-3" className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
title="Zoom out" type="button"
> >
<LuZoomOut className={isMobile ? "size-5" : "size-4"} /> <LuZoomOut className={cn("size-5 text-primary-variant")} />
</Button> </Button>
<Button <Button
onClick={() => { onClick={(e) => {
const newLevel = Math.min( const newLevel = Math.min(
zoomLevels.length - 1, zoomLevels.length - 1,
currentZoomLevelIndex + 1, currentZoomLevelIndex + 1,
); );
onZoomChange(newLevel); onZoomChange(newLevel);
e.currentTarget.blur();
}} }}
variant="outline" variant="outline"
disabled={currentZoomLevelIndex === zoomLevels.length - 1} disabled={currentZoomLevelIndex === zoomLevels.length - 1}
className="p-3" className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
title="Zoom in" type="button"
> >
<LuZoomIn className={isMobile ? "size-5" : "size-4"} /> <LuZoomIn className={cn("size-5 text-primary-variant")} />
</Button> </Button>
</div> </div>
)} )}