From 0e65ac8937b4d8cc1119d7658f07cc9fbb3924e3 Mon Sep 17 00:00:00 2001 From: lukasmartinelli Date: Sat, 10 Sep 2016 15:15:17 +0200 Subject: [PATCH] Switch over to tabs --- src/app.jsx | 20 +++++++++---------- src/layers.jsx | 0 src/layers/background.jsx | 6 +++--- src/layers/editor.jsx | 22 ++++++++++---------- src/layers/list.jsx | 4 ++-- src/map.jsx | 16 +++++++-------- src/settings.jsx | 6 +++--- src/theme.js | 42 +++++++++++++++++++-------------------- src/toolbar.jsx | 35 ++++++++++++++++++-------------- src/workspace.jsx | 4 ++-- 10 files changed, 80 insertions(+), 75 deletions(-) delete mode 100644 src/layers.jsx diff --git a/src/app.jsx b/src/app.jsx index 3ad138c..6884834 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -12,10 +12,10 @@ import theme from './theme.js' import layout from './layout.scss' export default class App extends React.Component { - static childContextTypes = { - rebass: React.PropTypes.object, + static childContextTypes = { + rebass: React.PropTypes.object, reactIconBase: React.PropTypes.object - } + } constructor(props) { super(props) @@ -26,8 +26,8 @@ export default class App extends React.Component { } } - getChildContext() { - return { + getChildContext() { + return { rebass: theme, reactIconBase: { size: 20 } } @@ -35,7 +35,7 @@ export default class App extends React.Component { onStyleDownload() { this.styleStore.save(newStyle) - const mapStyle = JSON.stringify(this.state.currentStyle.toJS(), null, 4) + const mapStyle = JSON.stringify(this.state.currentStyle.toJS(), null, 4) const blob = new Blob([mapStyle], {type: "application/json;charset=utf-8"}); saveAs(blob, mapStyle.id + ".json"); } @@ -56,15 +56,15 @@ export default class App extends React.Component { } onOpenSettings() { - this.setState({ workContext: "settings", }) + this.setState({ workContext: "settings" }) } onOpenLayers() { this.setState({ workContext: "layers", }) } - render() { - return
+ render() { + return
0} onStyleSave={this.onStyleSave.bind(this)} @@ -82,5 +82,5 @@ export default class App extends React.Component {
- } + } } diff --git a/src/layers.jsx b/src/layers.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/layers/background.jsx b/src/layers/background.jsx index 3cd9761..4ef5b39 100644 --- a/src/layers/background.jsx +++ b/src/layers/background.jsx @@ -3,9 +3,9 @@ import { Input } from 'rebass' export default class BackgroundLayer extends React.Component { static propTypes = { - layer: React.PropTypes.object.isRequired, - onPaintChanged: React.PropTypes.func.isRequired - } + layer: React.PropTypes.object.isRequired, + onPaintChanged: React.PropTypes.func.isRequired + } onPaintChanged(property, e) { let value = e.target.value diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx index a0f43d3..9a4f27c 100644 --- a/src/layers/editor.jsx +++ b/src/layers/editor.jsx @@ -20,14 +20,14 @@ class UnsupportedLayer extends React.Component { /** Layer editor supporting multiple types of layers. */ export class LayerEditor extends React.Component { static propTypes = { - layer: React.PropTypes.object.isRequired, - onLayerChanged: React.PropTypes.func.isRequired, - onLayerDestroyed: React.PropTypes.func.isRequired, - } + layer: React.PropTypes.object.isRequired, + onLayerChanged: React.PropTypes.func.isRequired, + onLayerDestroyed: React.PropTypes.func.isRequired, + } - static childContextTypes = { + static childContextTypes = { reactIconBase: React.PropTypes.object - } + } constructor(props) { super(props); @@ -36,12 +36,12 @@ export class LayerEditor extends React.Component { } } - getChildContext () { - return { + getChildContext () { + return { reactIconBase: { - size: theme.fontSizes[4], + size: theme.fontSizes[4], color: theme.colors.lowgray, - } + } } } @@ -115,7 +115,7 @@ export class LayerEditor extends React.Component { - {visibleIcon} + {visibleIcon} this.props.onLayerDestroyed(this.props.layer)}> diff --git a/src/layers/list.jsx b/src/layers/list.jsx index 56e4eeb..6daf7ab 100644 --- a/src/layers/list.jsx +++ b/src/layers/list.jsx @@ -8,8 +8,8 @@ import scrollbars from '../scrollbars.scss' export class LayerList extends React.Component { static propTypes = { layers: React.PropTypes.instanceOf(Immutable.List), - onLayersChanged: React.PropTypes.func.isRequired - } + onLayersChanged: React.PropTypes.func.isRequired + } constructor(props) { super(props) diff --git a/src/map.jsx b/src/map.jsx index e3dcbfe..77c8bad 100644 --- a/src/map.jsx +++ b/src/map.jsx @@ -6,8 +6,8 @@ import Immutable from 'immutable' export class Map extends React.Component { static propTypes = { - mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired, - } + mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired, + } componentWillReceiveProps(nextProps) { // If the id has changed a new style has been uplaoded and @@ -31,9 +31,9 @@ export class Map extends React.Component { } } - shouldComponentUpdate(nextProps, nextState) { - return nextProps.mapStyle !== this.props.mapStyle - } + shouldComponentUpdate(nextProps, nextState) { + return nextProps.mapStyle !== this.props.mapStyle + } componentDidMount() { //TODO: Read MapboxGL token from settings @@ -44,9 +44,9 @@ export class Map extends React.Component { style: this.props.mapStyle.toJS(), }); - map.on("style.load", (...args) => { - this.setState({ map }); - }); + map.on("style.load", (...args) => { + this.setState({ map }); + }); } render() { diff --git a/src/settings.jsx b/src/settings.jsx index c1d6ab2..464dcdb 100644 --- a/src/settings.jsx +++ b/src/settings.jsx @@ -6,9 +6,9 @@ import Immutable from 'immutable' /** Edit global settings within a style such as the name */ export class SettingsEditor extends React.Component { static propTypes = { - mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired, - onStyleChanged: React.PropTypes.func.isRequired - } + mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired, + onStyleChanged: React.PropTypes.func.isRequired + } onChange(property, e) { const changedStyle = this.props.mapStyle.set(property, e.target.value) diff --git a/src/theme.js b/src/theme.js index 4fb5c78..16453f7 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,6 +1,6 @@ const caps = { - textTransform: 'uppercase', - letterSpacing: '.2em' + textTransform: 'uppercase', + letterSpacing: '.2em' } const baseColors = { @@ -34,22 +34,22 @@ const scale = [3, 5, 10, 30, 40] const fontSizes = [28, 24, 20, 16, 14, 12, 10] const border = { - borderColor: colors.black, - borderRadius: 0, + borderColor: colors.black, + borderRadius: 0, } const dark = { - name: 'Dark', - color: colors.white, + name: 'Dark', + color: colors.white, fontFamily: 'Roboto, sans-serif', - scale, + scale, fontSizes, - colors, - inverted: colors.midGray, + colors, + inverted: colors.midGray, ...border, Block: { - backgroundColor: colors.gray, + backgroundColor: colors.gray, ...border, borderLeft: 0, borderRight: 0, @@ -63,17 +63,17 @@ const dark = { fontWeight: 400, color: colors.white, }, - Button: { - color: '#00d9f7', - }, - Menu: { - color: '#00d9f7', - backgroundColor: '#000' - }, - Message: { - color: '#111', - opacity: 15/16 - }, + Button: { + color: '#00d9f7', + }, + Menu: { + color: '#00d9f7', + backgroundColor: '#000' + }, + Message: { + color: '#111', + opacity: 15/16 + }, Header: { fontWeight: 400, }, diff --git a/src/toolbar.jsx b/src/toolbar.jsx index 1e3ba41..81f9912 100644 --- a/src/toolbar.jsx +++ b/src/toolbar.jsx @@ -14,25 +14,30 @@ import theme from './theme.js'; export class Toolbar extends React.Component { static propTypes = { - onStyleUpload: React.PropTypes.func.isRequired, - onStyleDownload: React.PropTypes.func.isRequired, - onStyleSave: React.PropTypes.func, - onOpenSettings: React.PropTypes.func, - onOpenLayers: React.PropTypes.func, + // A new style has been uploaded + onStyleUpload: React.PropTypes.func.isRequired, + // Current style is requested for download + onStyleDownload: React.PropTypes.func.isRequired, + // Style is explicitely saved to local cache + onStyleSave: React.PropTypes.func, + // Open settings drawer + onOpenSettings: React.PropTypes.func, + // Open layers drawer + onOpenLayers: React.PropTypes.func, // Whether a style is available for download or saving // A style with no layers should not be available - styleAvailable: React.PropTypes.bool, - } + styleAvailable: React.PropTypes.bool, + } onUpload(_, files) { const [e, file] = files[0]; const reader = new FileReader(); - reader.readAsText(file, "UTF-8"); - reader.onload = e => { + reader.readAsText(file, "UTF-8"); + reader.onload = e => { const style = JSON.parse(e.target.result); this.props.onStyleUpload(style); } - reader.onerror = e => console.log(e.target); + reader.onerror = e => console.log(e.target); } saveButton() { @@ -72,13 +77,13 @@ export class Toolbar extends React.Component { backgroundColor: theme.colors.black } }> - + - + {this.downloadButton()} {this.saveButton()} @@ -86,14 +91,14 @@ export class Toolbar extends React.Component { diff --git a/src/workspace.jsx b/src/workspace.jsx index 2a5350d..1f9904e 100644 --- a/src/workspace.jsx +++ b/src/workspace.jsx @@ -9,8 +9,8 @@ export class WorkspaceDrawer extends React.Component { static propTypes = { mapStyle: React.PropTypes.object.isRequired, onStyleChanged: React.PropTypes.func.isRequired, - workContext: React.PropTypes.oneOf(['layers', 'settings']).isRequired, - } + workContext: React.PropTypes.oneOf(['layers', 'settings']).isRequired, + } onLayersChanged(changedLayers) { const changedStyle = this.props.mapStyle.set('layers', changedLayers)