Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

fix draggable element pixel alignment (#10708)

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-27 08:21:38 -05:00 committed by GitHub
parent d945e77443
commit 98a1e6ee22
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/timeline/ReviewTimeline.tsx
View File

@ -259,7 +259,7 @@ export function ReviewTimeline({
></div> ></div>
</div> </div>
<div <div
className={`absolute h-1 w-full bg-destructive ${isDragging && isMobile && draggableElementType == "handlebar" ? "top-1" : "top-1/2 transform -translate-y-1/2"}`} className={`absolute h-[4px] w-full bg-destructive ${isDragging && isMobile && draggableElementType == "handlebar" ? "top-1" : "top-1/2 transform -translate-y-1/2"}`}
></div> ></div>
</div> </div>
</div> </div>
@ -293,7 +293,7 @@ export function ReviewTimeline({
></div> ></div>
</div> </div>
<div <div
className={`absolute h-1 w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_end" ? "top-0" : "top-1/2 transform -translate-y-1/2"}`} className={`absolute h-[4px] w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_end" ? "top-0" : "top-1/2 transform -translate-y-1/2"}`}
></div> ></div>
</div> </div>
</div> </div>
@ -318,7 +318,7 @@ export function ReviewTimeline({
}`} }`}
> >
<div <div
className={`absolute h-1 w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_start" ? "top-[12px]" : "top-1/2 transform -translate-y-1/2"}`} className={`absolute h-[4px] w-full bg-selected ${isDragging && isMobile && draggableElementType == "export_start" ? "top-[12px]" : "top-1/2 transform -translate-y-1/2"}`}
></div> ></div>
<div <div
className={`bg-selected mt-4 mx-auto ${ className={`bg-selected mt-4 mx-auto ${

6
web/src/hooks/use-draggable-element.ts
View File

@ -382,12 +382,12 @@ function useDraggableElement({
const timelineRect = timelineRef.current.getBoundingClientRect(); const timelineRect = timelineRef.current.getBoundingClientRect();
const timelineTopAbsolute = timelineRect.top; const timelineTopAbsolute = timelineRect.top;
const rect = segmentElement.getBoundingClientRect(); const rect = segmentElement.getBoundingClientRect();
const segmentTop = const segmentTop = rect.top + scrolled - timelineTopAbsolute;
rect.top + scrolled - timelineTopAbsolute - segmentHeight / 2;
const offset = const offset =
((draggableElementTime - alignedSegmentTime) / segmentDuration) * ((draggableElementTime - alignedSegmentTime) / segmentDuration) *
segmentHeight; segmentHeight;
const newElementPosition = segmentTop - offset; // subtract half the height of the handlebar cross bar (4px) for pixel perfection
const newElementPosition = segmentTop - offset - 2;
updateDraggableElementPosition( updateDraggableElementPosition(
newElementPosition, newElementPosition,