feat(ui): Add some nice icons to all map action buttons

Hypfer · Dec 22, 2023 · 4e958da · 4e958da
1 parent 870d25d
commit 4e958da
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 21 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -35,13 +35,14 @@
     "@fontsource/roboto": "5.0.8",
     "@mui/material": "5.14.18",
     "@mui/base": "5.0.0-alpha.128",
-    "@mui/icons-material": "5.14.18",
+    "@mui/icons-material": "5.15.1",
     "@mui/lab": "5.0.0-alpha.153",
     "@mui/x-date-pickers": "6.18.2",
     "@emotion/styled": "11.11.0",
     "@emotion/react": "11.11.1",
     "@tanstack/react-query": "5.8.7",
     "@tanstack/react-query-devtools": "5.8.7",
+    "@mui-extra/icons": "0.0.65",
     "axios": "1.6.2",
     "date-fns": "2.30.0",
     "notistack": "3.0.1",

diff --git a/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx b/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx
@@ -20,6 +20,14 @@ import {
 import {ActionButton} from "../../Styled";
 import CuttingLineClientStructure from "../../structures/client_structures/CuttingLineClientStructure";
 import {PointCoordinates} from "../../utils/types";
+import {
+    Clear as ClearIcon,
+    JoinFull as JoinIcon,
+    ContentCut as SplitIcon
+} from "@mui/icons-material";
+import {
+    FormTextboxIcon as RenameIcon
+} from "@mui-extra/icons/FormTextboxIcon";
 
 interface SegmentActionsProperties {
     robotStatus: StatusState,
@@ -126,12 +134,13 @@ const SegmentActions = (
 
                 <Grid item>
                     <ActionButton
-                        disabled={joinSegmentsExecuting || !canEdit}
+                        disabled={joinSegmentsExecuting || !canEdit || selectedSegmentIds.length !== 2}
                         color="inherit"
                         size="medium"
                         variant="extended"
                         onClick={handleJoinClick}
                     >
+                        <JoinIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Join {segmentNames[selectedSegmentIds[0]]} and {selectedSegmentIds.length === 2 ? segmentNames[selectedSegmentIds[1]] : "?"}
                         {joinSegmentsExecuting && (
                             <CircularProgress
@@ -156,6 +165,7 @@ const SegmentActions = (
                         variant="extended"
                         onClick={handleSplitClick}
                     >
+                        <SplitIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Split {segmentNames[selectedSegmentIds[0]]}
                         {splitSegmentExecuting && (
                             <CircularProgress
@@ -183,6 +193,7 @@ const SegmentActions = (
                             setRenameDialogOpen(true);
                         }}
                     >
+                        <RenameIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Rename
                     </ActionButton>
                 </Grid>
@@ -200,6 +211,7 @@ const SegmentActions = (
                         variant="extended"
                         onClick={onAddCuttingLine}
                     >
+                        <SplitIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Add Cutting Line
                     </ActionButton>
                 </Grid>
@@ -217,6 +229,7 @@ const SegmentActions = (
                         variant="extended"
                         onClick={onClear}
                     >
+                        <ClearIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Clear
                     </ActionButton>
                 </Grid>

diff --git a/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx b/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx
@@ -14,6 +14,15 @@ import NoGoAreaClientStructure from "../../structures/client_structures/NoGoArea
 import NoMopAreaClientStructure from "../../structures/client_structures/NoMopAreaClientStructure";
 import RestrictedZoneClientStructure from "../../structures/client_structures/RestrictedZoneClientStructure";
 import {PointCoordinates} from "../../utils/types";
+import {
+    Save as SaveIcon,
+    Refresh as RefreshIcon,
+    FormatColorReset as NoMopAreaIcon,
+    RemoveCircle as NoGoAreaIcon
+} from "@mui/icons-material";
+import {
+    WallIcon as VirtualWallIcon
+} from "@mui-extra/icons/WallIcon";
 
 interface VirtualRestrictionActionsProperties {
     robotStatus: StatusState,
@@ -131,6 +140,7 @@ const VirtualRestrictionActions = (
                 <Button color="primary" variant="contained" onClick={() => {
                     return refetchCombinedVirtualRestrictionsProperties();
                 }}>
+                    <RefreshIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                     Retry
                 </Button>
             </Container>
@@ -151,7 +161,6 @@ const VirtualRestrictionActions = (
                 <Typography align="center">
                     No {Capability.CombinedVirtualRestrictions} properties
                 </Typography>
-                ;
             </Container>
         );
     }
@@ -170,6 +179,7 @@ const VirtualRestrictionActions = (
                         variant="extended"
                         onClick={handleSaveClick}
                     >
+                        <SaveIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Save
                     </ActionButton>
                 </Grid>
@@ -184,6 +194,7 @@ const VirtualRestrictionActions = (
                         variant="extended"
                         onClick={onAddVirtualWall}
                     >
+                        <VirtualWallIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Add Virtual Wall
                     </ActionButton>
                 </Grid>
@@ -199,6 +210,7 @@ const VirtualRestrictionActions = (
                         variant="extended"
                         onClick={onAddNoGoArea}
                     >
+                        <NoGoAreaIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Add No Go Area
                     </ActionButton>
                 </Grid>
@@ -214,6 +226,7 @@ const VirtualRestrictionActions = (
                         variant="extended"
                         onClick={onAddNoMopArea}
                     >
+                        <NoMopAreaIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Add No Mop Area
                     </ActionButton>
                 </Grid>
@@ -229,6 +242,7 @@ const VirtualRestrictionActions = (
                         variant="extended"
                         onClick={onRefresh}
                     >
+                        <RefreshIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Refresh
                     </ActionButton>
                 </Grid>

diff --git a/frontend/src/map/actions/live_map_actions/GoToActions.tsx b/frontend/src/map/actions/live_map_actions/GoToActions.tsx
@@ -10,6 +10,10 @@ import IntegrationHelpDialog from "../../../components/IntegrationHelpDialog";
 import {useLongPress} from "use-long-press";
 import {floorObject} from "../../../api/utils";
 import {PointCoordinates} from "../../utils/types";
+import {
+    Clear as ClearIcon,
+    PlayArrow as GoIcon
+} from "@mui/icons-material";
 
 interface GoToActionsProperties {
     goToTarget: GoToTargetClientStructure | undefined;
@@ -83,6 +87,7 @@ const GoToActions = (
                         variant="extended"
                         {...setupClickHandlers()}
                     >
+                        <GoIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Go To Location
                         {goToIsExecuting && (
                             <CircularProgress
@@ -102,6 +107,7 @@ const GoToActions = (
                             variant="extended"
                             onClick={onClear}
                         >
+                            <ClearIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                             Clear
                         </ActionButton>
                     }

diff --git a/frontend/src/map/actions/live_map_actions/SegmentActions.tsx b/frontend/src/map/actions/live_map_actions/SegmentActions.tsx
@@ -5,6 +5,10 @@ import {ActionButton} from "../../Styled";
 import IntegrationHelpDialog from "../../../components/IntegrationHelpDialog";
 import {useLongPress} from "use-long-press";
 import {IterationsIcon} from "../../../assets/icon_components/IterationsIcon";
+import {
+    Clear as ClearIcon,
+    PlayArrow as GoIcon
+} from "@mui/icons-material";
 
 interface SegmentActionsProperties {
     segments: string[];
@@ -129,6 +133,7 @@ const SegmentActions = (
                         variant="extended"
                         {...setupClickHandlers()}
                     >
+                        <GoIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Clean {segments.length} segments
                         {segmentActionExecuting && (
                             <CircularProgress
@@ -165,6 +170,7 @@ const SegmentActions = (
                             variant="extended"
                             onClick={onClear}
                         >
+                            <ClearIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                             Clear
                         </ActionButton>
                     </Grid>

diff --git a/frontend/src/map/actions/live_map_actions/ZoneActions.tsx b/frontend/src/map/actions/live_map_actions/ZoneActions.tsx
@@ -12,6 +12,11 @@ import ZoneClientStructure from "../../structures/client_structures/ZoneClientSt
 import IntegrationHelpDialog from "../../../components/IntegrationHelpDialog";
 import {PointCoordinates} from "../../utils/types";
 import {IterationsIcon} from "../../../assets/icon_components/IterationsIcon";
+import {
+    Clear as ClearIcon,
+    PlayArrow as GoIcon,
+    Add as AddIcon
+} from "@mui/icons-material";
 
 interface ZoneActionsProperties {
     zones: ZoneClientStructure[];
@@ -160,6 +165,7 @@ const ZoneActions = (
                         variant="extended"
                         {...setupClickHandlers()}
                     >
+                        <GoIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Clean {zones.length} zones
                         {cleanTemporaryZonesIsExecuting && (
                             <CircularProgress
@@ -195,6 +201,7 @@ const ZoneActions = (
                         variant="extended"
                         onClick={onAdd}
                     >
+                        <AddIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                         Add ({zones.length}/{zoneProperties.zoneCount.max})
                     </ActionButton>
                 </Grid>
@@ -208,6 +215,7 @@ const ZoneActions = (
                             variant="extended"
                             onClick={onClear}
                         >
+                            <ClearIcon style={{marginRight: "0.25rem", marginLeft: "-0.25rem"}}/>
                             Clear
                         </ActionButton>
                     </Grid>

diff --git a/frontend/src/options/MapManagement.tsx b/frontend/src/options/MapManagement.tsx
@@ -13,10 +13,12 @@ import {
     Layers as MappingPassIcon,
     LayersClear as MapResetIcon,
     Dashboard as SegmentEditIcon,
-    Dangerous as VirtualRestrictionsIcon,
     Crop as CleanupCoverageIcon,
     Download as ValetudoMapDownloadIcon,
 } from "@mui/icons-material";
+import {
+    StrategyIcon as VirtualRestrictionsIcon
+} from "@mui-extra/icons/StrategyIcon";
 import React from "react";
 import ConfirmationDialog from "../components/ConfirmationDialog";
 import { LinkListMenuItem } from "../components/list_menu/LinkListMenuItem";

diff --git a/package-lock.json b/package-lock.json