ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-01-07 05:50:01 +00:00
Code Issues Projects Releases Wiki Activity

Move style code to CSS

Browse Source
This commit is contained in:
Lukas Martinelli
2017-01-10 21:28:30 +01:00
parent 2426117233
commit 4a75b0381b
29 changed files with 318 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/AppLayout.jsx
View File

@@ -25,51 +25,20 @@ class AppLayout extends React.Component {
}
render() {
return <div style={{
fontFamily: theme.fontFamily,
color: theme.color,
fontWeight: 300
}}>
return <div className="maputnik-layout">
{this.props.toolbar}
<div style={{
position: 'fixed',
bottom: 0,
height: "100%",
top: 40,
left: 0,
zIndex: 1,
width: 200,
overflow: "hidden",
backgroundColor: colors.black
}}>
<div className="maputnik-layout-list">
<ScrollContainer>
{this.props.layerList}
</ScrollContainer>
</div>
<div style={{
position: 'fixed',
bottom: 0,
height: "100%",
top: 40,
left: 200,
zIndex: 1,
width: 350,
backgroundColor: colors.black
}}>
<div className="maputnik-layout-drawer">
<ScrollContainer>
{this.props.layerEditor}
</ScrollContainer>
</div>
{this.props.map}
{this.props.bottom && <div style={{
position: 'fixed',
height: 50,
bottom: 0,
left: 550,
zIndex: 1,
width: '100%',
backgroundColor: colors.black
}}>
{this.props.bottom && <div className="maputnik-layout-bottom">
{this.props.bottom}
</div>
}

13
src/components/Button.jsx
View File

@@ -11,17 +11,8 @@ class Button extends React.Component {
render() {
return <a
onClick={this.props.onClick}
style={{
cursor: 'pointer',
backgroundColor: colors.midgray,
color: colors.lowgray,
fontSize: fontSizes[5],
padding: margins[1],
userSelect: 'none',
borderRadius: 2,
boxSizing: 'border-box',
...this.props.style,
}}>
className="maputnik-button"
style={this.props.style}>
{this.props.children}
</a>
}

10
src/components/ScrollContainer.jsx
View File

@@ -1,15 +1,7 @@
import React from 'react'
const ScrollContainer = (props) => {
return <div style={{
overflowX: "visible",
overflowY: "scroll",
bottom:0,
left:0,
right:0,
top:1,
position: "absolute",
}}>
return <div className="maputnik-scroll-container">
{props.children}
</div>
}

34
src/components/Toolbar.jsx
View File

@@ -30,22 +30,14 @@ const IconText = props => <span style={{ paddingLeft: margins[0] }}>
{props.children}
</span>
const actionStyle = {
display: "inline-block",
padding: 10,
fontSize: fontSizes[4],
cursor: "pointer",
color: colors.white,
textDecoration: 'none',
}
const ToolbarLink = props => <a
className='maputnik-toolbar-link'
href={props.href}
target={"blank"}
style={{
...actionStyle,
...props.style,
}}>
}}
>
{props.children}
</a>
@@ -54,20 +46,12 @@ class ToolbarAction extends React.Component {
onClick: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.state = { hover: false }
}
render() {
return <a
className='maputnik-toolbar-action'
onClick={this.props.onClick}
onMouseOver={e => this.setState({hover: true})}
onMouseOut={e => this.setState({hover: false})}
style={{
...actionStyle,
...this.props.style,
backgroundColor: this.state.hover ? colors.gray : null,
}}>
{this.props.children}
</a>
@@ -116,15 +100,7 @@ export default class Toolbar extends React.Component {
}
render() {
return <div style={{
position: "fixed",
height: 40,
width: '100%',
zIndex: 100,
left: 0,
top: 0,
backgroundColor: colors.black
}}>
return <div className='maputnik-toolbar'>
<SettingsModal
mapStyle={this.props.mapStyle}
onStyleChanged={this.props.onStyleChanged}

17
src/components/fields/ColorField.jsx
View File

@@ -58,9 +58,10 @@ class ColorField extends React.Component {
render() {
const offset = this.calcPickerOffset()
const picker = <div
className="maputnik-color-picker-offset"
style={{
position: 'fixed',
zIndex: 1,
position: 'fixed',
zIndex: 1,
left: offset.left,
top: offset.top,
}}>
@@ -69,6 +70,7 @@ class ColorField extends React.Component {
onChange={c => this.props.onChange(formatColor(c))}
/>
<div
className="maputnik-color-picker-offset"
onClick={this.togglePicker.bind(this)}
style={{
zIndex: -1,
@@ -81,18 +83,13 @@ class ColorField extends React.Component {
/>
</div>
return <div style={{
position: 'relative',
display: 'inline',
}}>
return <div className="maputnik-color-wrapper">
{this.state.pickerOpened && picker}
<input
className="maputnik-color"
ref="colorInput"
onClick={this.togglePicker.bind(this)}
style={{
...input.input,
...this.props.style
}}
style={this.props.style}
name={this.props.name}
placeholder={this.props.default}
value={this.props.value ? this.props.value : ""}

11
src/components/fields/DocLabel.jsx
View File

@@ -22,15 +22,14 @@ export default class DocLabel extends React.Component {
render() {
return <label
style={{
...input.label,
position: 'relative',
verticalAlign: 'top',
...this.props.style,
...this.props.style
}}
className="maputnik-doc-wrapper"
>
<span
onMouseOver={e => this.setState({showDoc: true})}
onMouseOut={e => this.setState({showDoc: false})}
className="maputnik-doc-target"
style={{
cursor: 'help',
...this.props.cursorTargetStyle,
@@ -48,7 +47,9 @@ export default class DocLabel extends React.Component {
width: 120,
display: this.state.showDoc ? null : 'none',
zIndex: 3,
}}>
}}
className="maputnik-doc-popup"
>
{this.props.doc}
</div>
</label>

2
src/components/fields/PropertyGroup.jsx
View File

@@ -66,7 +66,7 @@ export default class PropertyGroup extends React.Component {
/>
})
return <div>
return <div className="maputnik-property-group">
{fields}
</div>
}

7
src/components/fields/ZoomSpecField.jsx
View File

@@ -105,6 +105,7 @@ export default class ZoomSpecField extends React.Component {
if(idx === 1) {
label = <label style={{...input.label, width: '41%'}}>
<Button
className="maputnik-add-stop"
style={{fontSize: fontSizes[5]}}
onClick={this.addStop.bind(this)}
>
@@ -123,6 +124,7 @@ export default class ZoomSpecField extends React.Component {
}}>
{label}
<Button
className="maputnik-delete-stop"
style={{backgroundColor: null, verticalAlign: 'top'}}
onClick={this.deleteStop.bind(this, idx)}
>
@@ -160,7 +162,9 @@ export default class ZoomSpecField extends React.Component {
}
return <div style={input.property}>
return <div style={input.property}
className="maputnik-zoom-spec-field"
>
<DocLabel
label={labelFromFieldName(this.props.fieldName)}
doc={this.props.fieldSpec.doc}
@@ -170,6 +174,7 @@ export default class ZoomSpecField extends React.Component {
/>
{this.props.fieldSpec['zoom-function'] &&
<Button
className="maputnik-make-zoom-function"
style={{
verticalAlign: 'top',
backgroundColor: null,

4
src/components/filter/FilterEditor.jsx
View File

@@ -95,7 +95,7 @@ export default class CombiningFilterEditor extends React.Component {
}
return <div>
<div style={{ marginBottom: margins[1] }}>
<div className="maputnik-filter-editor-compound-select" style={{ marginBottom: margins[1] }}>
<DocLabel
label={"Compound Filter"}
doc={GlSpec.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
@@ -115,7 +115,7 @@ export default class CombiningFilterEditor extends React.Component {
/>
</div>
{editorBlocks}
<div style={{marginTop: margins[1]}}>
<div className="maputnik-filter-editor-add-wrapper" style={{marginTop: margins[1]}}>
<Button onClick={this.addFilterItem.bind(this)} style={{
display: 'inline-block',
marginLeft: '79%',

6
src/components/filter/FilterEditorBlock.jsx
View File

@@ -9,8 +9,8 @@ class FilterEditorBlock extends React.Component {
}
render() {
return <div>
<div style={{display: 'inline-block', width: '8%'}}>
return <div className="maputnik-filter-editor-block">
<div className="maputnik-filter-editor-block-action" style={{display: 'inline-block', width: '8%'}}>
<Button
style={{backgroundColor: null}}
onClick={this.props.onDelete}
@@ -18,7 +18,7 @@ class FilterEditorBlock extends React.Component {
<DeleteIcon />
</Button>
</div>
<div style={{display: 'inline-block', width: '92%'}}>
<div className="maputnik-filter-editor-block-content" style={{display: 'inline-block', width: '92%'}}>
{this.props.children}
</div>
</div>

48
src/components/filter/SingleFilterEditor.jsx
View File

@@ -29,36 +29,32 @@ class SingleFilterEditor extends React.Component {
const propertyName = f[1]
const filterArgs = f.slice(2)
return <div style={{
return <div className="maputnik-filter-editor-single"
style={{
marginTop: margins[1],
marginBottom: margins[1],
...this.props.style
}}>
<AutocompleteInput
wrapperStyle={{
width: '22%'
}}
value={propertyName}
options={Object.keys(this.props.properties).map(propName => [propName, propName])}
onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
/>
<SelectInput
style={{
width: '19%',
marginLeft: '2%'
}}
value={filterOp}
onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
options={otherFilterOps}
/>
<StringInput
style={{
width: '54%',
marginLeft: '2%'
}}
value={filterArgs.join(',')}
onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
/>
<div className="maputnik-filter-editor-property">
<AutocompleteInput
value={propertyName}
options={Object.keys(this.props.properties).map(propName => [propName, propName])}
onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
/>
</div>
<div className="maputnik-filter-editor-operator">
<SelectInput
value={filterOp}
onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
options={otherFilterOps}
/>
</div>
<div className="maputnik-filter-editor-args">
<StringInput
value={filterArgs.join(',')}
onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
/>
</div>
</div>
}

3
src/components/inputs/ArrayInput.jsx
View File

@@ -50,7 +50,8 @@ class ArrayInput extends React.Component {
}
})
return <div style={{display: 'inline-block', width: '50%'}}>
return <div className="maputnik-array"
style={{display: 'inline-block', width: '50%'}}>
{inputs}
</div>
}

1
src/components/inputs/AutocompleteInput.jsx
View File

@@ -20,6 +20,7 @@ class AutocompleteInput extends React.Component {
render() {
return <Autocomplete
className="maputnik-autocomplete"
menuStyle={{
border: 'none',
padding: '2px 0',

1
src/components/inputs/CheckboxInput.jsx
View File

@@ -51,6 +51,7 @@ class CheckboxInput extends React.Component {
return <label style={styles.root}>
<input
className="maputnik-checkbox"
type="checkbox"
style={{
...styles.input,

4
src/components/inputs/InputBlock.jsx
View File

@@ -32,7 +32,9 @@ class InputBlock extends React.Component {
return <div style={{
...input.property,
...this.props.style,
}}>
}}
className="maputnik-input-block"
>
{this.props.doc &&
<DocLabel
label={this.props.label}

4
src/components/inputs/MultiButtonInput.jsx
View File

@@ -37,7 +37,9 @@ class MultiButtonInput extends React.Component {
return <div style={{
display: 'inline-block',
...this.props.style,
}}>
}}
className="maputnik-multibutton"
>
{buttons}
</div>
}

2
src/components/inputs/NumberInput.jsx
View File

@@ -68,8 +68,8 @@ class NumberInput extends React.Component {
render() {
return <input
className="maputnik-number"
style={{
...input.input,
...this.props.style
}}
placeholder={this.props.default}

1
src/components/inputs/SelectInput.jsx
View File

@@ -17,6 +17,7 @@ class SelectInput extends React.Component {
}
return <select
className="maputnik-select"
style={{
...input.select,
...this.props.style

1
src/components/inputs/StringInput.jsx
View File

@@ -22,6 +22,7 @@ class StringInput extends React.Component {
render() {
return <input
className="maputnik-string"
style={{
...input.input,
...this.props.style

3
src/components/layers/LayerEditor.jsx
View File

@@ -172,7 +172,8 @@ export default class LayerEditor extends React.Component {
</LayerEditorGroup>
})
return <div>
return <div className="maputnik-layer-editor"
>
{groups}
</div>
}

13
src/components/layers/LayerEditorGroup.jsx
View File

@@ -36,18 +36,7 @@ export default class LayerEditorGroup extends React.Component {
render() {
return <div>
<div style={{
fontWeight: 'bold',
fontSize: fontSizes[4],
backgroundColor: this.state.hover ? Color(colors.black).lighten(0.30).string() : Color(colors.black).lighten(0.15).string(),
color: colors.lowgray,
cursor: 'pointer',
userSelect: 'none',
padding: margins[1],
display: 'flex',
flexDirection: 'row',
lineHeight: '20px',
}}
<div className="maputnik-layer-editor-group"
onMouseOver={e => this.setState({hover: true})}
onMouseOut={e => this.setState({hover: false})}
onClick={e => this.props.onActiveToggle(!this.props.isActive)}

6
src/components/layers/LayerList.jsx
View File

@@ -69,11 +69,7 @@ class LayerListContainer extends React.Component {
onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
/>
})
return <ul style={{
padding: 0,
margin: 0,
paddingBottom: margins[4]
}}>
return <ul className="maputnik-layer-list-container">
{layerPanels}
</ul>
}

40
src/components/layers/LayerListItem.jsx
View File

@@ -66,11 +66,8 @@ class IconAction extends React.Component {
render() {
return <a
style={{
display: "inline",
marginLeft: margins[0],
...this.props.style
}}
className="maputnik-icon-action"
style={this.props.style}
onClick={this.props.onClick}
onMouseOver={e => this.setState({hover: true})}
onMouseOut={e => this.setState({hover: false})}
@@ -121,25 +118,7 @@ class LayerListItem extends React.Component {
render() {
const itemStyle = {
fontWeight: 400,
color: this.props.isSelected ? colors.white : colors.lowgray,
fontSize: fontSizes[5],
borderLeft: 0,
borderTop: 0,
borderBottom: 1,
borderRight: 0,
borderStyle: "solid",
userSelect: 'none',
listStyle: 'none',
zIndex: 2000,
cursor: 'pointer',
position: 'relative',
padding: margins[1],
paddingLeft: margins[2],
paddingRight: margins[2],
borderColor: Color(colors.black).lighten(0.10).string(),
backgroundColor: colors.black,
lineHeight: 1.3,
}
if(this.state.hover) {
@@ -159,18 +138,10 @@ class LayerListItem extends React.Component {
onClick={e => this.props.onLayerSelect(this.props.layerId)}
onMouseOver={e => this.setState({hover: true})}
onMouseOut={e => this.setState({hover: false})}
style={itemStyle}>
<div style={{
display: 'flex',
flexDirection: 'row'
}}>
className="maputnik-layer-list-item"
>
<LayerTypeDragHandle type={this.props.layerType} />
<span style={{
width: 115,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}>{this.props.layerId}</span>
<span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
<span style={{flexGrow: 1}} />
<IconAction {...iconProps}
action={'delete'}
@@ -185,7 +156,6 @@ class LayerListItem extends React.Component {
action={this.props.visibility === 'visible' ? 'hide' : 'show'}
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/>
</div>
</li>
}
}

12
src/components/map/MapboxGlMap.jsx
View File

@@ -142,16 +142,8 @@ export default class MapboxGlMap extends React.Component {
render() {
return <div
className="maputnik-map"
ref={x => this.container = x}
style={{
position: "fixed",
top: 0,
right: 0,
bottom: 0,
height: "100%",
width: "75%",
...this.props.style,
}}>
</div>
></div>
}
}

25
src/components/modals/Modal.jsx
View File

@@ -15,32 +15,17 @@ class Modal extends React.Component {
render() {
return <Overlay isOpen={this.props.isOpen}>
<div style={{
minWidth: 350,
maxWidth: 600,
backgroundColor: colors.black,
boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.3)',
}}>
<div style={{
backgroundColor: colors.gray,
display: 'flex',
flexDirection: 'row',
padding: margins[2],
fontSize: fontSizes[4],
}}>
{this.props.title}
<div className="maputnik-modal">
<div className="maputnik-modal-header">
<span className="maputnik-modal-header-title">{this.props.title}</span>
<span style={{flexGrow: 1}} />
<a
<a className="maputnik-modal-header-toggle"
onClick={() => this.props.onOpenToggle(false)}
style={{ cursor: 'pointer' }} >
<CloseIcon />
</a>
</div>
<div style={{
padding: margins[2],
}}>
{this.props.children}
</div>
<div className="maputnik-modal-content">{this.props.children}</div>
</div>
</Overlay>
}

5
src/components/modals/SourcesModal.jsx
View File

@@ -27,7 +27,7 @@ class PublicSource extends React.Component {
}
render() {
return <div style={{
return <div className="maputnik-public-source" style={{
verticalAlign: 'top',
marginTop: margins[2],
marginRight: margins[2],
@@ -83,7 +83,8 @@ class ActiveSourceTypeEditor extends React.Component {
const inputProps = { }
return <div style={{
}}>
<div style={{
<div className="maputnik-active-source-type-editor"
style={{
backgroundColor: colors.gray,
color: colors.lowgray,
padding: margins[1],