schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-30 22:10:33 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finished shortcuts modal styling

Browse source
This commit is contained in:
orangemug 2018-06-02 10:17:39 +01:00
parent ab9c39b862
commit 480d54c2d8
2 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/modals/ShortcutsModal.jsx
View file

@ -19,7 +19,7 @@ class ShortcutsModal extends React.Component {
const help = [ const help = [
{ {
key: "?", key: "?",
text: "Show shortcuts menu" text: "Shortcuts menu"
}, },
{ {
key: "o", key: "o",
@ -35,11 +35,11 @@ class ShortcutsModal extends React.Component {
}, },
{ {
key: "p", key: "p",
text: "Source settings modal" text: "Style settings modal"
}, },
{ {
key: "i", key: "i",
text: "Toggle map" text: "Toggle inspect"
}, },
{ {
key: "m", key: "m",
@ -54,7 +54,10 @@ class ShortcutsModal extends React.Component {
onOpenToggle={this.props.onOpenToggle} onOpenToggle={this.props.onOpenToggle}
title={'Shortcuts'} title={'Shortcuts'}
> >
<div className="maputnik-modal-section"> <div className="maputnik-modal-section maputnik-modal-shortcuts">
<p>
Press <code>ESC</code> to lose focus of any active elements, then press one of:
</p>
<ul> <ul>
{help.map((item) => { {help.map((item) => {
return <li> return <li>

17
src/styles/_modal.scss
View file

@ -222,3 +222,20 @@
text-decoration: none; text-decoration: none;
color: #ef5350; color: #ef5350;
} }
.maputnik-modal-shortcuts {
code {
color: white;
background: #3c3c3c;
padding: 2px 6px;
display: inline-block;
text-align: center;
border-radius: 2px;
margin-right: 4px;
font-family: monospace;
}
li {
margin-bottom: 4px;
}
}