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

add tooltips

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-29 12:55:05 -05:00
parent a83d09d076
commit b102778476
2 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/locales/en/views/events.json
View File

@ -13,6 +13,8 @@
},
"timeline": "Timeline",
"timeline.aria": "Select timeline",
"zoomIn": "Zoom In",
"zoomOut": "Zoom Out",
"events": {
"label": "Events",
"aria": "Select events",

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

@ -15,6 +15,9 @@ import {
import { isIOS, isMobile } from "react-device-detect";
import { Button } from "../ui/button";
import { LuZoomIn, LuZoomOut } from "react-icons/lu";
import { useTranslation } from "react-i18next";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { TooltipPortal } from "@radix-ui/react-tooltip";
export type ReviewTimelineProps = {
timelineRef: RefObject<HTMLDivElement>;
@ -73,6 +76,7 @@ export function ReviewTimeline({
currentZoomLevel,
children,
}: ReviewTimelineProps) {
const { t } = useTranslation("views/events");
const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false);
const [isDraggingExportStart, setIsDraggingExportStart] = useState(false);
const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false);
@ -515,35 +519,49 @@ export function ReviewTimeline({
: "bottom-2 left-1/2 -translate-x-1/2"
}`}
>
<Button
onClick={(e) => {
const newLevel = Math.max(0, currentZoomLevelIndex - 1);
onZoomChange(newLevel);
e.currentTarget.blur();
}}
variant="outline"
disabled={currentZoomLevelIndex === 0}
className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
type="button"
>
<LuZoomOut className={cn("size-5 text-primary-variant")} />
</Button>
<Button
onClick={(e) => {
const newLevel = Math.min(
zoomLevels.length - 1,
currentZoomLevelIndex + 1,
);
onZoomChange(newLevel);
e.currentTarget.blur();
}}
variant="outline"
disabled={currentZoomLevelIndex === zoomLevels.length - 1}
className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
type="button"
>
<LuZoomIn className={cn("size-5 text-primary-variant")} />
</Button>
<Tooltip>
<TooltipTrigger asChild>
<Button
onClick={(e) => {
const newLevel = Math.max(0, currentZoomLevelIndex - 1);
onZoomChange(newLevel);
e.currentTarget.blur();
}}
variant="outline"
disabled={currentZoomLevelIndex === 0}
className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
type="button"
>
<LuZoomOut className={cn("size-5 text-primary-variant")} />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t("zoomIn")}</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
onClick={(e) => {
const newLevel = Math.min(
zoomLevels.length - 1,
currentZoomLevelIndex + 1,
);
onZoomChange(newLevel);
e.currentTarget.blur();
}}
variant="outline"
disabled={currentZoomLevelIndex === zoomLevels.length - 1}
className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
type="button"
>
<LuZoomIn className={cn("size-5 text-primary-variant")} />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t("zoomOut")}</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
)}
</>