Rework mobile drawers to have a max height (#10330)

This commit is contained in:
Nicolas Mowen 2024-03-08 10:14:58 -07:00 committed by GitHub
parent cb3045b424
commit ea5cb4fd8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 158 additions and 130 deletions

View File

@ -155,56 +155,62 @@ function CamerasFilterButton({
Filter Cameras
</DropdownMenuLabel>
<DropdownMenuSeparator />
<FilterCheckBox
isChecked={currentCameras == undefined}
label="All Cameras"
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentCameras(undefined);
}
}}
/>
{groups.length > 0 && (
<>
<DropdownMenuSeparator />
{groups.map(([name, conf]) => {
return (
<FilterCheckBox
key={name}
label={name}
isChecked={false}
onCheckedChange={() => {
setCurrentCameras([...conf.cameras]);
}}
/>
);
})}
</>
)}
<DropdownMenuSeparator />
{allCameras.map((item) => (
<div className="h-auto overflow-y-auto overflow-x-hidden">
<FilterCheckBox
key={item}
isChecked={currentCameras?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
isChecked={currentCameras == undefined}
label="All Cameras"
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedCameras = currentCameras ? [...currentCameras] : [];
updatedCameras.push(item);
setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras ? [...currentCameras] : [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
setCurrentCameras(updatedCameras);
}
setCurrentCameras(undefined);
}
}}
/>
))}
{groups.length > 0 && (
<>
<DropdownMenuSeparator />
{groups.map(([name, conf]) => {
return (
<FilterCheckBox
key={name}
label={name}
isChecked={false}
onCheckedChange={() => {
setCurrentCameras([...conf.cameras]);
}}
/>
);
})}
</>
)}
<DropdownMenuSeparator />
{allCameras.map((item) => (
<FilterCheckBox
key={item}
isChecked={currentCameras?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
updatedCameras.push(item);
setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
setCurrentCameras(updatedCameras);
}
}
}}
/>
))}
</div>
<DropdownMenuSeparator />
<div className="flex justify-center items-center">
<Button
@ -233,7 +239,9 @@ function CamerasFilterButton({
}}
>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent>{content}</DrawerContent>
<DrawerContent className="max-h-[75dvh] overflow-hidden">
{content}
</DrawerContent>
</Drawer>
);
}
@ -380,46 +388,50 @@ function GeneralFilterButton({
checked={reviewed == 1}
onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)}
/>
<Label className="ml-2" htmlFor="reviewed">Show Reviewed</Label>
<Label className="ml-2" htmlFor="reviewed">
Show Reviewed
</Label>
</div>
<DropdownMenuSeparator />
<DropdownMenuLabel className="flex justify-center items-center">
Filter Labels
</DropdownMenuLabel>
<DropdownMenuSeparator />
<FilterCheckBox
isChecked={currentLabels == undefined}
label="All Labels"
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentLabels(undefined);
}
}}
/>
<DropdownMenuSeparator />
{allLabels.map((item) => (
<div className="h-auto overflow-y-auto overflow-x-hidden">
<FilterCheckBox
key={item}
isChecked={currentLabels?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
isChecked={currentLabels == undefined}
label="All Labels"
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);
}
setCurrentLabels(undefined);
}
}}
/>
))}
<DropdownMenuSeparator />
{allLabels.map((item) => (
<FilterCheckBox
key={item}
isChecked={currentLabels?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
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>
<DropdownMenuSeparator />
<div className="flex justify-center items-center">
<Button
@ -456,7 +468,9 @@ function GeneralFilterButton({
}}
>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent>{content}</DrawerContent>
<DrawerContent className="max-h-[75dvh] overflow-hidden">
{content}
</DrawerContent>
</Drawer>
);
}

View File

@ -9,6 +9,7 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import {
DropdownMenu,
DropdownMenuContent,
@ -20,6 +21,7 @@ import { Event } from "@/types/event";
import { FrigateConfig } from "@/types/frigateConfig";
import axios from "axios";
import { useCallback, useMemo, useState } from "react";
import { isMobile } from "react-device-detect";
import { FaList, FaVideo } from "react-icons/fa";
import useSWR from "swr";
@ -193,9 +195,13 @@ function PlusFilterGroup({
undefined,
);
const Menu = isMobile ? Drawer : DropdownMenu;
const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
const Content = isMobile ? DrawerContent : DropdownMenuContent;
return (
<div className="w-full h-16 flex justify-start gap-2 items-center">
<DropdownMenu
<Menu
open={open == "camera"}
onOpenChange={(open) => {
if (!open) {
@ -204,7 +210,7 @@ function PlusFilterGroup({
setOpen(open ? "camera" : "none");
}}
>
<DropdownMenuTrigger asChild>
<Trigger asChild>
<Button size="sm" className="mx-1 capitalize" variant="secondary">
<FaVideo className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block">
@ -213,8 +219,8 @@ function PlusFilterGroup({
: `${selectedCameras.length} Cameras`}
</div>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
</Trigger>
<Content className={isMobile ? "max-h-[75dvh]" : ""}>
<DropdownMenuLabel className="flex justify-center">
Filter Cameras
</DropdownMenuLabel>
@ -229,33 +235,35 @@ function PlusFilterGroup({
}}
/>
<DropdownMenuSeparator />
{allCameras.map((item) => (
<FilterCheckBox
key={item}
isChecked={currentCameras?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
<div className={isMobile ? "h-auto overflow-y-auto" : ""}>
{allCameras.map((item) => (
<FilterCheckBox
key={item}
isChecked={currentCameras?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
updatedCameras.push(item);
setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
updatedCameras.push(item);
setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
setCurrentCameras(updatedCameras);
}
}
}
}}
/>
))}
}}
/>
))}
</div>
<DropdownMenuSeparator />
<div className="flex justify-center items-center">
<Button
@ -268,9 +276,9 @@ function PlusFilterGroup({
Apply
</Button>
</div>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu
</Content>
</Menu>
<Menu
open={open == "label"}
onOpenChange={(open) => {
if (!open) {
@ -279,7 +287,7 @@ function PlusFilterGroup({
setOpen(open ? "label" : "none");
}}
>
<DropdownMenuTrigger asChild>
<Trigger asChild>
<Button size="sm" className="mx-1 capitalize" variant="secondary">
<FaList className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block">
@ -288,8 +296,8 @@ function PlusFilterGroup({
: `${selectedLabels.length} Labels`}
</div>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
</Trigger>
<Content className={isMobile ? "max-h-[75dvh]" : ""}>
<DropdownMenuLabel className="flex justify-center">
Filter Labels
</DropdownMenuLabel>
@ -304,29 +312,35 @@ function PlusFilterGroup({
}}
/>
<DropdownMenuSeparator />
{allLabels.map((item) => (
<FilterCheckBox
key={item}
isChecked={currentLabels?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedLabels = currentLabels ? [...currentLabels] : [];
<div className={isMobile ? "h-auto overflow-y-auto" : ""}>
{allLabels.map((item) => (
<FilterCheckBox
key={item}
isChecked={currentLabels?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
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);
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="flex justify-center items-center">
<Button
@ -339,8 +353,8 @@ function PlusFilterGroup({
Apply
</Button>
</div>
</DropdownMenuContent>
</DropdownMenu>
</Content>
</Menu>
</div>
);
}