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

Replace inline styles with Tailwind classes in drag overlay

Browse Source 
Use Tailwind utility classes for static properties (positioning,
z-index, cursor, pointer-events) and keep inline styles only for
dynamic values (drag rectangle dimensions).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Gregg 2026-03-14 05:41:55 +00:00
parent 276075bf39
commit 77cb7c137b
1 changed files with 3 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/views/live/LiveCameraView.tsx
View File

@ -753,15 +753,15 @@ export default function LiveCameraView({
}}
>
<div
className={`flex flex-col items-center justify-center ${growClassName}`}
className={`relative flex flex-col items-center justify-center ${growClassName}`}
ref={clickOverlayRef}
style={{
aspectRatio: constrainedAspectRatio,
position: "relative",
}}
>
{clickOverlay && (
<div
className="absolute inset-0 z-40 cursor-crosshair select-none"
onMouseDown={handleOverlayMouseDown}
onMouseMove={handleOverlayMouseMove}
onMouseUp={handleOverlayMouseUp}
@ -769,30 +769,16 @@ export default function LiveCameraView({
onTouchMove={handleOverlayMouseMove}
onTouchEnd={handleOverlayMouseUp}
onDragStart={(e) => e.preventDefault()}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
zIndex: 40,
cursor: "crosshair",
userSelect: "none",
}}
/>
)}
{isDragging && dragRect && clickOverlay && (
<div
className="pointer-events-none absolute z-50 border-2 border-blue-500/80 bg-blue-500/15"
style={{
position: "absolute",
left: dragRect.left,
top: dragRect.top,
width: dragRect.width,
height: dragRect.height,
border: "2px solid rgba(59, 130, 246, 0.8)",
backgroundColor: "rgba(59, 130, 246, 0.15)",
pointerEvents: "none",
zIndex: 50,
}}
/>
)}