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": "Timeline",
"timeline.aria": "Select timeline", "timeline.aria": "Select timeline",
"zoomIn": "Zoom In",
"zoomOut": "Zoom Out",
"events": { "events": {
"label": "Events", "label": "Events",
"aria": "Select events", "aria": "Select events",

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

@ -15,6 +15,9 @@ import {
import { isIOS, isMobile } from "react-device-detect"; import { isIOS, isMobile } from "react-device-detect";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { LuZoomIn, LuZoomOut } from "react-icons/lu"; 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 = { export type ReviewTimelineProps = {
timelineRef: RefObject<HTMLDivElement>; timelineRef: RefObject<HTMLDivElement>;
@ -73,6 +76,7 @@ export function ReviewTimeline({
currentZoomLevel, currentZoomLevel,
children, children,
}: ReviewTimelineProps) { }: ReviewTimelineProps) {
const { t } = useTranslation("views/events");
const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false); const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false);
const [isDraggingExportStart, setIsDraggingExportStart] = useState(false); const [isDraggingExportStart, setIsDraggingExportStart] = useState(false);
const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false); const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false);
@ -515,6 +519,8 @@ export function ReviewTimeline({
: "bottom-2 left-1/2 -translate-x-1/2" : "bottom-2 left-1/2 -translate-x-1/2"
}`} }`}
> >
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
onClick={(e) => { onClick={(e) => {
const newLevel = Math.max(0, currentZoomLevelIndex - 1); const newLevel = Math.max(0, currentZoomLevelIndex - 1);
@ -528,6 +534,13 @@ export function ReviewTimeline({
> >
<LuZoomOut className={cn("size-5 text-primary-variant")} /> <LuZoomOut className={cn("size-5 text-primary-variant")} />
</Button> </Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t("zoomIn")}</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
onClick={(e) => { onClick={(e) => {
const newLevel = Math.min( const newLevel = Math.min(
@ -544,6 +557,11 @@ export function ReviewTimeline({
> >
<LuZoomIn className={cn("size-5 text-primary-variant")} /> <LuZoomIn className={cn("size-5 text-primary-variant")} />
</Button> </Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t("zoomOut")}</TooltipContent>
</TooltipPortal>
</Tooltip>
</div> </div>
)} )}
</> </>