administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 13:15:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix icons for live grid

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-20 11:39:41 -06:00
parent 6e8a98205d
commit b45f297da9
2 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/components/icons/LiveIcons.tsx Normal file
View File

@ -0,0 +1,42 @@
type LiveIconProps = {
layout?: "list" | "grid";
};
export function LiveGridIcon({ layout }: LiveIconProps) {
return (
<div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
<div
className={`h-1 w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
<div className="h-1 w-full flex gap-0.5">
<div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
<div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
</div>
<div className="h-1 w-full flex gap-0.5">
<div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
<div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
</div>
</div>
);
}
export function LiveListIcon({ layout }: LiveIconProps) {
return (
<div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
<div
className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
/>
<div
className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
/>
</div>
);
}

22
web/src/views/live/LiveDashboardView.tsx
View File

@ -1,6 +1,7 @@
import { useFrigateReviews } from "@/api/ws"; import { useFrigateReviews } from "@/api/ws";
import Logo from "@/components/Logo"; import Logo from "@/components/Logo";
import { CameraGroupSelector } from "@/components/filter/CameraGroupSelector"; import { CameraGroupSelector } from "@/components/filter/CameraGroupSelector";
import { LiveGridIcon, LiveListIcon } from "@/components/icons/LiveIcons";
import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail"; import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer"; import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
import LivePlayer from "@/components/player/LivePlayer"; import LivePlayer from "@/components/player/LivePlayer";
@ -12,7 +13,6 @@ import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
import { ReviewSegment } from "@/types/review"; import { ReviewSegment } from "@/types/review";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { isDesktop, isMobile, isSafari } from "react-device-detect"; import { isDesktop, isMobile, isSafari } from "react-device-detect";
import { CiGrid2H, CiGrid31 } from "react-icons/ci";
import useSWR from "swr"; import useSWR from "swr";
type LiveDashboardViewProps = { type LiveDashboardViewProps = {
@ -89,26 +89,26 @@ export default function LiveDashboardView({
<CameraGroupSelector /> <CameraGroupSelector />
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Button <Button
className={ className={`p-1 ${
layout == "grid" layout == "grid"
? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60" ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
: "text-muted-foreground bg-muted" : "bg-muted"
} }`}
size="xs" size="xs"
onClick={() => setLayout("grid")} onClick={() => setLayout("grid")}
> >
<CiGrid31 className="m-1" /> <LiveGridIcon layout={layout} />
</Button> </Button>
<Button <Button
className={ className={`p-1 ${
layout == "list" layout == "list"
? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60" ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
: "text-muted-foreground bg-muted" : "bg-muted"
} }`}
size="xs" size="xs"
onClick={() => setLayout("list")} onClick={() => setLayout("list")}
> >
<CiGrid2H className="m-1" /> <LiveListIcon layout={layout} />
</Button> </Button>
</div> </div>
</div> </div>