administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +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" size="sm"
> >
<FaVideo <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 {selectedCameras == undefined
? "All Cameras" ? "All Cameras"
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`} : `${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)} onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
> >
<FaCheckCircle <FaCheckCircle
className={`${showReviewedSwitch == 1 ? "fill-primary" : "text-muted-foreground"}`} className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/> />
</Button> </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"}`} className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
> >
<FaCalendarAlt <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} {day == undefined ? "Last 24 Hours" : selectedDate}
</div> </div>
</Button> </Button>
@ -482,9 +486,18 @@ function GeneralFilterButton({
); );
const trigger = ( const trigger = (
<Button size="sm" className="flex items-center gap-2"> <Button
<FaFilter className="text-secondary-foreground" /> size="sm"
<div className="hidden md:block text-primary">Filter</div> 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> </Button>
); );
const content = ( const content = (

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

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