Merge pull request #392 from orangemug/feature/color-accessibility-ui

Color accessibility UI

src/components/Toolbar.jsx

@@ -10,6 +10,11 @@ import HelpIcon from 'react-icons/lib/md/help-outline'
 import InspectionIcon from 'react-icons/lib/md/find-in-page'
 import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
 
+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'
 
@@ -66,6 +71,22 @@ class ToolbarLinkHighlighted extends React.Component {
   }
 }
 
+class ToolbarSelect extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    wdKey: PropTypes.string
+  }
+
+  render() {
+    return <div
+      className='maputnik-toolbar-select'
+      data-wd-key={this.props.wdKey}
+    >
+      {this.props.children}
+    </div>
+  }
+}
+
 class ToolbarAction extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -93,9 +114,10 @@ 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,
+    onSetMapState: PropTypes.func,
+    mapState: PropTypes.string,
   }
 
   state = {
@@ -108,7 +130,48 @@ 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: "Map (deuteranopia)",
+        icon: <ColorIcon/>,
+      },
+      {
+        id: "filter-protanopia",
+        title: "Map (protanopia)",
+        icon: <ColorIcon/>,
+      },
+      {
+        id: "filter-tritanopia",
+        title: "Map (tritanopia)",
+        icon: <ColorIcon/>,
+      },
+      {
+        id: "filter-achromatopsia",
+        title: "Map (achromatopsia)",
+        icon: <ColorIcon/>,
+      },
+    ];
+
+    const currentView = views.find((view) => {
+      return view.id === this.props.mapState;
+    });
+
     return <div className='maputnik-toolbar'>
       <div className="maputnik-toolbar__inner">
         <div
@@ -147,13 +210,21 @@ export default class Toolbar extends React.Component {
             <SettingsIcon />
             <IconText>Style Settings</IconText>
           </ToolbarAction>
-          <ToolbarAction wdKey="nav:inspect" onClick={this.props.onInspectModeToggle}>
-            <InspectionIcon />
-            <IconText>
-              { this.props.inspectModeEnabled && <span>Map Mode</span> }
-              { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
-            </IconText>
-          </ToolbarAction>
+
+          <ToolbarSelect wdKey="nav:inspect">
+            <ViewIcon/>
+            <IconText>View </IconText>
+            <select onChange={(e) => this.handleSelection(e.target.value)}>
+              {views.map((item) => {
+                return (
+                  <option key={item.id} value={item.id}>
+                    {item.title}
+                  </option>
+                );
+              })}
+            </select>
+          </ToolbarSelect>
+
           <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
             <HelpIcon />
             <IconText>Help</IconText>