chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

UI cleanup (#10567)

Browse Source 
* Fix selected items text

* Use action icons from design and fix spacing

* Fix icons for live grid

* Fix viewed select api

* Setup default theme as system

* Make conig editor respect system theme
This commit is contained in:
Nicolas Mowen
2024-03-20 19:46:45 -06:00
committed by GitHub
parent 5af083cd8a
commit 8babe57d63
6 changed files with 90 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/components/filter/ReviewActionGroup.tsx
View File

@@ -1,8 +1,10 @@
import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
import { FaCircleCheck } from "react-icons/fa6";
import { useCallback } from "react";
import axios from "axios";
import { Button } from "../ui/button";
import { isDesktop } from "react-device-detect";
import { FaCompactDisc } from "react-icons/fa";
import { HiTrash } from "react-icons/hi";
type ReviewActionGroupProps = {
selectedReviews: string[];
@@ -21,8 +23,7 @@ export default function ReviewActionGroup({
}, [setSelectedReviews]);
const onMarkAsReviewed = useCallback(async () => {
const idList = selectedReviews.join(",");
await axios.post(`reviews/viewed`, { ids: idList });
await axios.post(`reviews/viewed`, { ids: selectedReviews });
setSelectedReviews([]);
pullLatestData();
}, [selectedReviews, setSelectedReviews, pullLatestData]);
@@ -36,16 +37,20 @@ export default function ReviewActionGroup({
return (
<div className="absolute inset-x-2 inset-y-0 md:left-auto md:right-2 p-2 flex gap-2 justify-between items-center bg-background">
<div className="flex items-center">
<div className="text-sm text-gray-500 mr-2">{`${selectedReviews.length} selected | `}</div>
<Button size="xs" variant="link" onClick={onClearSelected}>
<div className="mx-1 flex justify-center items-center text-sm text-muted-foreground">
<div className="p-1">{`${selectedReviews.length} selected`}</div>
<div className="p-1">{"|"}</div>
<div
className="p-2 text-primary-foreground cursor-pointer hover:bg-secondary hover:rounded-lg"
onClick={onClearSelected}
>
Unselect
</Button>
</div>
</div>
<div className="flex items-center gap-1 md:gap-2">
{selectedReviews.length == 1 && (
<Button
className="flex items-center"
className="p-2 flex items-center gap-2"
variant="secondary"
size="sm"
onClick={() => {
@@ -53,26 +58,26 @@ export default function ReviewActionGroup({
onClearSelected();
}}
>
<LuFileUp className="mr-1" />
<FaCompactDisc />
{isDesktop && "Export"}
</Button>
)}
<Button
className="flex items-center"
className="p-2 flex items-center gap-2"
variant="secondary"
size="sm"
onClick={onMarkAsReviewed}
>
<LuCheckSquare className="mr-1" />
<FaCircleCheck />
{isDesktop && "Mark as reviewed"}
</Button>
<Button
className="flex items-center"
className="p-2 flex items-center gap-1"
variant="secondary"
size="sm"
onClick={onDelete}
>
<LuTrash className="mr-1" />
<HiTrash />
{isDesktop && "Delete"}
</Button>
</div>

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>
);
}