From 4e958da68b810153fcf39a17bff63bc1d78d14dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Beye?= Date: Fri, 22 Dec 2023 17:32:37 +0100 Subject: [PATCH] feat(ui): Add some nice icons to all map action buttons --- frontend/package.json | 3 +- .../edit_map_actions/SegmentActions.tsx | 15 +++++- .../VirtualRestrictionActions.tsx | 16 +++++- .../actions/live_map_actions/GoToActions.tsx | 6 +++ .../live_map_actions/SegmentActions.tsx | 6 +++ .../actions/live_map_actions/ZoneActions.tsx | 8 +++ frontend/src/options/MapManagement.tsx | 4 +- package-lock.json | 50 ++++++++++++------- 8 files changed, 87 insertions(+), 21 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 121b4742940..ada0a88095e 100644 --- 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 index 3878c91f99a..7bc3dc26a26 100644 --- 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 = ( + Join {segmentNames[selectedSegmentIds[0]]} and {selectedSegmentIds.length === 2 ? segmentNames[selectedSegmentIds[1]] : "?"} {joinSegmentsExecuting && ( + Split {segmentNames[selectedSegmentIds[0]]} {splitSegmentExecuting && ( + Rename @@ -200,6 +211,7 @@ const SegmentActions = ( variant="extended" onClick={onAddCuttingLine} > + Add Cutting Line @@ -217,6 +229,7 @@ const SegmentActions = ( variant="extended" onClick={onClear} > + Clear diff --git a/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx b/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx index 90b5d8ff92a..838ab0ad519 100644 --- 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 = ( @@ -151,7 +161,6 @@ const VirtualRestrictionActions = ( No {Capability.CombinedVirtualRestrictions} properties - ; ); } @@ -170,6 +179,7 @@ const VirtualRestrictionActions = ( variant="extended" onClick={handleSaveClick} > + Save @@ -184,6 +194,7 @@ const VirtualRestrictionActions = ( variant="extended" onClick={onAddVirtualWall} > + Add Virtual Wall @@ -199,6 +210,7 @@ const VirtualRestrictionActions = ( variant="extended" onClick={onAddNoGoArea} > + Add No Go Area @@ -214,6 +226,7 @@ const VirtualRestrictionActions = ( variant="extended" onClick={onAddNoMopArea} > + Add No Mop Area @@ -229,6 +242,7 @@ const VirtualRestrictionActions = ( variant="extended" onClick={onRefresh} > + Refresh diff --git a/frontend/src/map/actions/live_map_actions/GoToActions.tsx b/frontend/src/map/actions/live_map_actions/GoToActions.tsx index 67b05f71d43..8c49891a63b 100644 --- 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()} > + Go To Location {goToIsExecuting && ( + Clear } diff --git a/frontend/src/map/actions/live_map_actions/SegmentActions.tsx b/frontend/src/map/actions/live_map_actions/SegmentActions.tsx index 9e880315142..4a6b5f17ee0 100644 --- 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()} > + Clean {segments.length} segments {segmentActionExecuting && ( + Clear diff --git a/frontend/src/map/actions/live_map_actions/ZoneActions.tsx b/frontend/src/map/actions/live_map_actions/ZoneActions.tsx index 22aa95a433d..2c51ccfe41e 100644 --- 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()} > + Clean {zones.length} zones {cleanTemporaryZonesIsExecuting && ( + Add ({zones.length}/{zoneProperties.zoneCount.max}) @@ -208,6 +215,7 @@ const ZoneActions = ( variant="extended" onClick={onClear} > + Clear diff --git a/frontend/src/options/MapManagement.tsx b/frontend/src/options/MapManagement.tsx index cec8eb0d98e..7bbbf58e173 100644 --- 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 index 962ece33b45..059475e6e07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -106,8 +106,9 @@ "@emotion/styled": "11.11.0", "@fontsource/jetbrains-mono": "5.0.17", "@fontsource/roboto": "5.0.8", + "@mui-extra/icons": "0.0.65", "@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/material": "5.14.18", "@mui/x-date-pickers": "6.18.2", @@ -2319,9 +2320,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz", - "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz", + "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -3378,6 +3379,15 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@mui-extra/icons": { + "version": "0.0.65", + "resolved": "https://registry.npmjs.org/@mui-extra/icons/-/icons-0.0.65.tgz", + "integrity": "sha512-6L2oVAe6BQHWJa0DM+aY8H+E1/rC7Lh/Td6o7Jh/4EiPiGCwkYqiM/Tn2I413LYGnY53ktQhP6jY6MSR76i0eA==", + "peerDependencies": { + "@mui/material": "^5.2.8", + "react": "*" + } + }, "node_modules/@mui/base": { "version": "5.0.0-alpha.128", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.128.tgz", @@ -3420,18 +3430,18 @@ } }, "node_modules/@mui/icons-material": { - "version": "5.14.18", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.18.tgz", - "integrity": "sha512-o2z49R1G4SdBaxZjbMmkn+2OdT1bKymLvAYaB6pH59obM1CYv/0vAVm6zO31IqhwtYwXv6A7sLIwCGYTaVkcdg==", + "version": "5.15.1", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.1.tgz", + "integrity": "sha512-VPJdBSyap6uOxCb5BLbWbkvd6aeJCp1pQZm8DcZBITCH0NOSv8Mz9c8Zvo8xr4Od7+xyWHUAgvRSL4047pL2WQ==", "dependencies": { - "@babel/runtime": "^7.23.2" + "@babel/runtime": "^7.23.5" }, "engines": { "node": ">=12.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@mui/material": "^5.0.0", @@ -23309,9 +23319,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "@babel/runtime": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz", - "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz", + "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==", "requires": { "regenerator-runtime": "^0.14.0" } @@ -24059,6 +24069,11 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "@mui-extra/icons": { + "version": "0.0.65", + "resolved": "https://registry.npmjs.org/@mui-extra/icons/-/icons-0.0.65.tgz", + "integrity": "sha512-6L2oVAe6BQHWJa0DM+aY8H+E1/rC7Lh/Td6o7Jh/4EiPiGCwkYqiM/Tn2I413LYGnY53ktQhP6jY6MSR76i0eA==" + }, "@mui/base": { "version": "5.0.0-alpha.128", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.128.tgz", @@ -24080,11 +24095,11 @@ "integrity": "sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ==" }, "@mui/icons-material": { - "version": "5.14.18", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.18.tgz", - "integrity": "sha512-o2z49R1G4SdBaxZjbMmkn+2OdT1bKymLvAYaB6pH59obM1CYv/0vAVm6zO31IqhwtYwXv6A7sLIwCGYTaVkcdg==", + "version": "5.15.1", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.1.tgz", + "integrity": "sha512-VPJdBSyap6uOxCb5BLbWbkvd6aeJCp1pQZm8DcZBITCH0NOSv8Mz9c8Zvo8xr4Od7+xyWHUAgvRSL4047pL2WQ==", "requires": { - "@babel/runtime": "^7.23.2" + "@babel/runtime": "^7.23.5" } }, "@mui/lab": { @@ -36351,8 +36366,9 @@ "@emotion/styled": "11.11.0", "@fontsource/jetbrains-mono": "5.0.17", "@fontsource/roboto": "5.0.8", + "@mui-extra/icons": "0.0.65", "@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/material": "5.14.18", "@mui/x-date-pickers": "6.18.2",