Skip to content

Commit 8fda375

Browse files
justenPalmerjustenPalmer
committed
separated layer and editleft and right col scrolling in panel, made logo, added layer numbers to sources, closes #27 
1 parent 22e24ff commit 8fda375

File tree

22 files changed

+314
-59
lines changed

22 files changed

+314
-59
lines changed

‎public/favicon.ico‎

-2.66 KB
Binary file not shown.

‎public/img/icon copy 3.png‎

5 KB
Loading

‎public/img/icon copy 4.png‎

3.83 KB
Loading

‎public/img/icon.png‎

3.81 KB
Loading

‎src/App.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ label .badge{position:relative;top:2px;}
2222
.badge-secondary{background-color:#273237;}
2323

2424
.bg-dk{background-color:#273237;}
25+
.bg-blue{background-color:#00ACC1;}
2526

2627
.border-gray{border:1px solid #273237;}
2728

@@ -144,6 +145,7 @@ label .badge{position:relative;top:2px;}
144145
.md-muted{opacity:0.2;}
145146

146147
.nav-link{border-bottom:3px solid transparent;cursor:pointer;position:relative;}
148+
.nav-item .active{}
147149
/*.nav-link.active{border-bottom:3px solid #FFF;}*/
148150

149151
.nav-link.nav-bb.active{border-bottom:3px solid #FFF;}

‎src/App.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React, {Component} from 'react';
2-
import Pstyles from './page/Pstyles';
3-
import Pstyle from './page/Pstyle';
2+
import {Provider} from 'react-redux';
43
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
54

6-
import './App.css';
7-
8-
import {Provider} from 'react-redux';
5+
import Phome from './page/Phome';
6+
import Pconfig from './page/Pconfig';
7+
import Pstyles from './page/Pstyles';
8+
import Pstyle from './page/Pstyle';
99

1010
import Store from './Store';
1111

12-
// npm install --save-dev josdejong/jsonlint
12+
import './App.css';
1313

1414
export default class App extends Component {
1515

@@ -18,9 +18,10 @@ export default class App extends Component {
1818
<Provider store={Store}>
1919
<Router>
2020
<Switch>
21-
<Route exact path="/" component={Pstyles}/>
21+
<Route exact path="/" component={Phome}/>
22+
<Route path="/config" component={Pconfig}/>
2223
<Route path="/style/:id" render={(props) => <Pstyle {...props} />}/>
23-
<Route path="/add" component={Pstyles}/>
24+
<Route path="/add" component={Phome}/>
2425
</Switch>
2526
</Router>
2627
</Provider>

‎src/page/Pconfig.jsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
3+
import {connect} from 'react-redux';
4+
5+
import Vnav from '../view/Vnav';
6+
import Vfield from '../view/Vfield';
7+
8+
import {NavLink, Link, Route, Switch} from 'react-router-dom';
9+
10+
11+
const mapStoreToProps = (store)=>{
12+
return {
13+
styles:store.styles
14+
} // props
15+
};
16+
const mapDispatchToProps = {};
17+
18+
class Pconfig extends React.Component {
19+
constructor(props) {
20+
super(props);
21+
this.state = {};
22+
23+
//styles.do();
24+
this.id = props.match.params.id;
25+
26+
this.handle = {
27+
route:(path)=>{
28+
this.props.history.push('/'+path);
29+
},
30+
routeReplace:(path)=>{
31+
this.props.history.replace('/'+path);
32+
},
33+
goBack:()=>{
34+
this.props.history.goBack();
35+
}
36+
};
37+
38+
for (let i in this.handle){
39+
this.handle[i] = this.handle[i].bind(this);
40+
}
41+
}
42+
43+
render (){
44+
const {styles, match} = this.props;
45+
// buil;d ary from obj
46+
47+
48+
return <div>
49+
<Vnav/>
50+
<div className="container mt-4">
51+
<h2 className="px-2 py-2 m-0 text-light">Config</h2>
52+
53+
<ul className="nav nav-tabs">
54+
<li className="nav-item">
55+
<NavLink className="nav-link" to="/config/mapbox">Mapbox</NavLink>
56+
</li>
57+
<li className="nav-item">
58+
<NavLink className="nav-link" to="/add/upload">Upload</NavLink>
59+
</li>
60+
<li className="nav-item">
61+
<NavLink className="nav-link" to="/add/fromSource">From Source</NavLink>
62+
</li>
63+
</ul>
64+
<div className="p-3 bg-white position-relative">
65+
66+
</div>
67+
</div>
68+
</div>
69+
}
70+
};
71+
72+
export default connect(
73+
mapStoreToProps,
74+
mapDispatchToProps
75+
)(Pconfig);

‎src/page/Phome.jsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
3+
import {connect} from 'react-redux';
4+
5+
import Mstyle from '../model/Mstyle';
6+
7+
import Vnav from '../view/Vnav';
8+
import VstyleAdd from '../view/Vstyles/VstyleAdd';
9+
import Vstyles from '../view/Vstyles';
10+
11+
import {NavLink, Link, Route, Switch} from 'react-router-dom';
12+
13+
14+
const mapStoreToProps = (store)=>{
15+
return {
16+
styles:store.styles
17+
} // props
18+
};
19+
const mapDispatchToProps = {};
20+
21+
class Phome extends React.Component {
22+
constructor(props) {
23+
super(props);
24+
this.state = {};
25+
26+
//styles.do();
27+
this.id = props.match.params.id;
28+
29+
Mstyle.loadAll();
30+
31+
this.handle = {
32+
route:(path)=>{
33+
this.props.history.push('/'+path);
34+
},
35+
routeReplace:(path)=>{
36+
this.props.history.replace('/'+path);
37+
},
38+
goBack:()=>{
39+
this.props.history.goBack();
40+
}
41+
};
42+
43+
for (let i in this.handle){
44+
this.handle[i] = this.handle[i].bind(this);
45+
}
46+
}
47+
48+
render (){
49+
const {styles, match} = this.props;
50+
// build ary from obj
51+
52+
53+
54+
if (styles.get('loaded') !== true) {
55+
return <div>loading</div>
56+
}
57+
58+
//order styles by last updated
59+
const recs = styles.get('recs').sort((a,b)=>{
60+
if (a.getIn(['_store','updated']) > b.getIn(['_store','updated'])) return -1;
61+
return 1;
62+
});
63+
64+
console.log('sorted recs:',recs);
65+
66+
67+
return <div>
68+
<Vnav/>
69+
<div className="jumbotron jumbotron-fluid bg-blue mb-0">
70+
<div className="container text-light">
71+
<h1 className="display-4">fresco</h1>
72+
<p className="lead">An open source map style editor - born from Maputnik.</p>
73+
</div>
74+
</div>
75+
<div className="container">
76+
77+
<div className="py-4">
78+
<h2 className="px-2 py-2 m-0 text-light">Styles ({recs.size}) <Link to="/add/new"><i className="material-icons md-18">add_circle_outline</i></Link></h2>
79+
<Switch>
80+
<Route path="/add"
81+
render={(props) => <VstyleAdd handle={this.handle} {...props}/>}/>
82+
</Switch>
83+
<Vstyles styles={recs} handle={this.handle} match={match}/>
84+
</div>
85+
</div>
86+
</div>
87+
}
88+
};
89+
90+
export default connect(
91+
mapStoreToProps,
92+
mapDispatchToProps
93+
)(Phome);

‎src/page/Pstyles.jsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@ import {connect} from 'react-redux';
44

55
import Mstyle from '../model/Mstyle';
66

7+
import Vnav from '../view/Vnav';
8+
import VstyleAdd from '../view/Vstyles/VstyleAdd';
79
import Vstyles from '../view/Vstyles';
810

11+
import {NavLink, Link, Route, Switch} from 'react-router-dom';
12+
913

1014
const mapStoreToProps = (store)=>{
1115
return {
@@ -48,8 +52,18 @@ class Pstyles extends React.Component {
4852
if (styles.get('loaded') !== true) {
4953
return <div>loading</div>
5054
}
55+
56+
5157
return <div>
52-
<Vstyles styles={styles.get('recs')} handle={this.handle} match={match}/>
58+
<Vnav/>
59+
<div className="container mt-4">
60+
<h2 className="px-2 py-2 m-0 text-light">Styles ({styles.size}) <Link to="/add/new"><i className="material-icons md-18">add_circle_outline</i></Link></h2>
61+
<Switch>
62+
<Route path="/add"
63+
render={(props) => <VstyleAdd handle={this.handle} {...props}/>}/>
64+
</Switch>
65+
<Vstyles styles={styles.get('recs')} handle={this.handle} match={match}/>
66+
</div>
5367
</div>
5468
}
5569
};

‎src/view/Vcode/index.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export default class Vsources extends React.Component {
2323

2424
const errors = Mstyle.errorsGet();
2525

26+
const maxContentH = window.innerHeight - 44;
27+
2628
console.log('code render errs:',errors);
2729

2830
const field = {
@@ -31,7 +33,7 @@ export default class Vsources extends React.Component {
3133
type:'JSON'
3234
};
3335

34-
return <div className="row h-100 m-0">
36+
return <div className="row h-100 m-0 o-y-scroll" style={{maxHeight:maxContentH+'px'}}>
3537
<div className="col-sm-12 p-0">
3638
<Vfield field={field} handle={this.handle}/>
3739
</div>

0 commit comments

Comments
 (0)