Use switch and adjust colors

2026-02-09 04:35:25 +03:00 · 2024-03-06 07:07:03 -07:00 · 2024-03-06 07:07:03 -07:00 · 656ca4fa7e
commit 656ca4fa7e
parent 4e82b3ddd9
3 changed files with 261 additions and 196 deletions
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@ -16,8 +16,11 @@ import { ReviewFilter } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
-import { getIconTypeForGroup } from "@/utils/iconUtil";
 import { IconType } from "react-icons";
+import { isMobile } from "react-device-detect";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";

 const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];

@ -137,18 +140,7 @@ function CamerasFilterButton({
    selectedCameras,
  );

-  return (
-    <DropdownMenu
-      open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          setCurrentCameras(selectedCameras);
-        }
-
-        setOpen(open);
-      }}
-    >
-      <DropdownMenuTrigger asChild>
+  const trigger = (
    <Button size="sm" className="mx-1 capitalize" variant="secondary">
      <FaVideo className="md:mr-[10px] text-muted-foreground" />
      <div className="hidden md:block">
@ -157,9 +149,12 @@ function CamerasFilterButton({
          : `${selectedCameras.length} Cameras`}
      </div>
    </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Filter Cameras</DropdownMenuLabel>
+  );
+  const content = (
+    <>
+      <DropdownMenuLabel className="flex justify-center">
+        Filter Cameras
+      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <FilterCheckBox
        isChecked={currentCameras == undefined}
@ -178,8 +173,7 @@ function CamerasFilterButton({
              <FilterCheckBox
                key={name}
                label={name}
-                  CheckIcon={getIconTypeForGroup(conf.icon)}
-                  isChecked
+                isChecked={false}
                onCheckedChange={() => {
                  setCurrentCameras([...conf.cameras]);
                }}
@ -196,16 +190,12 @@ function CamerasFilterButton({
          label={item.replaceAll("_", " ")}
          onCheckedChange={(isChecked) => {
            if (isChecked) {
-                const updatedCameras = currentCameras
-                  ? [...currentCameras]
-                  : [];
+              const updatedCameras = currentCameras ? [...currentCameras] : [];

              updatedCameras.push(item);
              setCurrentCameras(updatedCameras);
            } else {
-                const updatedCameras = currentCameras
-                  ? [...currentCameras]
-                  : [];
+              const updatedCameras = currentCameras ? [...currentCameras] : [];

              // can not deselect the last item
              if (updatedCameras.length > 1) {
@ -228,7 +218,40 @@ function CamerasFilterButton({
          Apply
        </Button>
      </div>
-      </DropdownMenuContent>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCurrentCameras(selectedCameras);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setCurrentCameras(selectedCameras);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>{content}</DropdownMenuContent>
    </DropdownMenu>
  );
 }
@ -255,30 +278,21 @@ function CalendarFilterButton({
    "%b %-d",
  );

-  return (
-    <Popover
-      open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          setSelectedDay(day);
-        }
-
-        setOpen(open);
-      }}
-    >
-      <PopoverTrigger asChild>
+  const trigger = (
    <Button size="sm" className="mx-1" variant="secondary">
      <FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
      <div className="hidden md:block">
        {day == undefined ? "Last 24 Hours" : selectedDate}
      </div>
    </Button>
-      </PopoverTrigger>
-      <PopoverContent>
+  );
+  const content = (
+    <>
      <Calendar
        mode="single"
        disabled={disabledDates}
        selected={selectedDay}
+        showOutsideDays={false}
        onSelect={(day) => {
          setSelectedDay(day);
        }}
@ -295,7 +309,40 @@ function CalendarFilterButton({
          Apply
        </Button>
      </div>
-      </PopoverContent>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedDay(day);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setSelectedDay(day);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent>{content}</PopoverContent>
    </Popover>
  );
 }
@ -320,42 +367,26 @@ function GeneralFilterButton({
    selectedLabels,
  );

-  return (
-    <Popover
-      open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          setReviewed(showReviewed ?? 0);
-          setCurrentLabels(selectedLabels);
-        }
-
-        setOpen(open);
-      }}
-    >
-      <PopoverTrigger asChild>
+  const trigger = (
    <Button size="sm" className="ml-1" variant="secondary">
      <FaFilter className="md:mr-[10px] text-muted-foreground" />
      <div className="hidden md:block">Filter</div>
    </Button>
-      </PopoverTrigger>
-      <PopoverContent side="left">
+  );
+  const content = (
    <>
-          <Button
-            className="capitalize flex justify-between items-center w-full"
-            variant="ghost"
-            onClick={() => setReviewed(reviewed == 0 ? 1 : 0)}
-          >
-            {reviewed ? (
-              <LuCheck className="w-6 h-6" />
-            ) : (
-              <div className="w-6 h-6" />
-            )}
-            <div className="ml-1 w-full flex justify-start text-primary-foreground">
-              Show Reviewed
+      <div className="flex p-2 justify-start items-center">
+        <Switch
+          id="reviewed"
+          checked={reviewed == 1}
+          onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)}
+        />
+        <Label className="ml-2" htmlFor="reviewed">Show Reviewed</Label>
      </div>
-          </Button>
      <DropdownMenuSeparator />
-          <DropdownMenuLabel>Filter Labels</DropdownMenuLabel>
+      <DropdownMenuLabel className="flex justify-center items-center">
+        Filter Labels
+      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <FilterCheckBox
        isChecked={currentLabels == undefined}
@ -410,7 +441,41 @@ function GeneralFilterButton({
        </Button>
      </div>
    </>
-      </PopoverContent>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setReviewed(showReviewed ?? 0);
+            setCurrentLabels(selectedLabels);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>{content}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setReviewed(showReviewed ?? 0);
+          setCurrentLabels(selectedLabels);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent side="left">{content}</PopoverContent>
    </Popover>
  );
 }
--- a/web/src/components/ui/calendar.tsx
+++ b/web/src/components/ui/calendar.tsx
@ -25,19 +25,19 @@ function Calendar({
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
+        head_row: "flex justify-center",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
+        row: "flex w-full mt-2 justify-center",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
        ),
        day_range_end: "day-range-end",
        day_selected:
--- a/web/src/components/ui/switch.tsx
+++ b/web/src/components/ui/switch.tsx
@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-selected data-[state=unchecked]:bg-input",
      className
    )}
    {...props}