mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-05 22:57:40 +03:00
Replace inline styles with Tailwind classes in drag overlay
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:
parent
276075bf39
commit
77cb7c137b
@ -753,15 +753,15 @@ export default function LiveCameraView({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col items-center justify-center ${growClassName}`}
|
className={`relative flex flex-col items-center justify-center ${growClassName}`}
|
||||||
ref={clickOverlayRef}
|
ref={clickOverlayRef}
|
||||||
style={{
|
style={{
|
||||||
aspectRatio: constrainedAspectRatio,
|
aspectRatio: constrainedAspectRatio,
|
||||||
position: "relative",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{clickOverlay && (
|
{clickOverlay && (
|
||||||
<div
|
<div
|
||||||
|
className="absolute inset-0 z-40 cursor-crosshair select-none"
|
||||||
onMouseDown={handleOverlayMouseDown}
|
onMouseDown={handleOverlayMouseDown}
|
||||||
onMouseMove={handleOverlayMouseMove}
|
onMouseMove={handleOverlayMouseMove}
|
||||||
onMouseUp={handleOverlayMouseUp}
|
onMouseUp={handleOverlayMouseUp}
|
||||||
@ -769,30 +769,16 @@ export default function LiveCameraView({
|
|||||||
onTouchMove={handleOverlayMouseMove}
|
onTouchMove={handleOverlayMouseMove}
|
||||||
onTouchEnd={handleOverlayMouseUp}
|
onTouchEnd={handleOverlayMouseUp}
|
||||||
onDragStart={(e) => e.preventDefault()}
|
onDragStart={(e) => e.preventDefault()}
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
zIndex: 40,
|
|
||||||
cursor: "crosshair",
|
|
||||||
userSelect: "none",
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{isDragging && dragRect && clickOverlay && (
|
{isDragging && dragRect && clickOverlay && (
|
||||||
<div
|
<div
|
||||||
|
className="pointer-events-none absolute z-50 border-2 border-blue-500/80 bg-blue-500/15"
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
|
||||||
left: dragRect.left,
|
left: dragRect.left,
|
||||||
top: dragRect.top,
|
top: dragRect.top,
|
||||||
width: dragRect.width,
|
width: dragRect.width,
|
||||||
height: dragRect.height,
|
height: dragRect.height,
|
||||||
border: "2px solid rgba(59, 130, 246, 0.8)",
|
|
||||||
backgroundColor: "rgba(59, 130, 246, 0.15)",
|
|
||||||
pointerEvents: "none",
|
|
||||||
zIndex: 50,
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user