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

Add icons and frigate logo

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-04 09:28:44 -06:00
parent 972aee6a55
commit d4a56f9352
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/settings/GeneralSettings.tsx
View File

@ -1,6 +1,6 @@
import { import {
LuActivity,
LuGithub, LuGithub,
LuHardDrive,
LuLifeBuoy, LuLifeBuoy,
LuList, LuList,
LuMoon, LuMoon,
@ -137,7 +137,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<DropdownMenuLabel>System</DropdownMenuLabel> <DropdownMenuLabel>System</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}> <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
<Link to="/storage"> <Link to="/system">
<MenuItem <MenuItem
className={ className={
isDesktop isDesktop
@ -145,8 +145,8 @@ export default function GeneralSettings({ className }: GeneralSettings) {
: "p-2 flex items-center text-sm" : "p-2 flex items-center text-sm"
} }
> >
<LuHardDrive className="mr-2 size-4" /> <LuActivity className="mr-2 size-4" />
<span>Storage</span> <span>System metrics</span>
</MenuItem> </MenuItem>
</Link> </Link>
<Link to="/logs"> <Link to="/logs">

17
web/src/pages/System.tsx
View File

@ -3,9 +3,12 @@ import { FrigateStats } from "@/types/stats";
import { useState } from "react"; import { useState } from "react";
import TimeAgo from "@/components/dynamic/TimeAgo"; import TimeAgo from "@/components/dynamic/TimeAgo";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { isDesktop } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
import GeneralMetrics from "@/views/system/GeneralMetrics"; import GeneralMetrics from "@/views/system/GeneralMetrics";
import StorageMetrics from "@/views/system/StorageMetrics"; import StorageMetrics from "@/views/system/StorageMetrics";
import { LuActivity, LuHardDrive } from "react-icons/lu";
import { FaVideo } from "react-icons/fa";
import Logo from "@/components/Logo";
const metrics = ["general", "storage", "cameras"] as const; const metrics = ["general", "storage", "cameras"] as const;
type SystemMetric = (typeof metrics)[number]; type SystemMetric = (typeof metrics)[number];
@ -24,7 +27,10 @@ function System() {
return ( return (
<div className="size-full p-2 flex flex-col"> <div className="size-full p-2 flex flex-col">
<div className="w-full h-8 flex justify-between items-center"> <div className="w-full h-11 relative flex justify-between items-center">
{isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
)}
<ToggleGroup <ToggleGroup
className="*:px-3 *:py-4 *:rounded-md" className="*:px-3 *:py-4 *:rounded-md"
type="single" type="single"
@ -39,11 +45,14 @@ function System() {
{Object.values(metrics).map((item) => ( {Object.values(metrics).map((item) => (
<ToggleGroupItem <ToggleGroupItem
key={item} key={item}
className={`flex items-center justify-between gap-2 ${page == item ? "" : "text-gray-500"}`} className={`flex items-center justify-between gap-2 ${page == item ? "" : "*:text-gray-500"}`}
value={item} value={item}
aria-label={`Select ${item}`} aria-label={`Select ${item}`}
> >
<div className="capitalize">{item}</div> {item == "general" && <LuActivity className="size-4" />}
{item == "storage" && <LuHardDrive className="size-4" />}
{item == "cameras" && <FaVideo className="size-4" />}
{isDesktop && <div className="capitalize">{item}</div>}
</ToggleGroupItem> </ToggleGroupItem>
))} ))}
</ToggleGroup> </ToggleGroup>