Add tooltips to various components and improve styling for better user experience

This commit is contained in:
2025-05-07 13:56:31 +05:30
parent b26a0cd6cd
commit ad2b6b96f3
15 changed files with 174 additions and 73 deletions

View File

@@ -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" : ""}`}
>