mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-28 17:31:14 +01:00
Improved color accessibility UI
This commit is contained in:
parent
8f07a79a49
commit
bcdc7c6811
2 changed files with 10 additions and 6 deletions
|
@ -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,
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue