UI tweaks (#13711)

* Fix dialog autofocus problems on mobile * set font size to prevent mobile zooming * Use arrow keys to navigate Explore view
2024-11-21 19:07:46 +01:00 · 2024-09-12 22:07:35 -05:00 · 2024-09-12 22:07:35 -05:00 · 61854f1d6a
commit 61854f1d6a
parent 1f9ba1d625
11 changed files with 92 additions and 27 deletions
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@ -2,7 +2,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { useCallback, useState } from "react";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa";
 import Chip from "../indicators/Chip";
 import { Skeleton } from "../ui/skeleton";
@ -82,7 +82,13 @@ export default function ExportCard({
          }
        }}
      >
-        <DialogContent>
+        <DialogContent
+          onOpenAutoFocus={(e) => {
+            if (isMobile) {
+              e.preventDefault();
+            }
+          }}
+        >
          <DialogTitle>Rename Export</DialogTitle>
          <DialogDescription>
            Enter a new name for this export.
@ -90,7 +96,7 @@ export default function ExportCard({
          {editName && (
            <>
              <Input
-                className="mt-3"
+                className="text-md mt-3"
                type="search"
                placeholder={editName?.original}
                value={
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@ -710,7 +710,7 @@ export function CameraGroupEdit({
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input
-                  className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                  className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                  placeholder="Enter a name..."
                  disabled={editingGroup !== undefined}
                  {...field}
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@ -74,7 +74,7 @@ export default function CreateUserDialog({
                  <FormLabel>User</FormLabel>
                  <FormControl>
                    <Input
-                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                      {...field}
                    />
                  </FormControl>
@ -89,7 +89,7 @@ export default function CreateUserDialog({
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input
-                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                      type="password"
                      {...field}
                    />
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@ -273,7 +273,7 @@ export function ExportContent({
        />
      )}
      <Input
-        className="my-6"
+        className="text-md my-6"
        type="search"
        placeholder="Name the Export"
        value={name}
@ -431,7 +431,7 @@ function CustomTimeSelector({
          />
          <SelectSeparator className="bg-secondary" />
          <input
-            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
            id="startTime"
            type="time"
            value={startClock}
@ -493,7 +493,7 @@ function CustomTimeSelector({
          />
          <SelectSeparator className="bg-secondary" />
          <input
-            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
            id="startTime"
            type="time"
            value={endClock}
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@ -23,12 +23,12 @@ export default function SetPasswordDialog({

  return (
    <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent>
+      <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
        <DialogHeader>
          <DialogTitle>Set Password</DialogTitle>
        </DialogHeader>
        <Input
-          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
@ -178,7 +178,7 @@ export function AnnotationSettingsPane({
                  <div className="flex flex-col">
                    <FormControl>
                      <Input
-                        className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                        className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                        placeholder="0"
                        {...field}
                      />
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@ -373,7 +373,7 @@ export default function ZoneEditPane({
                <FormLabel>Name</FormLabel>
                <FormControl>
                  <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="Enter a name..."
                    {...field}
                  />
@ -395,7 +395,7 @@ export default function ZoneEditPane({
                <FormLabel>Inertia</FormLabel>
                <FormControl>
                  <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="3"
                    {...field}
                  />
@ -417,7 +417,7 @@ export default function ZoneEditPane({
                <FormLabel>Loitering Time</FormLabel>
                <FormControl>
                  <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="0"
                    {...field}
                  />
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@ -175,7 +175,7 @@ function Exports() {
      {exports && (
        <div className="flex w-full items-center justify-center p-2">
          <Input
-            className="w-full bg-muted md:w-1/3"
+            className="text-md w-full bg-muted md:w-1/3"
            placeholder="Search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
--- a/web/src/views/explore/ExploreView.tsx
+++ b/web/src/views/explore/ExploreView.tsx
@ -17,7 +17,7 @@ import useImageLoaded from "@/hooks/use-image-loaded";
 import ActivityIndicator from "@/components/indicators/activity-indicator";

 type ExploreViewProps = {
-  onSelectSearch: (searchResult: SearchResult) => void;
+  onSelectSearch: (searchResult: SearchResult, index: number) => void;
 };

 export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
@ -76,7 +76,7 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
 type ThumbnailRowType = {
  objectType: string;
  searchResults?: SearchResult[];
-  onSelectSearch: (searchResult: SearchResult) => void;
+  onSelectSearch: (searchResult: SearchResult, index: number) => void;
 };

 function ThumbnailRow({
@ -145,7 +145,7 @@ function ThumbnailRow({

 type ExploreThumbnailImageProps = {
  event: SearchResult;
-  onSelectSearch: (searchResult: SearchResult) => void;
+  onSelectSearch: (searchResult: SearchResult, index: number) => void;
 };
 function ExploreThumbnailImage({
  event,
@ -176,7 +176,7 @@ function ExploreThumbnailImage({
        loading={isSafari ? "eager" : "lazy"}
        draggable={false}
        src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
-        onClick={() => onSelectSearch(event)}
+        onClick={() => onSelectSearch(event, 0)}
        onLoad={() => {
          onImgLoad();
        }}
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@ -13,11 +13,15 @@ import {
 import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { SearchFilter, SearchResult } from "@/types/search";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isMobileOnly } from "react-device-detect";
 import { LuImage, LuSearchX, LuText, LuXCircle } from "react-icons/lu";
 import useSWR from "swr";
 import ExploreView from "../explore/ExploreView";
+import useKeyboardListener, {
+  KeyModifiers,
+} from "@/hooks/use-keyboard-listener";
+import scrollIntoView from "scroll-into-view-if-needed";

 type SearchViewProps = {
  search: string;
@ -59,8 +63,12 @@ export default function SearchView({

  // search interaction

-  const onSelectSearch = useCallback((item: SearchResult) => {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const onSelectSearch = useCallback((item: SearchResult, index: number) => {
    setSearchDetail(item);
+    setSelectedIndex(index);
  }, []);

  // confidence score - probably needs tweaking
@ -87,6 +95,56 @@ export default function SearchView({
    [searchResults, searchFilter],
  );

+  // keyboard listener
+
+  const onKeyboardShortcut = useCallback(
+    (key: string | null, modifiers: KeyModifiers) => {
+      if (!modifiers.down || !uniqueResults) {
+        return;
+      }
+
+      switch (key) {
+        case "ArrowLeft":
+          setSelectedIndex((prevIndex) => {
+            const newIndex =
+              prevIndex === null
+                ? uniqueResults.length - 1
+                : (prevIndex - 1 + uniqueResults.length) % uniqueResults.length;
+            setSearchDetail(uniqueResults[newIndex]);
+            return newIndex;
+          });
+          break;
+        case "ArrowRight":
+          setSelectedIndex((prevIndex) => {
+            const newIndex =
+              prevIndex === null ? 0 : (prevIndex + 1) % uniqueResults.length;
+            setSearchDetail(uniqueResults[newIndex]);
+            return newIndex;
+          });
+          break;
+      }
+    },
+    [uniqueResults],
+  );
+
+  useKeyboardListener(["ArrowLeft", "ArrowRight"], onKeyboardShortcut);
+
+  // scroll into view
+
+  useEffect(() => {
+    if (
+      selectedIndex !== null &&
+      uniqueResults &&
+      itemRefs.current?.[selectedIndex]
+    ) {
+      scrollIntoView(itemRefs.current[selectedIndex], {
+        block: "center",
+        behavior: "smooth",
+        scrollMode: "if-needed",
+      });
+    }
+  }, [selectedIndex, uniqueResults]);
+
  return (
    <div className="flex size-full flex-col pt-2 md:py-2">
      <Toaster closeButton={true} />
@ -156,12 +214,13 @@ export default function SearchView({
        {uniqueResults && (
          <div className="mt-2 grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-4 md:gap-4 3xl:grid-cols-6">
            {uniqueResults &&
-              uniqueResults.map((value) => {
-                const selected = false;
+              uniqueResults.map((value, index) => {
+                const selected = selectedIndex === index;

                return (
                  <div
                    key={value.id}
+                    ref={(item) => (itemRefs.current[index] = item)}
                    data-start={value.start_time}
                    className="review-item relative rounded-lg"
                  >
@ -173,7 +232,7 @@ export default function SearchView({
                      <SearchThumbnail
                        searchResult={value}
                        findSimilar={() => setSimilaritySearch(value)}
-                        onClick={() => onSelectSearch(value)}
+                        onClick={() => onSelectSearch(value, index)}
                      />
                      {searchTerm && (
                        <div className={cn("absolute right-2 top-2 z-40")}>
@ -207,7 +266,7 @@ export default function SearchView({
                      )}
                    </div>
                    <div
-                      className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-severity_alert outline-severity_alert` : "outline-transparent duration-500"}`}
+                      className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
                    />
                  </div>
                );
--- a/web/src/views/settings/NotificationsSettingsView.tsx
+++ b/web/src/views/settings/NotificationsSettingsView.tsx
@ -254,7 +254,7 @@ export default function NotificationView({
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input
-                        className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
+                        className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
                        placeholder="example@email.com"
                        {...field}
                      />