administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-05 04:57:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Base alert toggles on width not device class

Browse Source
This commit is contained in:
Nicolas Mowen 2025-04-23 06:58:13 -06:00
parent f5fd42bab0
commit 952770157d
1 changed files with 43 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
web/src/views/events/EventView.tsx
View File

@ -279,32 +279,29 @@ export default function EventView({
value="alert" value="alert"
aria-label={t("alerts")} aria-label={t("alerts")}
> >
{isMobileOnly ? ( <div
<div className={cn(
className={cn( "flex size-6 items-center justify-center rounded text-severity_alert sm:hidden",
"flex size-6 items-center justify-center rounded text-severity_alert", severityToggle == "alert" ? "font-semibold" : "font-medium",
severityToggle == "alert" ? "font-semibold" : "font-medium", )}
)} >
> {reviewCounts.alert > -1 ? (
reviewCounts.alert
) : (
<ActivityIndicator className="size-4" />
)}
</div>
<div className="hidden items-center sm:flex">
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
{t("alerts")}
{reviewCounts.alert > -1 ? ( {reviewCounts.alert > -1 ? (
reviewCounts.alert ` ∙ ${reviewCounts.alert}`
) : ( ) : (
<ActivityIndicator className="size-4" /> <ActivityIndicator className="ml-2 size-4" />
)} )}
</div> </div>
) : ( </div>
<>
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
{t("alerts")}
{reviewCounts.alert > -1 ? (
` ∙ ${reviewCounts.alert}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
)}
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
className={cn( className={cn(
@ -313,34 +310,29 @@ export default function EventView({
value="detection" value="detection"
aria-label={t("detections")} aria-label={t("detections")}
> >
{isMobileOnly ? ( <div
<div className={cn(
className={cn( "flex size-6 items-center justify-center rounded text-severity_detection sm:hidden",
"flex size-6 items-center justify-center rounded text-severity_detection", severityToggle == "detection" ? "font-semibold" : "font-medium",
severityToggle == "detection" )}
? "font-semibold" >
: "font-medium", {reviewCounts.detection > -1 ? (
)} reviewCounts.detection
> ) : (
<ActivityIndicator className="size-4" />
)}
</div>
<div className="hidden items-center sm:flex">
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
{t("detections")}
{reviewCounts.detection > -1 ? ( {reviewCounts.detection > -1 ? (
reviewCounts.detection ` ∙ ${reviewCounts.detection}`
) : ( ) : (
<ActivityIndicator className="size-4" /> <ActivityIndicator className="ml-2 size-4" />
)} )}
</div> </div>
) : ( </div>
<>
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
{t("detections")}
{reviewCounts.detection > -1 ? (
` ∙ ${reviewCounts.detection}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
)}
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
className={cn( className={cn(
@ -350,14 +342,11 @@ export default function EventView({
value="significant_motion" value="significant_motion"
aria-label={t("motion.label")} aria-label={t("motion.label")}
> >
{isMobileOnly ? ( <GiSoundWaves className="size-6 rotate-90 text-severity_significant_motion sm:hidden" />
<GiSoundWaves className="size-6 rotate-90 text-severity_significant_motion" /> <div className="hidden items-center sm:flex">
) : ( <MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
<> <div className="hidden md:block">{t("motion.label")}</div>
<MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" /> </div>
<div className="hidden md:block">{t("motion.label")}</div>
</>
)}
</ToggleGroupItem> </ToggleGroupItem>
</ToggleGroup> </ToggleGroup>