mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-14 23:25:25 +03:00
icon tweaks
This commit is contained in:
parent
4f7a14b917
commit
1dd561f718
@ -19,6 +19,8 @@ import { DateRange } from "react-day-picker";
|
|||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import SubFilterIcon from "../icons/SubFilterIcon";
|
import SubFilterIcon from "../icons/SubFilterIcon";
|
||||||
import { FaLocationDot } from "react-icons/fa6";
|
import { FaLocationDot } from "react-icons/fa6";
|
||||||
|
import { MdLabel } from "react-icons/md";
|
||||||
|
import SearchSourceIcon from "../icons/SearchSourceIcon";
|
||||||
|
|
||||||
const SEARCH_FILTERS = [
|
const SEARCH_FILTERS = [
|
||||||
"cameras",
|
"cameras",
|
||||||
@ -241,7 +243,7 @@ function GeneralFilterButton({
|
|||||||
variant={selectedLabels?.length ? "select" : "default"}
|
variant={selectedLabels?.length ? "select" : "default"}
|
||||||
className="flex items-center gap-2 capitalize"
|
className="flex items-center gap-2 capitalize"
|
||||||
>
|
>
|
||||||
<FaFilter
|
<MdLabel
|
||||||
className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
@ -763,7 +765,7 @@ function SearchTypeButton({
|
|||||||
variant={selectedSearchSources?.length != 2 ? "select" : "default"}
|
variant={selectedSearchSources?.length != 2 ? "select" : "default"}
|
||||||
className="flex items-center gap-2 capitalize"
|
className="flex items-center gap-2 capitalize"
|
||||||
>
|
>
|
||||||
<FaFilter
|
<SearchSourceIcon
|
||||||
className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
|
|||||||
26
web/src/components/icons/SearchSourceIcon.tsx
Normal file
26
web/src/components/icons/SearchSourceIcon.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { forwardRef } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { FaImage } from "react-icons/fa";
|
||||||
|
import { LuText } from "react-icons/lu";
|
||||||
|
|
||||||
|
type SearchSourceIconProps = {
|
||||||
|
className?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SearchSourceIcon = forwardRef<HTMLDivElement, SearchSourceIconProps>(
|
||||||
|
({ className, onClick }, ref) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("relative flex items-center", className)}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<LuText className="absolute size-3 translate-x-3 translate-y-3/4" />
|
||||||
|
<FaImage className="size-5" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export default SearchSourceIcon;
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import { forwardRef } from "react";
|
import { forwardRef } from "react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { FaCog, FaFilter } from "react-icons/fa";
|
import { FaCog } from "react-icons/fa";
|
||||||
|
import { MdLabelOutline } from "react-icons/md";
|
||||||
|
|
||||||
type SubFilterIconProps = {
|
type SubFilterIconProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
@ -15,8 +16,8 @@ const SubFilterIcon = forwardRef<HTMLDivElement, SubFilterIconProps>(
|
|||||||
className={cn("relative flex items-center", className)}
|
className={cn("relative flex items-center", className)}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<FaFilter className="size-full" />
|
<FaCog className="absolute size-3 translate-x-4 translate-y-[62%]" />
|
||||||
<FaCog className="absolute size-3 translate-x-3 translate-y-3/4" />
|
<MdLabelOutline className="size-full" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
@ -126,9 +126,7 @@ export default function SearchView({
|
|||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
className="text-md w-full bg-muted pr-10"
|
className="text-md w-full bg-muted pr-10"
|
||||||
placeholder={
|
placeholder={"Search for a detected object..."}
|
||||||
isMobileOnly ? "Search" : "Search for a detected object..."
|
|
||||||
}
|
|
||||||
value={similaritySearch ? "" : search}
|
value={similaritySearch ? "" : search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user