Improved color accessibility UI

This commit is contained in:
orangemug 2018-09-23 14:39:02 +01:00
parent 8f07a79a49
commit bcdc7c6811
2 changed files with 10 additions and 6 deletions

View file

@ -166,7 +166,7 @@ export default class App extends React.Component {
selectedLayerIndex: 0, selectedLayerIndex: 0,
sources: {}, sources: {},
vectorLayers: {}, vectorLayers: {},
mapState: "normal", mapState: "map",
spec: styleSpec.latest, spec: styleSpec.latest,
isOpen: { isOpen: {
settings: false, settings: false,

View file

@ -131,26 +131,30 @@ export default class Toolbar extends React.Component {
}, },
{ {
id: "filter-deuteranopia", id: "filter-deuteranopia",
title: "Filter deuteranopia", title: "Map (deuteranopia)",
icon: <ColorIcon/>, icon: <ColorIcon/>,
}, },
{ {
id: "filter-protanopia", id: "filter-protanopia",
title: "Filter protanopia", title: "Map (protanopia)",
icon: <ColorIcon/>, icon: <ColorIcon/>,
}, },
{ {
id: "filter-tritanopia", id: "filter-tritanopia",
title: "Filter tritanopia", title: "Map (tritanopia)",
icon: <ColorIcon/>, icon: <ColorIcon/>,
}, },
{ {
id: "filter-achromatopsia", id: "filter-achromatopsia",
title: "Filter achromatopsia", title: "Map (achromatopsia)",
icon: <ColorIcon/>, icon: <ColorIcon/>,
}, },
]; ];
const currentView = views.find((view) => {
return view.id === this.props.mapState;
});
return <div className='maputnik-toolbar'> return <div className='maputnik-toolbar'>
<div className="maputnik-toolbar__inner"> <div className="maputnik-toolbar__inner">
<div <div
@ -195,7 +199,7 @@ export default class Toolbar extends React.Component {
> >
<Button wdKey="nav:settings" className="maputnik-toolbar-action"> <Button wdKey="nav:settings" className="maputnik-toolbar-action">
<ViewIcon/> <ViewIcon/>
<IconText>Change view</IconText> <IconText>View: {currentView.title}</IconText>
</Button> </Button>
<Menu> <Menu>
<ul className="map-state-menu__menu"> <ul className="map-state-menu__menu">