schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 16:21:16 +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 }
} }
} }

103
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 /> <IconText>Save</IconText>
Save </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 /> <IconText>Download</IconText>
Download </ToolbarAction>
</ToolbarAction>
</InlineBlock>
} }
toggleSettings() { toggleSettings() {
@ -113,50 +116,38 @@ 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', backgroundColor: colors.black
backgroundColor: colors.black }}>
}}> <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> <ToolbarAction>
</InlineBlock>
<InlineBlock>
<FileReaderInput onChange={this.onUpload.bind(this)}> <FileReaderInput onChange={this.onUpload.bind(this)}>
<ToolbarAction> <MdOpenInBrowser />
<MdOpenInBrowser /> <IconText>Open</IconText>
Open
</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 /> <IconText>Tilesets</IconText>
Tilesets </ToolbarAction>
</ToolbarAction> <ToolbarAction onClick={this.toggleSettings.bind(this)}>
</InlineBlock> <MdSettings />
<InlineBlock> <IconText>Style Settings</IconText>
<ToolbarAction onClick={this.toggleSettings.bind(this)}> </ToolbarAction>
<MdSettings /> <ToolbarAction onClick={this.toggleSettings.bind(this)}>
Style Settings <MdFindInPage />
</ToolbarAction> <IconText>Inspect</IconText>
</InlineBlock> </ToolbarAction>
<InlineBlock> <ToolbarAction onClick={this.props.onOpenAbout}>
<ToolbarAction onClick={this.toggleSettings.bind(this)}> <MdHelpOutline />
<MdFindInPage /> <IconText>Help</IconText>
Inspect </ToolbarAction>
</ToolbarAction>
</InlineBlock>
<InlineBlock>
<ToolbarAction onClick={this.props.onOpenAbout}>
<MdHelpOutline />
Help
</ToolbarAction>
</InlineBlock>
</div> </div>
} }
} }