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

Color accessibility UI

src/components/App.jsx

@@ -106,7 +106,7 @@ export default class App extends React.Component {
       {
         keyCode: keyCodes["i"],
         handler: () => {
-          this.changeInspectMode();
+          this.setMapState("inspect");
         }
       },
       {
@@ -166,7 +166,7 @@ export default class App extends React.Component {
       selectedLayerIndex: 0,
       sources: {},
       vectorLayers: {},
-      inspectModeEnabled: false,
+      mapState: "map",
       spec: styleSpec.latest,
       isOpen: {
         settings: false,
@@ -180,7 +180,6 @@ export default class App extends React.Component {
         showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries"),
         showCollisionBoxes: queryUtil.asBool(queryObj, "show-collision-boxes")
       },
-      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -362,9 +361,9 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
-  changeInspectMode = () => {
+  setMapState = (newState) => {
     this.setState({
-      inspectModeEnabled: !this.state.inspectModeEnabled
+      mapState: newState
     })
   }
 
@@ -446,17 +445,21 @@ export default class App extends React.Component {
       mapElement = <div>TODO</div>
     } else {
       mapElement = <MapboxGlMap {...mapProps}
-        inspectModeEnabled={this.state.inspectModeEnabled}
+        inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect} />
     }
 
-    const elementStyle = {};
-    if(this.state.mapFilter) {
-      elementStyle.filter = `url('#${this.state.mapFilter}')`;
+    let filterName;
+    if(this.state.mapState.match(/^filter-/)) {
+      filterName = this.state.mapState.replace(/^filter-/, "");
     }
+    const elementStyle = {};
+    if (filterName) {
+      elementStyle.filter = `url('#${filterName}')`;
+    };
 
-    return <div style={elementStyle}>
+    return <div style={elementStyle} className="maputnik-map__container">
       {mapElement}
     </div>
   }
@@ -485,12 +488,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}
       onStyleOpen={this.onStyleChanged}
-      onInspectModeToggle={this.changeInspectMode}
+      onSetMapState={this.setMapState}
       onToggleModal={this.toggleModal.bind(this)}
     />
 

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>

src/components/map/MapboxGlMap.jsx

@@ -178,7 +178,7 @@ export default class MapboxGlMap extends React.Component {
   render() {
     if(IS_SUPPORTED) {
       return <div
-        className="maputnik-map"
+        className="maputnik-map__map"
         ref={x => this.container = x}
       ></div>
     }

src/styles/_components.scss

@@ -1,5 +1,5 @@
 // MAP
-.maputnik-map {
+.maputnik-map__container {
   display: flex;
   position: fixed !important;
   top: $toolbar-height + $toolbar-offset;
@@ -23,6 +23,11 @@
   }
 }
 
+.maputnik-map__map {
+  width: 100%;
+  height: 100%;
+}
+
 // DOC LABEL
 .maputnik-doc {
   &-target {
@@ -171,3 +176,32 @@
     color: $color-red;
   }
 }
+
+.maputnik-dialog {
+  &__buttons {
+    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;
+      }
+    }
+  }
+}

src/styles/_toolbar.scss

@@ -96,6 +96,16 @@
   @extend .maputnik-toolbar-link;
 }
 
+.maputnik-toolbar-select {
+  background: inherit;
+  border-width: 0;
+  @extend .maputnik-toolbar-link;
+}
+
+.maputnik-toolbar-select select {
+  margin-left: 4px;
+}
+
 .maputnik-icon-text {
   padding-left: $margin-1;
 }

test/functional/modals/index.js

@@ -100,7 +100,7 @@ describe("modals", function() {
         "geojson:example"
       ]));
 
-      browser.click(wd.$("nav:inspect"));
+      browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
     })
   })
 

test/functional/screenshots/index.js

@@ -83,7 +83,7 @@ describe('screenshots', function() {
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
-    browser.click(wd.$("nav:inspect"))
+    browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
     browser.flushReactUpdates();
 
     browser.takeScreenShot("/inspect.png")