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",

76
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,35 +519,49 @@ export function ReviewTimeline({
: "bottom-2 left-1/2 -translate-x-1/2" : "bottom-2 left-1/2 -translate-x-1/2"
}`} }`}
> >
<Button <Tooltip>
onClick={(e) => { <TooltipTrigger asChild>
const newLevel = Math.max(0, currentZoomLevelIndex - 1); <Button
onZoomChange(newLevel); onClick={(e) => {
e.currentTarget.blur(); const newLevel = Math.max(0, currentZoomLevelIndex - 1);
}} onZoomChange(newLevel);
variant="outline" e.currentTarget.blur();
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" variant="outline"
type="button" 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"
<LuZoomOut className={cn("size-5 text-primary-variant")} /> type="button"
</Button> >
<Button <LuZoomOut className={cn("size-5 text-primary-variant")} />
onClick={(e) => { </Button>
const newLevel = Math.min( </TooltipTrigger>
zoomLevels.length - 1, <TooltipPortal>
currentZoomLevelIndex + 1, <TooltipContent>{t("zoomIn")}</TooltipContent>
); </TooltipPortal>
onZoomChange(newLevel); </Tooltip>
e.currentTarget.blur(); <Tooltip>
}} <TooltipTrigger asChild>
variant="outline" <Button
disabled={currentZoomLevelIndex === zoomLevels.length - 1} onClick={(e) => {
className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt" const newLevel = Math.min(
type="button" zoomLevels.length - 1,
> currentZoomLevelIndex + 1,
<LuZoomIn className={cn("size-5 text-primary-variant")} /> );
</Button> 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> </div>
)} )}
</> </>