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

Make toolbar actions look nice

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-21 15:08:04 +01:00
parent 1fda430794
commit b55099ea38
2 changed files with 48 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Layout.jsx
View file

@ -18,7 +18,7 @@ export default class Layout extends React.Component {
getChildContext() { getChildContext() {
return { return {
reactIconBase: { size: 20 } reactIconBase: { size: 14 }
} }
} }

53
src/components/Toolbar.jsx
View file

@ -19,14 +19,21 @@ import SettingsModal from './modals/SettingsModal'
import TilesetsModal from './modals/TilesetsModal' import TilesetsModal from './modals/TilesetsModal'
import style from '../libs/style' import style from '../libs/style'
import colors from '../config/colors'; import colors from '../config/colors'
import { margins, fontSizes } from '../config/scales'
const InlineBlock = props => <div style={{display: "inline-block", ...props.style}}> const IconText = props => <span style={{ paddingLeft: margins[0] }}>
{props.children} {props.children}
</div> </span>
const ToolbarAction = props => <a onClick={props.onClick} const ToolbarAction = props => <a onClick={props.onClick}
style={{ display: "inline-block", ...props.style }}> style={{
display: "inline-block",
padding: margins[1],
fontSize: fontSizes[4],
cursor: "pointer",
...props.style,
}}>
{props.children} {props.children}
</a> </a>
@ -64,23 +71,19 @@ export default class Toolbar extends React.Component {
saveButton() { saveButton() {
if(this.props.mapStyle.layers.length > 0) { if(this.props.mapStyle.layers.length > 0) {
return <InlineBlock> return <ToolbarAction onClick={this.props.onStyleSave} big={true}>
<ToolbarAction onClick={this.props.onStyleSave} big={true}>
<MdSave /> <MdSave />
Save <IconText>Save</IconText>
</ToolbarAction> </ToolbarAction>
</InlineBlock>
} }
return null return null
} }
downloadButton() { downloadButton() {
return <InlineBlock> return <ToolbarAction onClick={this.props.onStyleDownload} big={true}>
<ToolbarAction onClick={this.props.onStyleDownload} big={true}>
<MdFileDownload /> <MdFileDownload />
Download <IconText>Download</IconText>
</ToolbarAction> </ToolbarAction>
</InlineBlock>
} }
toggleSettings() { toggleSettings() {
@ -113,7 +116,6 @@ export default class Toolbar extends React.Component {
open={this.state.openTilesetsModal} open={this.state.openTilesetsModal}
toggle={() => this.toggleSettings.bind(this)} toggle={() => this.toggleSettings.bind(this)}
/> />
<InlineBlock>
<ToolbarAction style={{ <ToolbarAction style={{
width: 180, width: 180,
textAlign: 'left', textAlign: 'left',
@ -122,41 +124,30 @@ export default class Toolbar extends React.Component {
<img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/> <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
<span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span> <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
</ToolbarAction> </ToolbarAction>
</InlineBlock>
<InlineBlock>
<FileReaderInput onChange={this.onUpload.bind(this)}>
<ToolbarAction> <ToolbarAction>
<FileReaderInput onChange={this.onUpload.bind(this)}>
<MdOpenInBrowser /> <MdOpenInBrowser />
Open <IconText>Open</IconText>
</ToolbarAction>
</FileReaderInput> </FileReaderInput>
</InlineBlock> </ToolbarAction>
{this.downloadButton()} {this.downloadButton()}
{this.saveButton()} {this.saveButton()}
<InlineBlock>
<ToolbarAction onClick={this.toggleTilesets.bind(this)}> <ToolbarAction onClick={this.toggleTilesets.bind(this)}>
<MdLayers /> <MdLayers />
Tilesets <IconText>Tilesets</IconText>
</ToolbarAction> </ToolbarAction>
</InlineBlock>
<InlineBlock>
<ToolbarAction onClick={this.toggleSettings.bind(this)}> <ToolbarAction onClick={this.toggleSettings.bind(this)}>
<MdSettings /> <MdSettings />
Style Settings <IconText>Style Settings</IconText>
</ToolbarAction> </ToolbarAction>
</InlineBlock>
<InlineBlock>
<ToolbarAction onClick={this.toggleSettings.bind(this)}> <ToolbarAction onClick={this.toggleSettings.bind(this)}>
<MdFindInPage /> <MdFindInPage />
Inspect <IconText>Inspect</IconText>
</ToolbarAction> </ToolbarAction>
</InlineBlock>
<InlineBlock>
<ToolbarAction onClick={this.props.onOpenAbout}> <ToolbarAction onClick={this.props.onOpenAbout}>
<MdHelpOutline /> <MdHelpOutline />
Help <IconText>Help</IconText>
</ToolbarAction> </ToolbarAction>
</InlineBlock>
</div> </div>
} }
} }