From 85a28999fb077d576218c27b349570041fbdc5c7 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 18 Jun 2018 20:28:24 +0100 Subject: [PATCH 1/7] Initial color accessibility UI --- src/components/App.jsx | 22 +++++----- src/components/Toolbar.jsx | 81 +++++++++++++++++++++++++++++++++---- src/styles/_components.scss | 23 +++++++++++ 3 files changed, 109 insertions(+), 17 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index f35ea93..ed06070 100644 --- a/src/components/App.jsx +++ b/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 = } else { mapElement = } + 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
@@ -457,12 +460,13 @@ export default class App extends React.Component { const metadata = this.state.mapStyle.metadata || {} const toolbar = diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index ab26601..dbd8449 100644 --- a/src/components/Toolbar.jsx +++ b/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: , + }, + { + id: "inspect", + title: "Inspect", + icon: , + }, + { + id: "filter-deuteranopia", + title: "Filter deuteranopia", + icon: , + }, + { + id: "filter-protanopia", + title: "Filter protanopia", + icon: , + }, + { + id: "filter-tritanopia", + title: "Filter tritanopia", + icon: , + }, + { + id: "filter-achromatopsia", + title: "Filter achromatopsia", + icon: , + }, + ]; + return
Style Settings - - - - { this.props.inspectModeEnabled && Map Mode } - { !this.props.inspectModeEnabled && Inspect Mode } - - + + this.handleSelection(val)} + > + + +
    + {views.map((item) => { + return ( +
  • + + + +
    • + ); + })} +
+ + + + Help diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 170d855..26a6922 100644 --- a/src/styles/_components.scss +++ b/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; + } + } + } +} From bcdc7c68112abfd498f56f0c87d0210b54d60b99 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 23 Sep 2018 14:39:02 +0100 Subject: [PATCH 2/7] Improved color accessibility UI --- src/components/App.jsx | 2 +- src/components/Toolbar.jsx | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 7cce878..c1da61c 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -166,7 +166,7 @@ export default class App extends React.Component { selectedLayerIndex: 0, sources: {}, vectorLayers: {}, - mapState: "normal", + mapState: "map", spec: styleSpec.latest, isOpen: { settings: false, diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 0103bf8..c0a2190 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -131,26 +131,30 @@ export default class Toolbar extends React.Component { }, { id: "filter-deuteranopia", - title: "Filter deuteranopia", + title: "Map (deuteranopia)", icon: , }, { id: "filter-protanopia", - title: "Filter protanopia", + title: "Map (protanopia)", icon: , }, { id: "filter-tritanopia", - title: "Filter tritanopia", + title: "Map (tritanopia)", icon: , }, { id: "filter-achromatopsia", - title: "Filter achromatopsia", + title: "Map (achromatopsia)", icon: , }, ]; + const currentView = views.find((view) => { + return view.id === this.props.mapState; + }); + return
    From 8b67499a64fa3e279afa6b6921dfd2be79d3005e Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 23 Sep 2018 14:48:19 +0100 Subject: [PATCH 3/7] Removed external svg from filter command. --- src/components/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index c1da61c..c641bd9 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -456,7 +456,7 @@ export default class App extends React.Component { } const elementStyle = {}; if (filterName) { - elementStyle.filter = `url('color-accessibility.svg#${filterName}')`; + elementStyle.filter = `url('#${filterName}')`; }; return
    From e4aa0167133180951102ece1f73834c28a082f90 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 23 Sep 2018 14:50:29 +0100 Subject: [PATCH 4/7] Fixed lint errors --- src/components/Toolbar.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index c0a2190..3e41d79 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -101,6 +101,8 @@ export default class Toolbar extends React.Component { sources: PropTypes.object.isRequired, children: PropTypes.node, onToggleModal: PropTypes.func, + onSetMapState: PropTypes.func, + mapState: PropTypes.string, } state = { From a356bfd6011d0f2f74af7c6aeab08cb8c98e2d68 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 6 Oct 2018 13:54:02 +0100 Subject: [PATCH 5/7] Switch from react-aria-menubutton to this.handleSelection(e.target.value)}> + {views.map((item) => { + return ( + + ); + })} + + diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index 70ae986..9cdc51e 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -92,6 +92,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; } diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js index d0996aa..2822434 100644 --- a/test/functional/modals/index.js +++ b/test/functional/modals/index.js @@ -100,7 +100,7 @@ describe("modals", function() { "geojson:example" ])); - browser.click(wd.$("nav:inspect")); + browser.setValue(wd.$("nav:inspect", "select"), "inspect"); }) }) diff --git a/test/functional/screenshots/index.js b/test/functional/screenshots/index.js index a6d6d2a..5152a95 100644 --- a/test/functional/screenshots/index.js +++ b/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.setValue(wd.$("nav:inspect", "select"), "inspect"); browser.flushReactUpdates(); browser.takeScreenShot("/inspect.png") From 1525807d06ac251a448e5bdec61b425a5c6d9b2a Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 6 Oct 2018 13:59:50 +0100 Subject: [PATCH 6/7] setValue -> selectByValue --- test/functional/modals/index.js | 2 +- test/functional/screenshots/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js index 2822434..0403b22 100644 --- a/test/functional/modals/index.js +++ b/test/functional/modals/index.js @@ -100,7 +100,7 @@ describe("modals", function() { "geojson:example" ])); - browser.setValue(wd.$("nav:inspect", "select"), "inspect"); + browser.selectByValue(wd.$("nav:inspect", "select"), "inspect"); }) }) diff --git a/test/functional/screenshots/index.js b/test/functional/screenshots/index.js index 5152a95..093802e 100644 --- a/test/functional/screenshots/index.js +++ b/test/functional/screenshots/index.js @@ -83,7 +83,7 @@ describe('screenshots', function() { browser.waitForExist(".maputnik-toolbar-link"); browser.flushReactUpdates(); - browser.setValue(wd.$("nav:inspect", "select"), "inspect"); + browser.selectByValue(wd.$("nav:inspect", "select"), "inspect"); browser.flushReactUpdates(); browser.takeScreenShot("/inspect.png") From 4134919dde89fed1e4b8da5ab5b4435b405dfd2a Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 6 Oct 2018 14:44:12 +0100 Subject: [PATCH 7/7] Added missing key attribute to