Refactor Simulations component layout: streamline event handling and add comparison functionality
This commit is contained in:
@@ -153,13 +153,25 @@ const Simulations: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
{products.length > 1 && (
|
||||
<>
|
||||
<div
|
||||
className="remove-button"
|
||||
onClick={() => handleRemoveProduct(product.productId)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="resize-icon"
|
||||
id="action-resize"
|
||||
onMouseDown={(e) => handleResize(e, productsContainerRef)}
|
||||
>
|
||||
<ResizeHeightIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="simulation-process section">
|
||||
<button
|
||||
@@ -171,10 +183,23 @@ const Simulations: React.FC = () => {
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
{openObjects && events.map((event, index) => <List key={index} val={event} />)}
|
||||
{openObjects &&
|
||||
events.map((event, index) => <List key={index} val={event} />)}
|
||||
</div>
|
||||
|
||||
<div className="compare-simulations-container">
|
||||
<div className="compare-simulations-header">
|
||||
Need to Compare Layout?
|
||||
</div>
|
||||
<div className="content">
|
||||
Click <span>'Compare'</span> to review and analyze the layout
|
||||
differences between them.
|
||||
</div>
|
||||
<div className="input">
|
||||
<input type="button" value={"Compare"} className="submit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedAsset && (
|
||||
<RenderOverlay>
|
||||
@@ -196,12 +221,6 @@ const Simulations: React.FC = () => {
|
||||
</RenderOverlay>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user