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

Remove everything left from Rebass

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-21 14:46:51 +01:00
parent 684e0d9dd0
commit 1fda430794
13 changed files with 48 additions and 287 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -37,7 +37,6 @@
"react-icon-base": "^2.0.4",
"react-icons": "^2.2.1",
"react-sortable-hoc": "^0.4.5",
"rebass": "^0.3.1",
"request": "^2.79.0"
},
"babel": {

31
src/components/About.jsx
View file

@ -1,31 +0,0 @@
import React from 'react'
import theme from './theme.js'
import Heading from 'rebass/dist/Heading'
import Container from 'rebass/dist/Container'
import Input from 'rebass/dist/Input'
import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
import Space from 'rebass/dist/Space'
/** About page with basic infos and links to github repo */
export class About extends React.Component {
render() {
return <div>
<Toolbar style={{marginRight: 20}}>
<NavItem>
<Heading>About</Heading>
</NavItem>
</Toolbar>
<Container>
<h3>Maputnik – Visual Map Editor for Mapbox GL</h3>
<p>
A free and open visual editor for the Mapbox GL styles targeted at developers and map designers. Creating your own custom map is easy with Maputnik.
</p>
<p>
The source code is openly licensed and available on <a href="https://github.com/maputnik/editor">GitHub</a>.
</p>
</Container>
</div>
}
}

4
src/components/Layout.jsx
View file

@ -1,7 +1,7 @@
import React from 'react'
import ScrollContainer from './ScrollContainer'
import theme from '../config/rebass'
import theme from '../config/theme'
import colors from '../config/colors'
export default class Layout extends React.Component {
@ -13,13 +13,11 @@ export default class Layout extends React.Component {
}
static childContextTypes = {
rebass: React.PropTypes.object,
reactIconBase: React.PropTypes.object
}
getChildContext() {
return {
rebass: theme,
reactIconBase: { size: 20 }
}
}

39
src/components/Toolbar.jsx
View file

@ -1,8 +1,6 @@
import React from 'react'
import FileReaderInput from 'react-file-reader-input'
import Button from 'rebass/dist/Button'
import MdFileDownload from 'react-icons/lib/md/file-download'
import MdFileUpload from 'react-icons/lib/md/file-upload'
import MdOpenInBrowser from 'react-icons/lib/md/open-in-browser'
@ -27,6 +25,11 @@ const InlineBlock = props => <div style={{display: "inline-block", ...props.styl
{props.children}
</div>
const ToolbarAction = props => <a onClick={props.onClick}
style={{ display: "inline-block", ...props.style }}>
{props.children}
</a>
export default class Toolbar extends React.Component {
static propTypes = {
mapStyle: React.PropTypes.object.isRequired,
@ -62,10 +65,10 @@ export default class Toolbar extends React.Component {
saveButton() {
if(this.props.mapStyle.layers.length > 0) {
return <InlineBlock>
<Button onClick={this.props.onStyleSave} big={true}>
<ToolbarAction onClick={this.props.onStyleSave} big={true}>
<MdSave />
Save
</Button>
</ToolbarAction>
</InlineBlock>
}
return null
@ -73,10 +76,10 @@ export default class Toolbar extends React.Component {
downloadButton() {
return <InlineBlock>
<Button onClick={this.props.onStyleDownload} big={true}>
<ToolbarAction onClick={this.props.onStyleDownload} big={true}>
<MdFileDownload />
Download
</Button>
</ToolbarAction>
</InlineBlock>
}
@ -111,48 +114,48 @@ export default class Toolbar extends React.Component {
toggle={() => this.toggleSettings.bind(this)}
/>
<InlineBlock>
<Button style={{
<ToolbarAction style={{
width: 180,
textAlign: 'left',
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'}}/>
<span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
</Button>
</ToolbarAction>
</InlineBlock>
<InlineBlock>
<FileReaderInput onChange={this.onUpload.bind(this)}>
<Button big={true}>
<ToolbarAction>
<MdOpenInBrowser />
Open
</Button>
</ToolbarAction>
</FileReaderInput>
</InlineBlock>
{this.downloadButton()}
{this.saveButton()}
<InlineBlock>
<Button big={true} onClick={this.toggleTilesets.bind(this)}>
<ToolbarAction onClick={this.toggleTilesets.bind(this)}>
<MdLayers />
Tilesets
</Button>
</ToolbarAction>
</InlineBlock>
<InlineBlock>
<Button big={true} onClick={this.toggleSettings.bind(this)}>
<ToolbarAction onClick={this.toggleSettings.bind(this)}>
<MdSettings />
Style Settings
</Button>
</ToolbarAction>
</InlineBlock>
<InlineBlock>
<Button big={true} onClick={this.toggleSettings.bind(this)}>
<ToolbarAction onClick={this.toggleSettings.bind(this)}>
<MdFindInPage />
Inspect
</Button>
</ToolbarAction>
</InlineBlock>
<InlineBlock>
<Button big={true} onClick={this.props.onOpenAbout}>
<ToolbarAction onClick={this.props.onOpenAbout}>
<MdHelpOutline />
Help
</Button>
</ToolbarAction>
</InlineBlock>
</div>
}

1
src/components/fields/SpecField.jsx
View file

@ -9,7 +9,6 @@ import ColorField from './ColorField'
import StringField from './StringField'
import input from '../../config/input.js'
import theme from '../../config/rebass.js'
function labelFromFieldName(fieldName) {
let label = fieldName.split('-').slice(1).join(' ')

9
src/components/layers/LayerEditor.jsx
View file

@ -6,7 +6,8 @@ import PropertyGroup from '../fields/PropertyGroup'
import LayerEditorGroup from './LayerEditorGroup'
import layout from '../../config/layout.json'
import theme from '../../config/rebass.js'
import { margins, fontSizes } from '../../config/scales'
import colors from '../../config/colors'
class UnsupportedLayer extends React.Component {
render() {
@ -62,8 +63,8 @@ export default class LayerEditor extends React.Component {
getChildContext () {
return {
reactIconBase: {
size: theme.fontSizes[4],
color: theme.colors.lowgray,
size: fontSizes[4],
color: colors.lowgray,
}
}
}
@ -142,7 +143,7 @@ export default class LayerEditor extends React.Component {
}
return <div style={{
padding: theme.scale[0],
padding: margins[0],
}}>
{propertyGroups}
{dataGroup}

9
src/components/modals/TilesetsModal.jsx
View file

@ -3,8 +3,8 @@ import React from 'react'
import Modal from './Modal'
import publicTilesets from '../../config/tilesets.json'
import theme from '../../config/rebass'
import colors from '../../config/colors'
import { margins } from '../../config/scales'
class TilesetsModal extends React.Component {
static propTypes = {
@ -20,13 +20,8 @@ class TilesetsModal extends React.Component {
render() {
const tilesetOptions = publicTilesets.map(tileset => {
return <div key={tileset.id} style={{
padding: theme.scale[0],
padding: margins[0],
borderBottom: 1,
borderTop: 1,
borderLeft: 2,
borderRight: 0,
borderStyle: "solid",
borderColor: theme.borderColor,
}}>
#{tileset.id}
<br />

97
src/components/sources/editor.jsx
View file

@ -1,97 +0,0 @@
import React from 'react'
import Input from 'rebass/dist/Input'
import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
import Space from 'rebass/dist/Space'
import Collapse from 'react-collapse'
import PureRenderMixin from 'react-addons-pure-render-mixin';
import theme from '../theme.js'
class UnsupportedSource extends React.Component {
render() {
return <div></div>
}
}
class VectorSource extends React.Component {
static propTypes = {
source: React.PropTypes.object.isRequired,
onSourceChanged: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return <div>
<Input
onChange={e => this.props.onSourceChanged(this.props.source.set('url', e.target.value))}
name="url" label="TileJSON url"
value={this.props.source.get("url")}
/>
<Input name="minzoom" label="Minimum zoom level" value={this.props.source.get("minzoom")} />
<Input name="maxzoom" label="Maximum zoom level" value={this.props.source.get("maxzoom")} />
</div>
}
}
export class SourceEditor extends React.Component {
static propTypes = {
sourceId: React.PropTypes.string.isRequired,
source: React.PropTypes.object.isRequired,
onSourceChanged: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
this.state = {
isOpened: false,
}
}
toggleLayer() {
this.setState({isOpened: !this.state.isOpened})
}
sourceFromType(type) {
if (type === "vector") {
return <VectorSource
onSourceChanged={s => this.props.onSourceChanged(this.props.sourceId, s)}
source={this.props.source}
/>
}
return <UnsupportedSource />
}
render() {
return <div style={{
padding: theme.scale[0],
borderBottom: 1,
borderTop: 1,
borderLeft: 2,
borderRight: 0,
borderStyle: "solid",
borderColor: theme.borderColor,
}}>
<Toolbar onClick={this.toggleLayer.bind(this)}>
<NavItem style={{fontWeight: 400}}>
#{this.props.sourceId}
</NavItem>
<Space auto x={1} />
</Toolbar>
<Collapse isOpened={this.state.isOpened}>
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
{this.sourceFromType(this.props.source.get('type'))}
</div>
</Collapse>
</div>
}
}

49
src/components/sources/list.jsx
View file

@ -1,49 +0,0 @@
import React from 'react'
import Heading from 'rebass/dist/Heading'
import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
import Space from 'rebass/dist/Space'
import { SourceEditor } from './editor.jsx'
import scrollbars from '../scrollbars.scss'
import PureRenderMixin from 'react-addons-pure-render-mixin';
// List of collapsible layer editors
export class SourceList extends React.Component {
static propTypes = {
sources: React.PropTypes.object.isRequired,
onSourcesChanged: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
onSourceChanged(sourceId, changedSource) {
const changedSources = this.props.sources.set(sourceId, changedSource)
this.props.onSourcesChanged(changedSources)
}
render() {
const sourceEditors = this.props.sources.map((source, sourceId) => {
return <SourceEditor
key={sourceId}
sourceId={sourceId}
source={source}
onSourceChanged={this.onSourceChanged.bind(this)}
/>
}).toIndexedSeq()
return <div>
<Toolbar style={{marginRight: 20}}>
<NavItem>
<Heading>Sources</Heading>
</NavItem>
<Space auto x={1} />
</Toolbar>
{sourceEditors}
</div>
}
}

19
src/config/input.js
View file

@ -1,8 +1,9 @@
import theme from './rebass.js'
import colors from './colors'
import { margins, fontSizes } from './scales'
const base = {
display: 'inline-block',
fontSize: theme.fontSizes[5],
fontSize: fontSizes[5],
lineHeight: 2,
paddingLeft: 5,
paddingRight: 5,
@ -11,28 +12,28 @@ const base = {
const label = {
...base,
width: '40%',
color: theme.colors.lowgray,
color: colors.lowgray,
userSelect: 'none',
}
const property = {
marginTop: theme.scale[2],
marginBottom: theme.scale[2],
marginTop: margins[2],
marginBottom: margins[2],
}
const input = {
...base,
border: 'none',
width: '47%',
backgroundColor: theme.colors.gray,
color: theme.colors.lowgray,
backgroundColor: colors.gray,
color: colors.lowgray,
}
const checkbox = {
...base,
border: '1px solid rgb(36, 36, 36)',
backgroundColor: theme.colors.gray,
color: theme.colors.lowgray,
backgroundColor: colors.gray,
color: colors.lowgray,
}
const select = {

66
src/config/rebass.js
View file

@ -1,66 +0,0 @@
import colors from './colors'
import { margins, fontSizes } from './scales'
const border = {
borderColor: colors.black,
borderRadius: 0,
}
const dark = {
name: 'Dark',
color: colors.white,
fontFamily: 'Roboto, sans-serif',
scale: margins,
fontSizes: fontSizes,
colors,
inverted: colors.midGray,
...border,
Block: {
backgroundColor: colors.gray,
...border,
borderLeft: 0,
borderRight: 0,
marginBottom: 0,
paddingBottom: 0,
},
PanelHeader: {
marginRight: -10,
marginBottom: 0,
fontSize: fontSizes[5],
fontWeight: 400,
color: colors.white,
},
Panel: {
backgroundColor: colors.gray,
},
Button: {
color: '#00d9f7',
},
Menu: {
color: '#00d9f7',
backgroundColor: '#000'
},
Message: {
color: '#111',
opacity: 15/16
},
Header: {
fontWeight: 400,
},
ButtonCircle : {
},
Toolbar: {
fontWeight: 400,
minHeight: margins[3]
},
Label: {
fontWeight: 300,
},
Input: {
fontWeight: 300,
fontSize: fontSizes[5],
}
}
export default dark

9
src/config/theme.js Normal file
View file

@ -0,0 +1,9 @@
import colors from './colors'
import { margins, fontSizes } from './scales'
const dark = {
color: colors.white,
fontFamily: 'Roboto, sans-serif',
}
export default dark

1
webpack.production.config.js
View file

@ -40,7 +40,6 @@ module.exports = {
"react-file-reader-input",
//TODO: Icons raise multi vendor errors?
//"react-icons",
"rebass",
// Open Layers
'openlayers',
'ol-mapbox-style'