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

add blue dot instead of blue outline

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-24 16:35:58 -05:00
parent eb51eb3c9d
commit e26a54930f
1 changed files with 67 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
web/src/components/timeline/DetailStream.tsx
View File

@ -291,71 +291,84 @@ function ReviewGroup({
return ( return (
<div <div
data-review-id={id} data-review-id={id}
className={`cursor-pointer rounded-lg bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] ${ className="cursor-pointer rounded-lg bg-secondary py-3"
isActive
? "shadow-selected outline-selected"
: "outline-transparent duration-500"
}`}
> >
<div <div
className="flex items-center justify-between" className={cn(
"flex items-start",
open && "border-b border-secondary-highlight pb-4",
)}
onClick={() => { onClick={() => {
onActivate?.(); onActivate?.();
onSeek(start); onSeek(start);
}} }}
> >
<div className="ml-1 flex flex-col items-start gap-1.5"> <div className="ml-4 mr-2 mt-1.5 flex flex-row items-start">
<div className="flex flex-row gap-3"> <LuCircle
<div className="text-sm font-medium">{displayTime}</div> className={cn(
<div className="flex items-center gap-2"> "size-3",
{iconLabels.slice(0, 5).map((lbl, idx) => ( isActive
<div ? "fill-selected text-selected"
key={`${lbl}-${idx}`} : "fill-secondary-highlight text-secondary-highlight duration-500",
className="rounded-full bg-muted-foreground p-1"
>
{getIconForLabel(lbl, "size-3 text-primary dark:text-white")}
</div>
))}
</div>
</div>
<div className="flex flex-col gap-0.5">
{review.data.metadata?.title && (
<div className="mb-1 text-sm text-primary-variant">
{review.data.metadata.title}
</div>
)} )}
<div className="flex flex-row items-center gap-1.5"> />
<div className="text-xs text-primary-variant">{reviewInfo}</div> </div>
<div className="mr-3 flex w-full justify-between">
{reviewDuration && ( <div className="ml-1 flex flex-col items-start gap-1.5">
<> <div className="flex flex-row gap-3">
<span className="text-[5px] text-primary-variant">•</span> <div className="text-sm font-medium">{displayTime}</div>
<div className="text-xs text-primary-variant"> <div className="flex items-center gap-2">
{reviewDuration} {iconLabels.slice(0, 5).map((lbl, idx) => (
<div
key={`${lbl}-${idx}`}
className="rounded-full bg-muted-foreground p-1"
>
{getIconForLabel(
lbl,
"size-3 text-primary dark:text-white",
)}
</div> </div>
</> ))}
</div>
</div>
<div className="flex flex-col gap-0.5">
{review.data.metadata?.title && (
<div className="mb-1 text-sm text-primary-variant">
{review.data.metadata.title}
</div>
)} )}
<div className="flex flex-row items-center gap-1.5">
<div className="text-xs text-primary-variant">{reviewInfo}</div>
{reviewDuration && (
<>
<span className="text-[5px] text-primary-variant">•</span>
<div className="text-xs text-primary-variant">
{reviewDuration}
</div>
</>
)}
</div>
</div> </div>
</div> </div>
</div> <div
<div onClick={(e) => {
onClick={(e) => { e.stopPropagation();
e.stopPropagation(); setOpen((v) => !v);
setOpen((v) => !v); }}
}} className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10"
aria-label={open ? "Collapse" : "Expand"} >
className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10" {open ? (
> <LuChevronDown className="size-4 text-primary-variant" />
{open ? ( ) : (
<LuChevronDown className="size-4 text-primary-variant" /> <LuChevronRight className="size-4 text-primary-variant" />
) : ( )}
<LuChevronRight className="size-4 text-primary-variant" /> </div>
)}
</div> </div>
</div> </div>
{open && ( {open && (
<div className="mt-2 space-y-0.5"> <div className="space-y-0.5">
{shouldFetchEvents && isValidating && !fetchedEvents ? ( {shouldFetchEvents && isValidating && !fetchedEvents ? (
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
@ -446,9 +459,9 @@ function EventList({
<> <>
<div <div
className={cn( className={cn(
"rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px]", "rounded-md bg-secondary p-2",
event.id == selectedObjectId event.id == selectedObjectId
? "bg-secondary-highlight shadow-selected outline-selected" ? "bg-secondary-highlight"
: "outline-transparent duration-500", : "outline-transparent duration-500",
event.id != selectedObjectId && event.id != selectedObjectId &&
(effectiveTime ?? 0) >= (event.start_time ?? 0) - 0.5 && (effectiveTime ?? 0) >= (event.start_time ?? 0) - 0.5 &&
@ -593,7 +606,9 @@ function LifecycleItem({
<div className="flex w-full flex-row justify-between"> <div className="flex w-full flex-row justify-between">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<span>{getLifecycleItemDescription(item)}</span> <div className="flex items-start text-left">
{getLifecycleItemDescription(item)}
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<div className="mt-1 flex flex-wrap items-start gap-3 text-sm text-secondary-foreground"> <div className="mt-1 flex flex-wrap items-start gap-3 text-sm text-secondary-foreground">