feat: introduce BlockComponent and comprehensive styling for interactive simulation dashboard blocks
This commit is contained in:
@@ -111,32 +111,6 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
|
|||||||
<ResizeIcon />
|
<ResizeIcon />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Drag handle indicator for absolute/fixed blocks */}
|
|
||||||
{isDraggable && editMode && (
|
|
||||||
<div
|
|
||||||
className="drag-handle"
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "5px",
|
|
||||||
left: "5px",
|
|
||||||
width: "20px",
|
|
||||||
height: "20px",
|
|
||||||
backgroundColor: "rgba(33, 150, 243, 0.8)",
|
|
||||||
borderRadius: "4px",
|
|
||||||
cursor: "move",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
color: "white",
|
|
||||||
fontSize: "12px",
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
title="Drag to move"
|
|
||||||
>
|
|
||||||
⤣
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -96,27 +96,6 @@
|
|||||||
|
|
||||||
&.draggable {
|
&.draggable {
|
||||||
cursor: move;
|
cursor: move;
|
||||||
|
|
||||||
&:hover .drag-handle {
|
|
||||||
background-color: rgba(33, 150, 243, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drag-handle {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
left: 5px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: rgba(33, 150, 243, 0.8);
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: move;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.element-button-container {
|
.element-button-container {
|
||||||
|
|||||||
Reference in New Issue
Block a user