Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved fog add toggle to two separate icons

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-06-21 13:18:03 +10:00
parent 3ba7c8809c
commit a300e6bd79
2 changed files with 16 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/map/controls/FogSubtractToggle.js
View File

@ -1,19 +0,0 @@
import React from "react";
import { IconButton } from "theme-ui";
import FogAddIcon from "../../../icons/FogAddIcon";
import FogSubtractIcon from "../../../icons/FogSubtractIcon";
function FogSubtractToggle({ useFogSubtract, onFogSubtractChange }) {
return (
<IconButton
aria-label={useFogSubtract ? "Add Fog" : "Subtract Fog"}
title={useFogSubtract ? "Add Fog" : "Subtract Fog"}
onClick={() => onFogSubtractChange(!useFogSubtract)}
>
{useFogSubtract ? <FogSubtractIcon /> : <FogAddIcon />}
</IconButton>
);
}
export default FogSubtractToggle;

23
src/components/map/controls/FogToolSettings.js
View File

@ -3,12 +3,13 @@ import { Flex } from "theme-ui";
import EdgeSnappingToggle from "./EdgeSnappingToggle"; import EdgeSnappingToggle from "./EdgeSnappingToggle";
import RadioIconButton from "./RadioIconButton"; import RadioIconButton from "./RadioIconButton";
import FogSubtractToggle from "./FogSubtractToggle";
import FogBrushIcon from "../../../icons/FogBrushIcon"; import FogBrushIcon from "../../../icons/FogBrushIcon";
import FogPolygonIcon from "../../../icons/FogPolygonIcon"; import FogPolygonIcon from "../../../icons/FogPolygonIcon";
import FogRemoveIcon from "../../../icons/FogRemoveIcon"; import FogRemoveIcon from "../../../icons/FogRemoveIcon";
import FogToggleIcon from "../../../icons/FogToggleIcon"; import FogToggleIcon from "../../../icons/FogToggleIcon";
import FogAddIcon from "../../../icons/FogAddIcon";
import FogSubtractIcon from "../../../icons/FogSubtractIcon";
import UndoButton from "./UndoButton"; import UndoButton from "./UndoButton";
import RedoButton from "./RedoButton"; import RedoButton from "./RedoButton";
@ -38,12 +39,20 @@ function BrushToolSettings({
<FogBrushIcon /> <FogBrushIcon />
</RadioIconButton> </RadioIconButton>
<Divider vertical /> <Divider vertical />
<FogSubtractToggle <RadioIconButton
useFogSubtract={settings.useFogSubtract} title="Add Fog"
onFogSubtractChange={(useFogSubtract) => onClick={() => onSettingChange({ useFogSubtract: false })}
onSettingChange({ useFogSubtract }) isSelected={!settings.useFogSubtract}
} >
/> <FogAddIcon />
</RadioIconButton>
<RadioIconButton
title="Subtract Fog"
onClick={() => onSettingChange({ useFogSubtract: true })}
isSelected={settings.useFogSubtract}
>
<FogSubtractIcon />
</RadioIconButton>
{/* TODO: Re-enable edge snapping when holes are fixed */} {/* TODO: Re-enable edge snapping when holes are fixed */}
{/* <EdgeSnappingToggle {/* <EdgeSnappingToggle
useEdgeSnapping={settings.useEdgeSnapping} useEdgeSnapping={settings.useEdgeSnapping}