From 28af87391d49b38521bf50c8cf28db704c80b19d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 22 May 2018 21:43:35 +0100
Subject: [PATCH 1/8] Fixed public source button size.

---
 src/styles/_modal.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 4fe3acf..0e93dca 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -136,6 +136,7 @@
   font-size: $font-size-5;
   color: $color-lowgray;
   background-color: transparent;
+  width: 100%;
 
   @include flex-row;
 }

From a82ba26f861096201aa3cfe4e44342d62330980a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 28 May 2018 10:50:19 +0100
Subject: [PATCH 2/8] Added skip-menu link for keyboard users.

---
 src/components/Toolbar.jsx          |  4 ++++
 src/components/layers/LayerList.jsx |  1 +
 src/styles/_toolbar.scss            | 22 ++++++++++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index caa1c5e..7d24d74 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -135,9 +135,13 @@ export default class Toolbar extends React.Component {
       />
       <div className="maputnik-toolbar__inner">
         <ToolbarLink
+          tabIndex="2"
           href={"https://github.com/maputnik/editor"}
           className="maputnik-toolbar-logo"
         >
+          <a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
+            Skip the menu
+          </a>
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik
             <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index a9b144f..0bbd2ab 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -209,6 +209,7 @@ class LayerListContainer extends React.Component {
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
             <button
+              id="skip-menu"
               onClick={this.toggleLayers.bind(this)}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index b02c31f..d2c9513 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -16,6 +16,8 @@
   background-color: $color-black;
   padding: $margin-2;
   height: $toolbar-height;
+  position: relative;
+  overflow: hidden;
 
   h1 {
     display: inline;
@@ -80,3 +82,23 @@
   flex: 1;
   overflow-y: auto;
 }
+
+.maputnik-toolbar-skip {
+  position: absolute;
+  overflow: hidden;
+  width: 0px;
+  height: 100%;
+  text-align: center;
+  display: block;
+  background-color: $color-black;
+  z-index: 999;
+  line-height: 40px;
+  left: 0;
+  top: 0;
+
+  &:active,
+  &:focus {
+    width: 100%;
+  }
+}
+

From 272f662a341946e6bcfa8d201a136d19139de1c8 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 28 May 2018 11:29:49 +0100
Subject: [PATCH 3/8] Changed 'skip' wording

As outlined in <https://webaim.org/techniques/skipnav/>
---
 src/components/Toolbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 7d24d74..f53996a 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -140,7 +140,7 @@ export default class Toolbar extends React.Component {
           className="maputnik-toolbar-logo"
         >
           <a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
-            Skip the menu
+            Skip navigation
           </a>
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik

From 019428a241bf816c0fa4afbc2eef66cb85d9d244 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 28 May 2018 12:06:22 +0100
Subject: [PATCH 4/8] Added missing prop-types.

---
 src/components/layers/LayerEditor.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 6f6f44c..906ac9c 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -48,6 +48,13 @@ export default class LayerEditor extends React.Component {
     spec: PropTypes.object.isRequired,
     onLayerChanged: PropTypes.func,
     onLayerIdChange: PropTypes.func,
+    onMoveLayer: PropTypes.func,
+    onLayerDestroy: PropTypes.func,
+    onLayerCopy: PropTypes.func,
+    onLayerVisibilityToggle: PropTypes.func,
+    isFirstLayer: PropTypes.bool,
+    isLastLayer: PropTypes.bool,
+    layerIndex: PropTypes.number,
   }
 
   static defaultProps = {

From f5e8d473ad0cd68792cebcec5a0701fd4fb4cc99 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 31 May 2018 20:40:21 +0100
Subject: [PATCH 5/8] Changed toggle visibility text from hide to show/hide

---
 src/components/layers/LayerEditor.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 906ac9c..4965774 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -220,7 +220,7 @@ export default class LayerEditor extends React.Component {
         handler: () => this.props.onLayerCopy(this.props.layer.id)
       },
       hide: {
-        text: "Hide",
+        text: (this.props.layer.layout.visibility === "visible") ? "Hide" : "Show",
         handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
       },
       moveLayerUp: {

From 13fc699d4a30f20f54cf1a3f96809d5c01524275 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 31 May 2018 21:09:31 +0100
Subject: [PATCH 6/8] Styling fixes.

---
 src/styles/_layer.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index c5a3a9a..391c66a 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -137,6 +137,7 @@
   user-select: none;
   padding: $margin-2;
   line-height: 20px;
+  border-top: solid 1px #36383e;
 
   @include flex-row;
 
@@ -206,10 +207,11 @@
   display: flex;
   padding: 6px;
   background: $color-black;
-  border-bottom: solid 1px $color-midgray;
 
   &__title {
     flex: 1;
+    margin: 0;
+    line-height: 24px;
   }
 
   &__info {

From aa2f4a091c380f63ad22391f29845f09b5157023 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 1 Jun 2018 09:22:18 +0100
Subject: [PATCH 7/8] Initial attempt at color blindness emulation

---
 src/components/App.jsx | 18 ++++++++--
 src/template.html      | 81 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index 61b2ea7..780470b 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Mousetrap from 'mousetrap'
+import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
 import OpenLayers3Map from './map/OpenLayers3Map'
@@ -71,6 +72,8 @@ export default class App extends React.Component {
       Debug.set("maputnik", "styleStore", this.styleStore);
     }
 
+    const queryObj = url.parse(window.location.href, true).query;
+
     this.state = {
       errors: [],
       infos: [],
@@ -80,6 +83,7 @@ export default class App extends React.Component {
       vectorLayers: {},
       inspectModeEnabled: false,
       spec: styleSpec.latest,
+      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -266,15 +270,25 @@ export default class App extends React.Component {
     const metadata = this.state.mapStyle.metadata || {}
     const renderer = metadata['maputnik:renderer'] || 'mbgljs'
 
+    let mapElement;
+
     // Check if OL3 code has been loaded?
     if(renderer === 'ol3') {
-      return <OpenLayers3Map {...mapProps} />
+      mapElement = <OpenLayers3Map {...mapProps} />
     } else {
-      return  <MapboxGlMap {...mapProps}
+      mapElement = <MapboxGlMap {...mapProps}
         inspectModeEnabled={this.state.inspectModeEnabled}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect.bind(this)} />
     }
+
+    const elementStyle = {
+      "filter": `url('#${this.state.mapFilter}')`
+    };
+
+    return <div style={elementStyle}>
+      {mapElement}
+    </div>
   }
 
   onLayerSelect(layerId) {
diff --git a/src/template.html b/src/template.html
index bfa8284..268f229 100644
--- a/src/template.html
+++ b/src/template.html
@@ -69,6 +69,87 @@
   </style>
 </head>
 <body>
+  <!-- TODO: Import dynamically -->
+  <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1">
+    <defs>
+      <filter id="protanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.567, 0.433, 0,     0, 0
+                  0.558, 0.442, 0,     0, 0
+                  0,     0.242, 0.758, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="protanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.817, 0.183, 0,     0, 0
+                  0.333, 0.667, 0,     0, 0
+                  0,     0.125, 0.875, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="deuteranopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.625, 0.375, 0,   0, 0
+                  0.7,   0.3,   0,   0, 0
+                  0,     0.3,   0.7, 0, 0
+                  0,     0,     0,   1, 0"/>
+      </filter>
+      <filter id="deuteranomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.8,   0.2,   0,     0, 0
+                  0.258, 0.742, 0,     0, 0
+                  0,     0.142, 0.858, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.95, 0.05,  0,     0, 0
+                  0,    0.433, 0.567, 0, 0
+                  0,    0.475, 0.525, 0, 0
+                  0,    0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.967, 0.033, 0,     0, 0
+                  0,     0.733, 0.267, 0, 0
+                  0,     0.183, 0.817, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatopsia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.618, 0.320, 0.062, 0, 0
+                  0.163, 0.775, 0.062, 0, 0
+                  0.163, 0.320, 0.516, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+    </defs>
+  </svg>
+
   <div id="app">
     <div id="loader">Loading...</div>
   </div>

From 32edb48e161942c04bd1fd940004cc4c9b23e4f6 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 3 Jun 2018 09:31:02 +0100
Subject: [PATCH 8/8] Fix for when 'layout.visibility' is undefined

---
 src/components/layers/LayerEditor.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 4965774..7d7291d 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -209,6 +209,7 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     })
 
+    const layout = this.props.layer.layout || {}
 
     const items = {
       delete: {
@@ -220,7 +221,7 @@ export default class LayerEditor extends React.Component {
         handler: () => this.props.onLayerCopy(this.props.layer.id)
       },
       hide: {
-        text: (this.props.layer.layout.visibility === "visible") ? "Hide" : "Show",
+        text: (layout.visibility === "none") ? "Show" : "Hide",
         handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
       },
       moveLayerUp: {