Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

UI fixes (#11883)

Browse Source 
* Keep as optional prop

* put zones inside of scrollable container
This commit is contained in:
Josh Hawkins 2024-06-11 10:05:50 -05:00 committed by GitHub
parent bb359f67a4
commit a8e901b63c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -643,7 +643,7 @@ type GeneralFilterContentProps = {
updateLabelFilter: (labels: string[] | undefined) => void; updateLabelFilter: (labels: string[] | undefined) => void;
setCurrentLabels: (labels: string[] | undefined) => void; setCurrentLabels: (labels: string[] | undefined) => void;
updateZoneFilter?: (zones: string[] | undefined) => void; updateZoneFilter?: (zones: string[] | undefined) => void;
setCurrentZones: (zones: string[] | undefined) => void; setCurrentZones?: (zones: string[] | undefined) => void;
onClose: () => void; onClose: () => void;
}; };
export function GeneralFilterContent({ export function GeneralFilterContent({
@ -726,54 +726,59 @@ export function GeneralFilterContent({
/> />
))} ))}
</div> </div>
</div>
{allZones && setCurrentZones && ( {allZones && setCurrentZones && (
<> <>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="mb-5 mt-2.5 flex items-center justify-between"> <div className="mb-5 mt-2.5 flex items-center justify-between">
<Label <Label
className="mx-2 cursor-pointer text-primary" className="mx-2 cursor-pointer text-primary"
htmlFor="allZones" htmlFor="allZones"
> >
All Zones All Zones
</Label> </Label>
<Switch <Switch
className="ml-1" className="ml-1"
id="allZones" id="allZones"
checked={currentZones == undefined} checked={currentZones == undefined}
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentZones(undefined);
}
}}
/>
</div>
<div className="my-2.5 flex flex-col gap-2.5">
{allZones.map((item) => (
<FilterSwitch
label={item.replaceAll("_", " ")}
isChecked={currentZones?.includes(item) ?? false}
onCheckedChange={(isChecked) => { onCheckedChange={(isChecked) => {
if (isChecked) { if (isChecked) {
const updatedZones = currentZones ? [...currentZones] : []; setCurrentZones(undefined);
updatedZones.push(item);
setCurrentZones(updatedZones);
} else {
const updatedZones = currentZones ? [...currentZones] : [];
// can not deselect the last item
if (updatedZones.length > 1) {
updatedZones.splice(updatedZones.indexOf(item), 1);
setCurrentZones(updatedZones);
}
} }
}} }}
/> />
))} </div>
</div> <div className="my-2.5 flex flex-col gap-2.5">
</> {allZones.map((item) => (
)} <FilterSwitch
label={item.replaceAll("_", " ")}
isChecked={currentZones?.includes(item) ?? false}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedZones = currentZones
? [...currentZones]
: [];
updatedZones.push(item);
setCurrentZones(updatedZones);
} else {
const updatedZones = currentZones
? [...currentZones]
: [];
// can not deselect the last item
if (updatedZones.length > 1) {
updatedZones.splice(updatedZones.indexOf(item), 1);
setCurrentZones(updatedZones);
}
}
}}
/>
))}
</div>
</>
)}
</div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<div className="flex items-center justify-evenly p-2"> <div className="flex items-center justify-evenly p-2">
<Button <Button
@ -795,7 +800,7 @@ export function GeneralFilterContent({
<Button <Button
onClick={() => { onClick={() => {
setCurrentLabels(undefined); setCurrentLabels(undefined);
setCurrentZones(undefined); setCurrentZones?.(undefined);
updateLabelFilter(undefined); updateLabelFilter(undefined);
}} }}
> >