Initial color accessibility UI

src/components/App.jsx

@@ -104,7 +104,7 @@ export default class App extends React.Component {
       {
         keyCode: keyCodes["i"],
         handler: () => {
-          this.changeInspectMode();
+          this.setMapState("inspect");
         }
       },
       {
@@ -164,7 +164,7 @@ export default class App extends React.Component {
       selectedLayerIndex: 0,
       sources: {},
       vectorLayers: {},
-      inspectModeEnabled: false,
+      mapState: "normal",
       spec: styleSpec.latest,
       isOpen: {
         settings: false,
@@ -176,7 +176,6 @@ export default class App extends React.Component {
       mapOptions: {
         showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
       },
-      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -341,9 +340,9 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  changeInspectMode() {
+  setMapState(newState) {
     this.setState({
-      inspectModeEnabled: !this.state.inspectModeEnabled
+      mapState: newState
     })
   }
 
@@ -423,13 +422,17 @@ export default class App extends React.Component {
       mapElement = <OpenLayers3Map {...mapProps} />
     } else {
       mapElement = <MapboxGlMap {...mapProps}
-        inspectModeEnabled={this.state.inspectModeEnabled}
+        inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect.bind(this)} />
     }
 
+    let filterName = "";
+    if(this.state.mapState.match(/^filter-/)) {
+      filterName = this.state.mapState.replace(/^filter-/, "");
+    }
     const elementStyle = {
-      "filter": `url('#${this.state.mapFilter}')`
+      "filter": `url('#${filterName}')`
     };
 
     return <div style={elementStyle}>
@@ -457,12 +460,13 @@ export default class App extends React.Component {
     const metadata = this.state.mapStyle.metadata || {}
 
     const toolbar = <Toolbar
+      mapState={this.state.mapState}
       mapStyle={this.state.mapStyle}
-      inspectModeEnabled={this.state.inspectModeEnabled}
+      inspectModeEnabled={this.state.mapState === "inspect"}
       sources={this.state.sources}
       onStyleChanged={this.onStyleChanged.bind(this)}
       onStyleOpen={this.onStyleChanged.bind(this)}
-      onInspectModeToggle={this.changeInspectMode.bind(this)}
+      onSetMapState={this.setMapState.bind(this)}
       onToggleModal={this.toggleModal.bind(this)}
     />
 

src/components/Toolbar.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import FileReaderInput from 'react-file-reader-input'
 import classnames from 'classnames'
+import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import MdFileUpload from 'react-icons/lib/md/file-upload'
@@ -17,6 +18,11 @@ import MdFontDownload from 'react-icons/lib/md/font-download'
 import HelpIcon from 'react-icons/lib/md/help-outline'
 import InspectionIcon from 'react-icons/lib/md/find-in-page'
 
+import ColorIcon from 'react-icons/lib/md/color-lens'
+import MapIcon from 'react-icons/lib/md/map'
+import ViewIcon from 'react-icons/lib/md/remove-red-eye'
+
+
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
 
@@ -79,7 +85,6 @@ export default class Toolbar extends React.Component {
     onStyleOpen: PropTypes.func.isRequired,
     // A dict of source id's and the available source layers
     sources: PropTypes.object.isRequired,
-    onInspectModeToggle: PropTypes.func.isRequired,
     children: PropTypes.node,
     onToggleModal: PropTypes.func,
   }
@@ -97,7 +102,44 @@ export default class Toolbar extends React.Component {
     }
   }
 
+  handleSelection(val) {
+    this.props.onSetMapState(val);
+  }
+
   render() {
+    const views = [
+      {
+        id: "map",
+        title: "Map",
+        icon: <MapIcon/>,
+      },
+      {
+        id: "inspect",
+        title: "Inspect",
+        icon: <InspectionIcon/>,
+      },
+      {
+        id: "filter-deuteranopia",
+        title: "Filter deuteranopia",
+        icon: <ColorIcon/>,
+      },
+      {
+        id: "filter-protanopia",
+        title: "Filter protanopia",
+        icon: <ColorIcon/>,
+      },
+      {
+        id: "filter-tritanopia",
+        title: "Filter tritanopia",
+        icon: <ColorIcon/>,
+      },
+      {
+        id: "filter-achromatopsia",
+        title: "Filter achromatopsia",
+        icon: <ColorIcon/>,
+      },
+    ];
+
     return <div className='maputnik-toolbar'>
       <div className="maputnik-toolbar__inner">
         <div
@@ -135,13 +177,36 @@ export default class Toolbar extends React.Component {
             <SettingsIcon />
             <IconText>Style Settings</IconText>
           </ToolbarAction>
-          <ToolbarAction wdKey="nav:inspect" onClick={this.props.onInspectModeToggle}>
+
-            <InspectionIcon />
+          <Wrapper
-            <IconText>
+            className='map-state-menu'
-              { this.props.inspectModeEnabled && <span>Map Mode</span> }
+            onSelection={(val) => this.handleSelection(val)}
-              { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
+          >
-            </IconText>
+            <Button wdKey="nav:settings" className="maputnik-toolbar-action">
-          </ToolbarAction>
+              <ViewIcon/>
+              <IconText>Change view</IconText>
+            </Button>
+            <Menu>
+              <ul className="map-state-menu__menu">
+                {views.map((item) => {
+                  return (
+                    <li key={item.id}>
+                      <MenuItem value={item.id}>
+                        <button
+                          className="maputnik-toolbar-action"
+                        >
+                          {item.icon}
+                          <IconText>{item.title}</IconText>
+                        </button>
+                      </MenuItem>
+                    </li>
+                  );
+                })}
+              </ul>
+            </Menu>
+          </Wrapper>
+
+
           <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
             <HelpIcon />
             <IconText>Help</IconText>

src/styles/_components.scss

@@ -141,3 +141,26 @@
     text-align: right;
   }
 }
+
+.map-state-menu {
+  display: inline-block;
+
+  &__menu {
+    position: absolute;
+    z-index: 999999;
+    background: $color-black;
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+
+    li {
+      display: flex;
+      flex-direction: column;
+
+      button {
+        width: 100%;
+        text-align: left;
+      }
+    }
+  }
+}