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

Remove collapse and add tabs

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-19 15:40:11 +01:00
parent 4028c660fc
commit a52a548e51
3 changed files with 44 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -30,14 +30,13 @@
"randomcolor": "^0.4.4", "randomcolor": "^0.4.4",
"react": "^15.4.0", "react": "^15.4.0",
"react-addons-pure-render-mixin": "^15.4.0", "react-addons-pure-render-mixin": "^15.4.0",
"react-collapse": "^2.3.3",
"react-color": "^2.10.0", "react-color": "^2.10.0",
"react-dom": "^15.4.0", "react-dom": "^15.4.0",
"react-file-reader-input": "^1.1.0", "react-file-reader-input": "^1.1.0",
"react-height": "^2.1.1", "react-height": "^2.1.1",
"react-icon-base": "^2.0.4", "react-icon-base": "^2.0.4",
"react-icons": "^2.2.1", "react-icons": "^2.2.1",
"react-motion": "^0.4.4", "react-simpletabs": "^0.7.0",
"react-sortable-hoc": "^0.4.5", "react-sortable-hoc": "^0.4.5",
"rebass": "^0.3.1", "rebass": "^0.3.1",
"request": "^2.79.0" "request": "^2.79.0"

20
src/index.css
View file

@ -18,3 +18,23 @@
color: rgb(142, 142, 142) !important; color: rgb(142, 142, 142) !important;
box-shadow: none !important; box-shadow: none !important;
} }
ul.tabs-menu {
list-style-type: none;
margin: 0;
padding: 0;
}
li.tabs-menu-item {
display: inline-block;
color: rgb(142, 142, 142);
font-size: 10px;
background-color: rgb(28, 31, 36);
padding: 5px;
margin-right: 3px;
}
li.tabs-menu-item:hover {
background-color: rgb(28, 31, 32);
cursor: pointer;
}

38
src/layers/editor.jsx
View file

@ -4,8 +4,8 @@ import Immutable from 'immutable'
import Toolbar from 'rebass/dist/Toolbar' import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem' import NavItem from 'rebass/dist/NavItem'
import Space from 'rebass/dist/Space' import Space from 'rebass/dist/Space'
import Tabs from 'react-simpletabs'
import Collapse from 'react-collapse'
import theme from '../theme.js' import theme from '../theme.js'
import FillLayer from './fill.jsx' import FillLayer from './fill.jsx'
import LineLayer from './line.jsx' import LineLayer from './line.jsx'
@ -14,6 +14,8 @@ import BackgroundLayer from './background.jsx'
import SourceEditor from './source.jsx' import SourceEditor from './source.jsx'
import FilterEditor from '../filter/editor.jsx' import FilterEditor from '../filter/editor.jsx'
import MdVisibility from 'react-icons/lib/md/visibility' import MdVisibility from 'react-icons/lib/md/visibility'
import MdVisibilityOff from 'react-icons/lib/md/visibility-off' import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
import MdDelete from 'react-icons/lib/md/delete' import MdDelete from 'react-icons/lib/md/delete'
@ -153,20 +155,26 @@ export class LayerEditor extends React.Component {
<MdDelete /> <MdDelete />
</NavItem> </NavItem>
</Toolbar> </Toolbar>
<FilterEditor <Tabs>
filter={this.props.layer.get('filter', Immutable.List()).toJSON()} <Tabs.Panel title='Paint'>
onChange={f => this.onFilterChanged(Immutable.fromJS(f))} <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
/> {this.layerFromType(this.props.layer.get('type'))}
{this.props.layer.get('type') !== 'background' && <SourceEditor </div>
source={this.props.layer.get('source')} </Tabs.Panel>
sourceLayer={this.props.layer.get('source-layer')} <Tabs.Panel title='Data'>
sources={this.props.sources} <FilterEditor
onSourceChange={console.log} filter={this.props.layer.get('filter', Immutable.List()).toJSON()}
onSourceLayerChange={console.log} onChange={f => this.onFilterChanged(Immutable.fromJS(f))}
/>} />
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}> {this.props.layer.get('type') !== 'background' && <SourceEditor
{this.layerFromType(this.props.layer.get('type'))} source={this.props.layer.get('source')}
</div> sourceLayer={this.props.layer.get('source-layer')}
sources={this.props.sources}
onSourceChange={console.log}
onSourceLayerChange={console.log}
/>}
</Tabs.Panel>
</Tabs>
</div> </div>
} }
} }