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

Modify layout

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-04 17:03:36 +01:00
parent b5cfecec81
commit 02a7ccf831
6 changed files with 305 additions and 293 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -8,7 +8,7 @@
"build": "webpack --config webpack.production.config.js --progress --profile --colors", "build": "webpack --config webpack.production.config.js --progress --profile --colors",
"test": "karma start --single-run", "test": "karma start --single-run",
"test-watch": "karma start", "test-watch": "karma start",
"start": "webpack-dev-server --progress --profile --colors", "start": "webpack-dev-server --progress --profile --colors --watch-poll",
"lint": "eslint --ext js --ext jsx {src,test}" "lint": "eslint --ext js --ext jsx {src,test}"
}, },
"repository": { "repository": {

85
src/layers/list.jsx
View file

@ -12,55 +12,48 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
// List of collapsible layer editors // List of collapsible layer editors
export class LayerList extends React.Component { export class LayerList extends React.Component {
static propTypes = { static propTypes = {
layers: React.PropTypes.instanceOf(Immutable.OrderedMap), layers: React.PropTypes.instanceOf(Immutable.OrderedMap),
onLayersChanged: React.PropTypes.func.isRequired onLayersChanged: React.PropTypes.func.isRequired
} }
constructor(props) { constructor(props) {
super(props) super(props)
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
} }
onLayerDestroyed(deletedLayer) { onLayerDestroyed(deletedLayer) {
const remainingLayers = this.props.layers.delete(deletedLayer.get('id')) const remainingLayers = this.props.layers.delete(deletedLayer.get('id'))
this.props.onLayersChanged(remainingLayers) this.props.onLayersChanged(remainingLayers)
} }
onLayerChanged(layer) { onLayerChanged(layer) {
const changedLayers = this.props.layers.set(layer.get('id'), layer) const changedLayers = this.props.layers.set(layer.get('id'), layer)
this.props.onLayersChanged(changedLayers) this.props.onLayersChanged(changedLayers)
} }
render() { render() {
var layerPanels = [] var layerPanels = []
layerPanels = this.props.layers.map(layer => { layerPanels = this.props.layers.map(layer => {
return <LayerEditor return <LayerEditor
key={layer.get('id')} key={layer.get('id')}
layer={layer} layer={layer}
onLayerDestroyed={this.onLayerDestroyed.bind(this)} onLayerDestroyed={this.onLayerDestroyed.bind(this)}
onLayerChanged={this.onLayerChanged.bind(this)} onLayerChanged={this.onLayerChanged.bind(this)}
/> />
}).toIndexedSeq() }).toIndexedSeq()
return <div> return <div>
<Toolbar style={{marginRight: 20}}> <div className={scrollbars.darkScrollbar} style={{
<NavItem> overflowY: "scroll",
<Heading>Layers</Heading> bottom:0,
</NavItem> left:0,
<Space auto x={1} /> right:0,
</Toolbar> top:1,
position: "absolute",
<div className={scrollbars.darkScrollbar} style={{ }}>
overflowY: "scroll", {layerPanels}
bottom:0, </div>
left:0, </div>
right:0, }
top:40,
position: "absolute",
}}>
{layerPanels}
</div>
</div>
}
} }

14
src/scrollbars.scss
View file

@ -1,12 +1,12 @@
.darkScrollbar::-webkit-scrollbar { .darkScrollbar::-webkit-scrollbar {
background-color: #313131; background-color: #26282e;
width: 10px; width: 10px;
} }
.darkScrollbar::-webkit-scrollbar-thumb { .darkScrollbar::-webkit-scrollbar-thumb {
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555; background-color: #40444e;
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }

166
src/theme.js
View file

@ -1,112 +1,112 @@
const caps = { const caps = {
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '.2em' letterSpacing: '.2em'
} }
export const fullHeight = { export const fullHeight = {
position: "fixed", position: "fixed",
top: 0, top: 0,
bottom: 0, bottom: 0,
height: "100%", height: "100%",
} }
const baseColors = { const baseColors = {
black: '#242424', black: '#1c1f24',
gray: '#313131', gray: '#26282e',
midgray: '#778', midgray: '#36383e',
lowgray: '#dcdcdc', lowgray: '#8e8e8e',
white: '#fff', white: '#fff',
blue: '#00d9f7', blue: '#00d9f7',
green: '#B4C7AD', green: '#B4C7AD',
orange: '#fb3', orange: '#fb3',
red: '#f04', red: '#f04',
} }
const themeColors = { const themeColors = {
primary: baseColors.gray, primary: baseColors.gray,
secondary: baseColors.midgray, secondary: baseColors.midgray,
default: baseColors.gray, default: baseColors.gray,
info: baseColors.blue, info: baseColors.blue,
success: baseColors.green, success: baseColors.green,
warning: baseColors.orange, warning: baseColors.orange,
error: baseColors.red error: baseColors.red
} }
export const colors = { export const colors = {
...baseColors, ...baseColors,
...themeColors ...themeColors
} }
export const inputBase = { export const inputBase = {
display: 'block', display: 'block',
border: '1px solid rgb(36, 36, 36)', border: '1px solid rgb(36, 36, 36)',
height: 30, height: 30,
width: '100%', width: '100%',
paddingLeft: 5, paddingLeft: 5,
paddingRight: 5, paddingRight: 5,
backgroundColor: colors.gray, backgroundColor: colors.gray,
} }
const scale = [3, 5, 10, 30, 40] const scale = [3, 5, 10, 30, 40]
const fontSizes = [28, 24, 20, 16, 14, 12, 10] const fontSizes = [28, 24, 20, 16, 14, 12, 10]
const border = { const border = {
borderColor: colors.black, borderColor: colors.black,
borderRadius: 0, borderRadius: 0,
} }
const dark = { const dark = {
name: 'Dark', name: 'Dark',
color: colors.white, color: colors.white,
fontFamily: 'Roboto, sans-serif', fontFamily: 'Roboto, sans-serif',
scale, scale,
fontSizes, fontSizes,
colors, colors,
inverted: colors.midGray, inverted: colors.midGray,
...border, ...border,
Block: { Block: {
backgroundColor: colors.gray, backgroundColor: colors.gray,
...border, ...border,
borderLeft: 0, borderLeft: 0,
borderRight: 0, borderRight: 0,
marginBottom: 0, marginBottom: 0,
paddingBottom: 0, paddingBottom: 0,
}, },
PanelHeader: { PanelHeader: {
marginRight: -10, marginRight: -10,
marginBottom: 0, marginBottom: 0,
fontSize: fontSizes[5], fontSize: fontSizes[5],
fontWeight: 400, fontWeight: 400,
color: colors.white, color: colors.white,
}, },
Button: { Button: {
color: '#00d9f7', color: '#00d9f7',
}, },
Menu: { Menu: {
color: '#00d9f7', color: '#00d9f7',
backgroundColor: '#000' backgroundColor: '#000'
}, },
Message: { Message: {
color: '#111', color: '#111',
opacity: 15/16 opacity: 15/16
}, },
Header: { Header: {
fontWeight: 400, fontWeight: 400,
}, },
ButtonCircle : { ButtonCircle : {
}, },
Toolbar: { Toolbar: {
fontWeight: 400, fontWeight: 400,
minHeight: scale[3] minHeight: scale[3]
}, },
Label: { Label: {
fontWeight: 300, fontWeight: 300,
}, },
Input: { Input: {
fontWeight: 300, fontWeight: 300,
fontSize: fontSizes[5], fontSize: fontSizes[5],
}, },
} }
export default dark export default dark

224
src/toolbar.jsx
View file

@ -12,122 +12,140 @@ import Fixed from 'rebass/dist/Fixed'
import MdFileDownload from 'react-icons/lib/md/file-download' import MdFileDownload from 'react-icons/lib/md/file-download'
import MdFileUpload from 'react-icons/lib/md/file-upload' import MdFileUpload from 'react-icons/lib/md/file-upload'
import MdOpenInBrowser from 'react-icons/lib/md/open-in-browser'
import MdSettings from 'react-icons/lib/md/settings' import MdSettings from 'react-icons/lib/md/settings'
import MdInfo from 'react-icons/lib/md/info' import MdInfo from 'react-icons/lib/md/info'
import MdLayers from 'react-icons/lib/md/layers' import MdLayers from 'react-icons/lib/md/layers'
import MdSave from 'react-icons/lib/md/save' import MdSave from 'react-icons/lib/md/save'
import MdStyle from 'react-icons/lib/md/style'
import MdMap from 'react-icons/lib/md/map' import MdMap from 'react-icons/lib/md/map'
import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
import MdFontDownload from 'react-icons/lib/md/font-download'
import MdHelpOutline from 'react-icons/lib/md/help-outline'
import MdFindInPage from 'react-icons/lib/md/find-in-page'
import style from './style.js' import style from './style.js'
import { fullHeight } from './theme.js' import { fullHeight } from './theme.js'
import theme from './theme.js'; import theme from './theme.js';
const InlineBlock = props => <div style={{display: "inline-block", ...props.style}}>
{props.children}
</div>
export class Toolbar extends React.Component { export class Toolbar extends React.Component {
static propTypes = { static propTypes = {
// A new style has been uploaded // A new style has been uploaded
onStyleUpload: React.PropTypes.func.isRequired, onStyleUpload: React.PropTypes.func.isRequired,
// Current style is requested for download // Current style is requested for download
onStyleDownload: React.PropTypes.func.isRequired, onStyleDownload: React.PropTypes.func.isRequired,
// Style is explicitely saved to local cache // Style is explicitely saved to local cache
onStyleSave: React.PropTypes.func, onStyleSave: React.PropTypes.func,
// Open settings drawer // Open settings drawer
onOpenSettings: React.PropTypes.func, onOpenSettings: React.PropTypes.func,
// Open about page // Open about page
onOpenAbout: React.PropTypes.func, onOpenAbout: React.PropTypes.func,
// Open sources drawer // Open sources drawer
onOpenSources: React.PropTypes.func, onOpenSources: React.PropTypes.func,
// Open layers drawer // Open layers drawer
onOpenLayers: React.PropTypes.func, onOpenLayers: React.PropTypes.func,
// Whether a style is available for download or saving // Whether a style is available for download or saving
// A style with no layers should not be available // A style with no layers should not be available
styleAvailable: React.PropTypes.bool, styleAvailable: React.PropTypes.bool,
} }
onUpload(_, files) { onUpload(_, files) {
const [e, file] = files[0]; const [e, file] = files[0];
const reader = new FileReader(); const reader = new FileReader();
reader.readAsText(file, "UTF-8"); reader.readAsText(file, "UTF-8");
reader.onload = e => { reader.onload = e => {
let mapStyle = style.fromJSON(JSON.parse(e.target.result)) let mapStyle = style.fromJSON(JSON.parse(e.target.result))
mapStyle = style.ensureMetadataExists(mapStyle) mapStyle = style.ensureMetadataExists(mapStyle)
this.props.onStyleUpload(mapStyle); this.props.onStyleUpload(mapStyle);
} }
reader.onerror = e => console.log(e.target); reader.onerror = e => console.log(e.target);
} }
saveButton() { saveButton() {
if(this.props.styleAvailable) { if(this.props.styleAvailable) {
return <Block> return <InlineBlock>
<Button onClick={this.props.onStyleSave} big={true}> <Button onClick={this.props.onStyleSave} big={true}>
<Tooltip inverted rounded title="Save style"> <MdSave />
<MdSave /> Save
</Tooltip> </Button>
</Button> </InlineBlock>
</Block> }
} return null
return null }
}
downloadButton() { downloadButton() {
if(this.props.styleAvailable) { if(this.props.styleAvailable) {
return <Block> return <InlineBlock>
<Button onClick={this.props.onStyleDownload} big={true}> <Button onClick={this.props.onStyleDownload} big={true}>
<Tooltip inverted rounded title="Download style"> <MdFileDownload />
<MdFileDownload /> Download
</Tooltip> </Button>
</Button> </InlineBlock>
</Block> }
} return null
return null }
}
render() { render() {
return <Container style={{
...fullHeight, return <div style={{
zIndex: 100, position: "fixed",
left: 0, height: 50,
top: 0, width: '100%',
backgroundColor: theme.colors.black } zIndex: 100,
}> left: 0,
<Block> top: 0,
<FileReaderInput onChange={this.onUpload.bind(this)}> backgroundColor: theme.colors.black
<Button big={true} theme={this.props.styleAvailable ? "default" : "success"}> }}>
<Tooltip inverted rounded title="Upload style"> <InlineBlock>
<MdFileUpload /> <Button style={{width: 300, textAlign: 'left'}}>
</Tooltip> <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 40, height: 40, paddingRight: 5, verticalAlign: 'middle'}}/>
</Button> <span style={{fontSize: 20 }}>Maputnik</span>
</FileReaderInput> </Button>
</Block> </InlineBlock>
{this.downloadButton()} <InlineBlock>
{this.saveButton()} <FileReaderInput onChange={this.onUpload.bind(this)}>
<Block> <Button big={true} theme={this.props.styleAvailable ? "default" : "success"}>
<Button big={true} onClick={this.props.onOpenLayers}> <MdOpenInBrowser />
<Tooltip inverted rounded title="Layers"> Open
<MdLayers /> </Button>
</Tooltip> </FileReaderInput>
</Button> </InlineBlock>
</Block> {this.downloadButton()}
<Block> {this.saveButton()}
<Button big={true} onClick={this.props.onOpenSources}> <InlineBlock>
<Tooltip inverted rounded title="Sources"> <Button big={true} onClick={this.props.onOpenSettings}>
<MdMap /> <MdLayers />
</Tooltip> Tilesets
</Button> </Button>
</Block> </InlineBlock>
<Block> <InlineBlock>
<Button big={true} onClick={this.props.onOpenSettings}> <Button big={true} onClick={this.props.onOpenSettings}>
<Tooltip inverted rounded title="Settings"> <MdFontDownload />
<MdSettings /> Fonts
</Tooltip> </Button>
</Button> </InlineBlock>
</Block> <InlineBlock>
<Block> <Button big={true} onClick={this.props.onOpenSettings}>
<Button big={true} onClick={this.props.onOpenAbout}> <MdInsertEmoticon/>
<Tooltip inverted rounded title="About"> Icons
<MdInfo /> </Button>
</Tooltip> </InlineBlock>
</Button> <InlineBlock>
</Block> <Button big={true} onClick={this.props.onOpenSettings}>
</Container> <MdFindInPage />
} Inspect
</Button>
</InlineBlock>
<InlineBlock>
<Button big={true} onClick={this.props.onOpenAbout}>
<MdHelpOutline />
Help
</Button>
</InlineBlock>
</div>
}
} }

107
src/workspace.jsx
View file

@ -8,65 +8,66 @@ import { colors, fullHeight } from './theme.js'
/** The workspace drawer contains the editor components depending on the edit /** The workspace drawer contains the editor components depending on the edit
* context chosen in the toolbar. It holds the state of the layers.*/ * context chosen in the toolbar. It holds the state of the layers.*/
export class WorkspaceDrawer extends React.Component { export class WorkspaceDrawer extends React.Component {
static propTypes = { static propTypes = {
mapStyle: React.PropTypes.object.isRequired, mapStyle: React.PropTypes.object.isRequired,
onStyleChanged: React.PropTypes.func.isRequired, onStyleChanged: React.PropTypes.func.isRequired,
workContext: React.PropTypes.oneOf(['layers', 'settings', 'sources']).isRequired, workContext: React.PropTypes.oneOf(['layers', 'settings', 'sources']).isRequired,
accessToken: React.PropTypes.string, accessToken: React.PropTypes.string,
onAccessTokenChanged: React.PropTypes.func, onAccessTokenChanged: React.PropTypes.func,
onReset: React.PropTypes.func, onReset: React.PropTypes.func,
} }
onLayersChanged(changedLayers) { onLayersChanged(changedLayers) {
const changedStyle = this.props.mapStyle.set('layers', changedLayers) const changedStyle = this.props.mapStyle.set('layers', changedLayers)
this.props.onStyleChanged(changedStyle) this.props.onStyleChanged(changedStyle)
} }
onSourcesChanged(changedSources) { onSourcesChanged(changedSources) {
const changedStyle = this.props.mapStyle.set('sources', changedSources) const changedStyle = this.props.mapStyle.set('sources', changedSources)
this.props.onStyleChanged(changedStyle) this.props.onStyleChanged(changedStyle)
} }
render() { render() {
let workspaceContent = null let workspaceContent = null
if(this.props.workContext === "sources") { if(this.props.workContext === "sources") {
workspaceContent = <SourceList workspaceContent = <SourceList
onSourcesChanged={this.onSourcesChanged.bind(this)} onSourcesChanged={this.onSourcesChanged.bind(this)}
sources={this.props.mapStyle.get('sources')} sources={this.props.mapStyle.get('sources')}
/> />
} }
if(this.props.workContext === "layers") { if(this.props.workContext === "layers") {
workspaceContent = <LayerList workspaceContent = <LayerList
onLayersChanged={this.onLayersChanged.bind(this)} onLayersChanged={this.onLayersChanged.bind(this)}
layers={this.props.mapStyle.get('layers')} layers={this.props.mapStyle.get('layers')}
/> />
} }
if(this.props.workContext === "settings") { if(this.props.workContext === "settings") {
workspaceContent = <SettingsEditor workspaceContent = <SettingsEditor
onReset={this.props.onReset} onReset={this.props.onReset}
onStyleChanged={this.props.onStyleChanged} onStyleChanged={this.props.onStyleChanged}
mapStyle={this.props.mapStyle} mapStyle={this.props.mapStyle}
accessToken={this.props.accessToken} accessToken={this.props.accessToken}
onAccessTokenChanged={this.props.onAccessTokenChanged} onAccessTokenChanged={this.props.onAccessTokenChanged}
/> />
} }
if(this.props.workContext === "about") { if(this.props.workContext === "about") {
workspaceContent = <About /> workspaceContent = <About />
} }
return <div style={{ return <div style={{
...fullHeight, ...fullHeight,
zIndex: 100, top: 50,
left: 60, left: 0,
width: 300, zIndex: 100,
overflow: "hidden", width: 300,
backgroundColor: colors.gray} overflow: "hidden",
}> backgroundColor: colors.gray}
{workspaceContent} }>
</div> {workspaceContent}
} </div>
}
} }