Add tooltips to various components and improve styling for better user experience
This commit is contained in:
@@ -218,6 +218,7 @@ const Tools: React.FC = () => {
|
||||
setActiveTool("cursor");
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">cursor</div>
|
||||
<CursorIcon isActive={activeTool === "cursor"} />
|
||||
</div>
|
||||
)}
|
||||
@@ -230,6 +231,7 @@ const Tools: React.FC = () => {
|
||||
setActiveTool("free-hand");
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">free hand</div>
|
||||
<FreeMoveIcon isActive={activeTool === "free-hand"} />
|
||||
</div>
|
||||
)}
|
||||
@@ -242,6 +244,7 @@ const Tools: React.FC = () => {
|
||||
setActiveTool("delete");
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">delete</div>
|
||||
<DeleteIcon isActive={activeTool === "delete"} />
|
||||
</div>
|
||||
)}
|
||||
@@ -315,8 +318,8 @@ const Tools: React.FC = () => {
|
||||
onClick={() => {
|
||||
setActiveTool("draw-wall");
|
||||
}}
|
||||
title="Wall"
|
||||
>
|
||||
<div className="tooltip">draw wall</div>
|
||||
<WallIcon isActive={activeTool === "draw-wall"} />
|
||||
</div>
|
||||
<div
|
||||
@@ -326,8 +329,8 @@ const Tools: React.FC = () => {
|
||||
onClick={() => {
|
||||
setActiveTool("draw-zone");
|
||||
}}
|
||||
title="Zone"
|
||||
>
|
||||
<div className="tooltip">draw zone</div>
|
||||
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
||||
</div>
|
||||
<div
|
||||
@@ -337,8 +340,8 @@ const Tools: React.FC = () => {
|
||||
onClick={() => {
|
||||
setActiveTool("draw-aisle");
|
||||
}}
|
||||
title="Aisle"
|
||||
>
|
||||
<div className="tooltip">draw asile</div>
|
||||
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
||||
</div>
|
||||
<div
|
||||
@@ -348,8 +351,8 @@ const Tools: React.FC = () => {
|
||||
onClick={() => {
|
||||
setActiveTool("draw-floor");
|
||||
}}
|
||||
title="Floor"
|
||||
>
|
||||
<div className="tooltip">draw floor</div>
|
||||
<FloorIcon isActive={activeTool === "draw-floor"} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -366,8 +369,8 @@ const Tools: React.FC = () => {
|
||||
onClick={() => {
|
||||
setActiveTool("measure");
|
||||
}}
|
||||
title="Measure"
|
||||
>
|
||||
<div className="tooltip">measure scale</div>
|
||||
<MeasureToolIcon isActive={activeTool === "measure"} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -385,6 +388,7 @@ const Tools: React.FC = () => {
|
||||
setActiveTool("pen");
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">pen</div>
|
||||
<PenIcon isActive={activeTool === "pen"} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -407,6 +411,7 @@ const Tools: React.FC = () => {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">save template</div>
|
||||
<SaveTemplateIcon isActive={false} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -422,6 +427,7 @@ const Tools: React.FC = () => {
|
||||
setActiveTool("comment");
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">comment</div>
|
||||
<CommentIcon isActive={activeTool === "comment"} />
|
||||
</div>
|
||||
{toggleThreeD && (
|
||||
@@ -433,6 +439,7 @@ const Tools: React.FC = () => {
|
||||
setIsPlaying(!isPlaying);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">play</div>
|
||||
<PlayIcon isActive={activeTool === "play"} />
|
||||
</div>
|
||||
)}
|
||||
@@ -446,6 +453,7 @@ const Tools: React.FC = () => {
|
||||
}`}
|
||||
onClick={toggleSwitch}
|
||||
>
|
||||
<div className="tooltip">toggle view</div>
|
||||
<div
|
||||
className={`toggle-option${!toggleThreeD ? " active" : ""}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user