chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

UI tweaks (#10402)

Browse Source 
* add minor ticks to timeline

* don't display motion events on veritcal bars on motion timeline

* color tweaks and spacing on config editor

* pad start and end of timeline to ensure handlebar is always visible
This commit is contained in:
Josh Hawkins
2024-03-12 10:23:54 -05:00
committed by GitHub
parent 579a7c8900
commit a2b0ca07cc
6 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/timeline/segment-metadata.tsx
View File

@@ -64,8 +64,11 @@ export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
className={`h-0.5 ${
timestamp.getMinutes() % timestampSpread === 0 &&
timestamp.getSeconds() === 0
? "w-[12px] bg-gray-400"
: "w-[8px] bg-gray-600"
? "w-[12px] bg-neutral-600 dark:bg-neutral-500"
: timestamp.getMinutes() % (timestampSpread == 15 ? 5 : 1) ===
0 && timestamp.getSeconds() === 0
? "w-[8px] bg-neutral-500 dark:bg-neutral-600" // Minor tick mark
: "w-[5px] bg-neutral-400 dark:bg-neutral-700"
}`}
></div>
</div>
@@ -81,11 +84,11 @@ export function Timestamp({
segmentKey,
}: TimestampSegmentProps) {
return (
<div className="absolute left-[15px] top-[1px] h-2 z-10">
<div className="absolute left-[15px] h-2 z-10">
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
<div
key={`${segmentKey}_timestamp`}
className="text-[8px] text-gray-400"
className="text-[8px] text-neutral-600 dark:text-neutral-500"
>
{timestamp.getMinutes() % timestampSpread === 0 &&
timestamp.getSeconds() === 0 &&