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

use shadcn toggle group instead of custom component

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-18 12:34:25 -05:00
parent b97d3ed870
commit 834d7fdbe9
2 changed files with 48 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
web/src/components/overlay/dialog/SearchFilterDialog.tsx
View File

@ -26,7 +26,7 @@ import { cn } from "@/lib/utils";
import { DualThumbSlider } from "@/components/ui/slider"; import { DualThumbSlider } from "@/components/ui/slider";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import ToggleButton from "@/components/ui/toggle-button"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
type SearchFilterDialogProps = { type SearchFilterDialogProps = {
config?: FrigateConfig; config?: FrigateConfig;
@ -536,7 +536,7 @@ function SnapshotClipFilterContent({
<DropdownMenuSeparator className="mb-3" /> <DropdownMenuSeparator className="mb-3" />
<div className="mb-3 text-lg">Features</div> <div className="mb-3 text-lg">Features</div>
<div className="my-2.5 space-y-4"> <div className="my-2.5 space-y-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
@ -547,8 +547,9 @@ function SnapshotClipFilterContent({
setIsSnapshotFilterActive(checked as boolean); setIsSnapshotFilterActive(checked as boolean);
if (checked) { if (checked) {
setSnapshotClip(true, hasClip); setSnapshotClip(true, hasClip);
} else {
setSnapshotClip(undefined, hasClip);
} }
if (!checked) setSnapshotClip(undefined, hasClip);
}} }}
/> />
<Label <Label
@ -558,22 +559,32 @@ function SnapshotClipFilterContent({
Has a snapshot Has a snapshot
</Label> </Label>
</div> </div>
<div className="flex space-x-2"> <ToggleGroup
<ToggleButton type="single"
active={hasSnapshot === true} value={
onClick={() => setSnapshotClip(true, hasClip)} hasSnapshot === undefined ? undefined : hasSnapshot ? "yes" : "no"
disabled={!isSnapshotFilterActive} }
onValueChange={(value) => {
if (value === "yes") setSnapshotClip(true, hasClip);
else if (value === "no") setSnapshotClip(false, hasClip);
}}
disabled={!isSnapshotFilterActive}
>
<ToggleGroupItem
value="yes"
aria-label="Yes"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
> >
Yes Yes
</ToggleButton> </ToggleGroupItem>
<ToggleButton <ToggleGroupItem
active={hasSnapshot === false} value="no"
onClick={() => setSnapshotClip(false, hasClip)} aria-label="No"
disabled={!isSnapshotFilterActive} className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
> >
No No
</ToggleButton> </ToggleGroupItem>
</div> </ToggleGroup>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -586,8 +597,9 @@ function SnapshotClipFilterContent({
setIsClipFilterActive(checked as boolean); setIsClipFilterActive(checked as boolean);
if (checked) { if (checked) {
setSnapshotClip(hasSnapshot, true); setSnapshotClip(hasSnapshot, true);
} else {
setSnapshotClip(hasSnapshot, undefined);
} }
if (!checked) setSnapshotClip(hasSnapshot, undefined);
}} }}
/> />
<Label <Label
@ -597,22 +609,30 @@ function SnapshotClipFilterContent({
Has a video clip Has a video clip
</Label> </Label>
</div> </div>
<div className="flex space-x-2"> <ToggleGroup
<ToggleButton type="single"
active={hasClip === true} value={hasClip === undefined ? undefined : hasClip ? "yes" : "no"}
onClick={() => setSnapshotClip(hasSnapshot, true)} onValueChange={(value) => {
disabled={!isClipFilterActive} if (value === "yes") setSnapshotClip(hasSnapshot, true);
else if (value === "no") setSnapshotClip(hasSnapshot, false);
}}
disabled={!isClipFilterActive}
>
<ToggleGroupItem
value="yes"
aria-label="Yes"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
> >
Yes Yes
</ToggleButton> </ToggleGroupItem>
<ToggleButton <ToggleGroupItem
active={hasClip === false} value="no"
onClick={() => setSnapshotClip(hasSnapshot, false)} aria-label="No"
disabled={!isClipFilterActive} className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
> >
No No
</ToggleButton> </ToggleGroupItem>
</div> </ToggleGroup>
</div> </div>
</div> </div>
</div> </div>

29
web/src/components/ui/toggle-button.tsx
View File

@ -1,29 +0,0 @@
import { cn } from "@/lib/utils";
export default function ToggleButton({
active,
onClick,
children,
disabled,
}: {
active: boolean;
onClick: () => void;
children: React.ReactNode;
disabled: boolean;
}) {
return (
<button
className={cn(
"rounded-md px-3 py-1 text-sm font-medium transition-colors",
active && !disabled
? "bg-selected text-white"
: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
disabled && "cursor-not-allowed opacity-50",
)}
onClick={onClick}
disabled={disabled}
>
{children}
</button>
);
}