Added icon to erase all submenu

This commit is contained in:
Mitchell McCaffrey 2020-04-20 15:26:36 +10:00
parent 5fa143293c
commit 77df9b6f35
2 changed files with 39 additions and 8 deletions

View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Flex, Box, IconButton, Button, Label } from "theme-ui";
import { Flex, Box, IconButton, Label } from "theme-ui";
import AddMapButton from "./AddMapButton";
import ExpandMoreIcon from "../icons/ExpandMoreIcon";
@ -14,6 +14,7 @@ import GridOffIcon from "../icons/GridOffIcon";
import colors, { colorOptions } from "../helpers/colors";
import MapMenu from "./MapMenu";
import EraseAllIcon from "../icons/EraseAllIcon";
function MapControls({
onMapChange,
@ -100,16 +101,28 @@ function MapControls({
</Box>
),
erase: (
<Box p={1}>
<Button
variant="secondary"
onClick={() => {
onEraseAll();
setCurrentSubmenu({});
<Box p={1} pr={3}>
<Label
sx={{
fontSize: 1,
alignItems: "center",
":hover": { color: "primary", cursor: "pointer" },
":active": { color: "secondary" },
}}
>
<IconButton
aria-label="Erase All"
title="Erase All"
onClick={() => {
onEraseAll();
setCurrentSubmenu(null);
setCurrentSubmenuOptions({});
}}
>
<EraseAllIcon />
</IconButton>
Erase All
</Button>
</Label>
</Box>
),
};

18
src/icons/EraseAllIcon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function EraseAllIcon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zm3.17-7.83c.39-.39 1.02-.39 1.41 0L12 12.59l1.42-1.42c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 14l1.42 1.42c.39.39.39 1.02 0 1.41-.39.39-1.02.39-1.41 0L12 15.41l-1.42 1.42c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 14l-1.42-1.42c-.39-.38-.39-1.02 0-1.41zM15.5 4l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z" />
</svg>
);
}
export default EraseAllIcon;