diff --git a/assets/icons/charger.svg b/assets/icons/custom/charger.svg similarity index 100% rename from assets/icons/charger.svg rename to assets/icons/custom/charger.svg diff --git a/assets/icons/delete_zone.svg b/assets/icons/custom/delete_zone.svg similarity index 100% rename from assets/icons/delete_zone.svg rename to assets/icons/custom/delete_zone.svg diff --git a/assets/icons/marker.svg b/assets/icons/custom/marker.svg similarity index 100% rename from assets/icons/marker.svg rename to assets/icons/custom/marker.svg diff --git a/assets/icons/marker_active.svg b/assets/icons/custom/marker_active.svg similarity index 100% rename from assets/icons/marker_active.svg rename to assets/icons/custom/marker_active.svg diff --git a/assets/icons/move_zone.svg b/assets/icons/custom/move_zone.svg similarity index 100% rename from assets/icons/move_zone.svg rename to assets/icons/custom/move_zone.svg diff --git a/assets/icons/obstacle.svg b/assets/icons/custom/obstacle.svg similarity index 100% rename from assets/icons/obstacle.svg rename to assets/icons/custom/obstacle.svg diff --git a/assets/icons/robot.svg b/assets/icons/custom/robot.svg similarity index 100% rename from assets/icons/robot.svg rename to assets/icons/custom/robot.svg diff --git a/assets/icons/scale_zone.svg b/assets/icons/custom/scale_zone.svg similarity index 100% rename from assets/icons/scale_zone.svg rename to assets/icons/custom/scale_zone.svg diff --git a/assets/icons/segment.svg b/assets/icons/custom/segment.svg similarity index 100% rename from assets/icons/segment.svg rename to assets/icons/custom/segment.svg diff --git a/assets/icons/segment_selected.svg b/assets/icons/custom/segment_selected.svg similarity index 100% rename from assets/icons/segment_selected.svg rename to assets/icons/custom/segment_selected.svg diff --git a/assets/icons/remixed/Readme.md b/assets/icons/remixed/Readme.md new file mode 100644 index 00000000000..b6448276e58 --- /dev/null +++ b/assets/icons/remixed/Readme.md @@ -0,0 +1,4 @@ +Icons in here have been adapted by combining multiple material design icons into a new one. + +Material Design Icons are licensed under Apache-2.0 +https://github.com/google/material-design-icons/blob/master/LICENSE diff --git a/assets/icons/remixed/add_cutting_line.svg b/assets/icons/remixed/add_cutting_line.svg new file mode 100644 index 00000000000..5b417be442a --- /dev/null +++ b/assets/icons/remixed/add_cutting_line.svg @@ -0,0 +1,36 @@ + + + + + + diff --git a/assets/icons/remixed/add_no_go_area.svg b/assets/icons/remixed/add_no_go_area.svg new file mode 100644 index 00000000000..bea2f09c3a9 --- /dev/null +++ b/assets/icons/remixed/add_no_go_area.svg @@ -0,0 +1,44 @@ + + diff --git a/assets/icons/remixed/add_no_mop_area.svg b/assets/icons/remixed/add_no_mop_area.svg new file mode 100644 index 00000000000..915ecfc0483 --- /dev/null +++ b/assets/icons/remixed/add_no_mop_area.svg @@ -0,0 +1,36 @@ + + + + + + diff --git a/assets/icons/remixed/add_virtual_wall.svg b/assets/icons/remixed/add_virtual_wall.svg new file mode 100644 index 00000000000..9be5713a85c --- /dev/null +++ b/assets/icons/remixed/add_virtual_wall.svg @@ -0,0 +1,36 @@ + + + + + + diff --git a/assets/icons/util/add-icon-plus.svg b/assets/icons/util/add-icon-plus.svg new file mode 100644 index 00000000000..c748c04df96 --- /dev/null +++ b/assets/icons/util/add-icon-plus.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + 13, 13 + + diff --git a/frontend/package.json b/frontend/package.json index ada0a88095e..bf476f877c9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -42,7 +42,6 @@ "@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/components/CustomIcons.tsx b/frontend/src/components/CustomIcons.tsx index 5e18452f83f..af1946b0a57 100644 --- a/frontend/src/components/CustomIcons.tsx +++ b/frontend/src/components/CustomIcons.tsx @@ -1,8 +1,7 @@ - -// Taken from https://github.com/Templarian/MaterialDesign/blob/master/svg/fan.svg import {createSvgIcon} from "@mui/material"; import React from "react"; +// Taken from https://github.com/Templarian/MaterialDesign/blob/master/svg/fan.svg export const FanSpeedIcon = createSvgIcon( , "fanSpeed" @@ -33,3 +32,39 @@ export const RobotMonochromeIcon = createSvgIcon( , "robot" ); + +// "form-textbox" material design icon +export const RenameIcon = createSvgIcon( + , + "rename" +); + +// "strategy" material design icon +export const VirtualRestrictionsIcon = createSvgIcon( + , + "virtualRestrictions" +); + +// Remixed from the "wall" material design icon +export const AddVirtualWallIcon = createSvgIcon( + , + "addVirtualWall" +); + +// Remixed from the "water-off" material design icon +export const AddNoMopAreaIcon = createSvgIcon( + , + "addNoMopArea" +); + +// Remixed from the "minus-circle" material design icon +export const AddNoGoAreaIcon = createSvgIcon( + , + "adNoGoArea" +); + +// Remixed from the "content-cut" material design icon +export const AddCuttingLineIcon = createSvgIcon( + , + "addCuttingLine" +); diff --git a/frontend/src/map/EditMap.tsx b/frontend/src/map/EditMap.tsx index b6ca75847b7..a2c7dc9b1dd 100644 --- a/frontend/src/map/EditMap.tsx +++ b/frontend/src/map/EditMap.tsx @@ -458,6 +458,13 @@ class EditMap extends Map { this.updateVirtualRestrictionClientStructures(true); this.updateVirtualRestrictionClientStructures(false); + this.updateState(); + this.draw(); + }} + onClear={() => { + this.updateVirtualRestrictionClientStructures(true); + + this.updateState(); this.draw(); }} onSave={() => { diff --git a/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx b/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx index 7bc3dc26a26..c818d254ebc 100644 --- a/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx +++ b/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx @@ -26,8 +26,9 @@ import { ContentCut as SplitIcon } from "@mui/icons-material"; import { - FormTextboxIcon as RenameIcon -} from "@mui-extra/icons/FormTextboxIcon"; + AddCuttingLineIcon, + RenameIcon +} from "../../../components/CustomIcons"; interface SegmentActionsProperties { robotStatus: StatusState, @@ -57,7 +58,8 @@ const SegmentActions = ( convertPixelCoordinatesToCMSpace, supportedCapabilities, onAddCuttingLine, - onClear} = props; + onClear + } = props; const [newSegmentName, setNewSegmentName] = React.useState(""); const [renameDialogOpen, setRenameDialogOpen] = React.useState(false); @@ -211,8 +213,8 @@ const SegmentActions = ( variant="extended" onClick={onAddCuttingLine} > - - Add Cutting Line + + Cutting Line } diff --git a/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx b/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx index 838ab0ad519..087bd19b219 100644 --- a/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx +++ b/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx @@ -16,13 +16,13 @@ import RestrictedZoneClientStructure from "../../structures/client_structures/Re import {PointCoordinates} from "../../utils/types"; import { Save as SaveIcon, - Refresh as RefreshIcon, - FormatColorReset as NoMopAreaIcon, - RemoveCircle as NoGoAreaIcon + Refresh as RefreshIcon, Clear as ClearIcon, } from "@mui/icons-material"; import { - WallIcon as VirtualWallIcon -} from "@mui-extra/icons/WallIcon"; + AddNoGoAreaIcon, + AddNoMopAreaIcon, + AddVirtualWallIcon +} from "../../../components/CustomIcons"; interface VirtualRestrictionActionsProperties { robotStatus: StatusState, @@ -38,6 +38,7 @@ interface VirtualRestrictionActionsProperties { onSave(): void; onRefresh(): void; + onClear(): void; } const VirtualRestrictionActions = ( @@ -56,7 +57,8 @@ const VirtualRestrictionActions = ( onAddNoMopArea, onSave, - onRefresh + onRefresh, + onClear } = props; @@ -194,8 +196,8 @@ const VirtualRestrictionActions = ( variant="extended" onClick={onAddVirtualWall} > - - Add Virtual Wall + + Wall ({virtualWalls.length}) } @@ -210,8 +212,8 @@ const VirtualRestrictionActions = ( variant="extended" onClick={onAddNoGoArea} > - - Add No Go Area + + No-Go ({noGoAreas.length}) } @@ -226,12 +228,27 @@ const VirtualRestrictionActions = ( variant="extended" onClick={onAddNoMopArea} > - - Add No Mop Area + + No-Mop ({noMopAreas.length}) } + { + canEdit && + + + + Clear + + + } { canEdit && diff --git a/frontend/src/options/MapManagement.tsx b/frontend/src/options/MapManagement.tsx index 7bbbf58e173..5afa2b57f47 100644 --- a/frontend/src/options/MapManagement.tsx +++ b/frontend/src/options/MapManagement.tsx @@ -16,9 +16,6 @@ import { 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"; @@ -29,6 +26,7 @@ import {ToggleSwitchListMenuItem} from "../components/list_menu/ToggleSwitchList import {MapManagementHelp} from "./res/MapManagementHelp"; import PaperContainer from "../components/PaperContainer"; import {MapUtilitiesHelp} from "./res/MapUtilitiesHelp"; +import {VirtualRestrictionsIcon} from "../components/CustomIcons"; export const MappingPassButtonItem = (): React.ReactElement => { diff --git a/package-lock.json b/package-lock.json index 059475e6e07..650c54779ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -106,7 +106,6 @@ "@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.15.1", "@mui/lab": "5.0.0-alpha.153", @@ -3379,15 +3378,6 @@ "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", @@ -24069,11 +24059,6 @@ "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", @@ -36366,7 +36351,6 @@ "@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.15.1", "@mui/lab": "5.0.0-alpha.153",