administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

change filters button to bg-selected when filtering

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-09 15:28:42 -05:00
parent 2f78f63c51
commit 4b34b93c19
3 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -226,9 +226,11 @@ function CamerasFilterButton({
size="sm"
>
<FaVideo
className={`${selectedCameras?.length ? "text-primary" : "text-secondary-foreground"}`}
className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<div className="hidden md:block text-primary">
<div
className={`hidden md:block ${selectedCameras?.length ? "text-background dark:text-primary" : "text-primary"}`}
>
{selectedCameras == undefined
? "All Cameras"
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
@ -394,7 +396,7 @@ function ShowReviewFilter({
onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
>
<FaCheckCircle
className={`${showReviewedSwitch == 1 ? "fill-primary" : "text-muted-foreground"}`}
className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
</Button>
</>
@ -422,9 +424,11 @@ function CalendarFilterButton({
className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
>
<FaCalendarAlt
className={`${day == undefined ? "text-secondary-foreground" : "text-primary"}`}
className={`${day == undefined ? "text-secondary-foreground" : "text-background dark:text-primary"}`}
/>
<div className="hidden md:block text-primary">
<div
className={`hidden md:block ${day == undefined ? "text-primary" : "text-background dark:text-primary"}`}
>
{day == undefined ? "Last 24 Hours" : selectedDate}
</div>
</Button>
@ -482,9 +486,18 @@ function GeneralFilterButton({
);
const trigger = (
<Button size="sm" className="flex items-center gap-2">
<FaFilter className="text-secondary-foreground" />
<div className="hidden md:block text-primary">Filter</div>
<Button
size="sm"
className={`flex items-center gap-2 capitalize ${selectedLabels?.length ? "bg-selected hover:bg-selected" : ""}`}
>
<FaFilter
className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<div
className={`hidden md:block ${selectedLabels?.length ? "text-background dark:text-primary" : "text-primary"}`}
>
Filter
</div>
</Button>
);
const content = (

18
web/src/components/overlay/MobileReviewSettingsDrawer.tsx
View File

@ -146,19 +146,23 @@ export default function MobileReviewSettingsDrawer({
)}
{features.includes("calendar") && (
<Button
className="w-full flex justify-center items-center gap-2"
className={`w-full flex justify-center items-center gap-2 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`}
onClick={() => setDrawerMode("calendar")}
>
<FaCalendarAlt className="fill-secondary-foreground" />
<FaCalendarAlt
className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
Calendar
</Button>
)}
{features.includes("filter") && (
<Button
className="w-full flex justify-center items-center gap-2"
className={`w-full flex justify-center items-center gap-2 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`}
onClick={() => setDrawerMode("filter")}
>
<FaFilter className="fill-secondary-foreground" />
<FaFilter
className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
Filter
</Button>
)}
@ -279,11 +283,13 @@ export default function MobileReviewSettingsDrawer({
>
<DrawerTrigger asChild>
<Button
className="rounded-lg capitalize"
className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
size="sm"
onClick={() => setDrawerMode("select")}
>
<FaCog className="text-secondary-foreground" />
<FaCog
className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
</Button>
</DrawerTrigger>
<DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">

2
web/src/components/player/VideoControls.tsx
View File

@ -142,7 +142,7 @@ export default function VideoControls({
return (
<div
className={`px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-secondary-foreground/60 rounded-lg ${className ?? ""}`}
className={`px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-background/60 rounded-lg ${className ?? ""}`}
>
{video && features.volume && (
<div className="flex justify-normal items-center gap-2">