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

Match design for filters

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-28 07:44:30 -06:00
parent 7b8c5f4118
commit 60ed76a4ba
2 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -515,7 +515,7 @@ function GeneralFilterButton({
}} }}
> >
<PopoverTrigger asChild>{trigger}</PopoverTrigger> <PopoverTrigger asChild>{trigger}</PopoverTrigger>
<PopoverContent side="left">{content}</PopoverContent> <PopoverContent>{content}</PopoverContent>
</Popover> </Popover>
); );
} }
@ -538,45 +538,64 @@ export function GeneralFilterContent({
}: GeneralFilterContentProps) { }: GeneralFilterContentProps) {
return ( return (
<> <>
<DropdownMenuSeparator />
<DropdownMenuLabel className="flex justify-center items-center">
Filter Labels
</DropdownMenuLabel>
<DropdownMenuSeparator />
<div className="h-auto overflow-y-auto overflow-x-hidden"> <div className="h-auto overflow-y-auto overflow-x-hidden">
<FilterCheckBox <div className="flex justify-between items-center my-2.5">
isChecked={currentLabels == undefined} <Label
label="All Labels" className="mx-2 text-secondary-foreground cursor-pointer"
onCheckedChange={(isChecked) => { htmlFor="allLabels"
if (isChecked) { >
setCurrentLabels(undefined); All Labels
} </Label>
}} <Switch
/> className="ml-1"
<DropdownMenuSeparator /> id="allLabels"
{allLabels.map((item) => ( checked={currentLabels == undefined}
<FilterCheckBox
key={item}
isChecked={currentLabels?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => { onCheckedChange={(isChecked) => {
if (isChecked) { if (isChecked) {
const updatedLabels = currentLabels ? [...currentLabels] : []; setCurrentLabels(undefined);
updatedLabels.push(item);
setCurrentLabels(updatedLabels);
} else {
const updatedLabels = currentLabels ? [...currentLabels] : [];
// can not deselect the last item
if (updatedLabels.length > 1) {
updatedLabels.splice(updatedLabels.indexOf(item), 1);
setCurrentLabels(updatedLabels);
}
} }
}} }}
/> />
))} </div>
<DropdownMenuSeparator />
<div className="my-2.5 flex flex-col gap-2.5">
{allLabels.map((item) => (
<div className="flex justify-between items-center">
<Label
className="w-full mx-2 text-secondary-foreground capitalize cursor-pointer"
htmlFor={item}
>
{item.replaceAll("_", " ")}
</Label>
<Switch
key={item}
className="ml-1"
id={item}
checked={currentLabels?.includes(item) ?? false}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedLabels = currentLabels
? [...currentLabels]
: [];
updatedLabels.push(item);
setCurrentLabels(updatedLabels);
} else {
const updatedLabels = currentLabels
? [...currentLabels]
: [];
// can not deselect the last item
if (updatedLabels.length > 1) {
updatedLabels.splice(updatedLabels.indexOf(item), 1);
setCurrentLabels(updatedLabels);
}
}
}}
/>
</div>
))}
</div>
</div> </div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="p-2 flex justify-evenly items-center"> <div className="p-2 flex justify-evenly items-center">

7
web/src/components/overlay/MobileReviewSettingsDrawer.tsx
View File

@ -292,10 +292,3 @@ export default function MobileReviewSettingsDrawer({
</> </>
); );
} }
/**
* <MobileTimelineDrawer
selected={timelineType ?? "timeline"}
onSelect={setTimelineType}
/>
*/