administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-31 16:12:19 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

UI tweaks (#20675)

Browse Source 
* spacing tweaks and add link to explore for plate

* clear selected objects when changing cameras

* plate link and spacing in object lifecycle

* set tabindex to prevent tooltip from showing on reopen

* show month and day in object lifecycle timestamp
This commit is contained in:
Josh Hawkins
2025-10-26 07:27:07 -05:00
committed by GitHub
parent 2c480b9a89
commit 840d567d22
3 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/overlay/detail/ObjectLifecycle.tsx
+23 -14
View File
@@ -41,7 +41,7 @@ import {
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { useNavigate } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import { ObjectPath } from "./ObjectPath";
import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
import { IoPlayCircleOutline } from "react-icons/io5";
@@ -289,10 +289,10 @@ export default function ObjectLifecycle({
timezone: config.ui.timezone,
date_format:
config.ui.time_format == "24hour"
? t("time.formattedTimestampHourMinuteSecond.24hour", {
? t("time.formattedTimestamp.24hour", {
ns: "common",
})
: t("time.formattedTimestampHourMinuteSecond.12hour", {
: t("time.formattedTimestamp.12hour", {
ns: "common",
}),
time_style: "medium",
@@ -305,10 +305,10 @@ export default function ObjectLifecycle({
timezone: config.ui.timezone,
date_format:
config.ui.time_format == "24hour"
? t("time.formattedTimestampHourMinuteSecond.24hour", {
? t("time.formattedTimestamp.24hour", {
ns: "common",
})
: t("time.formattedTimestampHourMinuteSecond.12hour", {
: t("time.formattedTimestamp.12hour", {
ns: "common",
}),
time_style: "medium",
@@ -412,6 +412,7 @@ export default function ObjectLifecycle({
return (
<div className={className}>
<span tabIndex={0} className="sr-only" />
{!fullscreen && (
<div className={cn("flex items-center gap-2")}>
<Button
@@ -649,10 +650,15 @@ export default function ObjectLifecycle({
</span>
{event.data?.recognized_license_plate && (
<>
·{" "}
<span className="text-sm text-secondary-foreground">
{event.data.recognized_license_plate}
</span>
<span className="text-secondary-foreground">·</span>
<div className="text-sm text-secondary-foreground">
<Link
to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
className="text-sm"
>
{event.data.recognized_license_plate}
</Link>
</div>
</>
)}
</div>
@@ -832,10 +838,12 @@ function LifecycleIconRow({
/>
</div>
<div className="flex w-full flex-row justify-between">
<div className="ml-2 flex w-full min-w-0 flex-1">
<div className="flex flex-col">
<div>{getLifecycleItemDescription(item)}</div>
<div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-secondary-foreground md:gap-5">
<div className="text-md flex items-start break-words text-left">
{getLifecycleItemDescription(item)}
</div>
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-secondary-foreground md:gap-5">
<div className="flex items-center gap-1">
<span className="text-primary-variant">
{t("objectLifecycle.lifecycleItemDesc.header.ratio")}
@@ -893,8 +901,9 @@ function LifecycleIconRow({
)}
</div>
</div>
<div className={cn("p-1 text-sm")}>{formattedEventTimestamp}</div>
</div>
<div className="ml-3 flex-shrink-0 px-1 text-right text-xs text-primary-variant">
<div className="whitespace-nowrap">{formattedEventTimestamp}</div>
</div>
</div>
</div>