Skip to content

Commit 571fa87

Browse files
priley86priley86
committed
added pf-tabs and pf-alert
1 parent 33c1011 commit 571fa87

File tree

9 files changed

+236
-24
lines changed

9 files changed

+236
-24
lines changed

‎components/EmptyState/EmptyState.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ class EmptyState extends React.Component {
88
return (
99
<div className="row">
1010
<div className="col-md-12">
11-
1211
<div className="page-header">
1312
<h1>{ this.props.title }</h1>
1413
</div>
15-
1614
<div className="blank-slate-pf">
1715
<div className="blank-slate-pf-icon">
1816
<i className="fa fa-rocket"></i>

‎components/Forms/CreateProjectForm.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { PropTypes } from 'react';
2+
3+
class CreateProjectForm extends React.Component {
4+
state = {
5+
newProject: {}
6+
};
7+
8+
static propTypes = {
9+
handleSubmit: React.PropTypes.func
10+
};
11+
12+
handleSubmit = (event) => {
13+
this.props.handleSubmit(event);
14+
};
15+
16+
handleChange = (e, prop) => {
17+
let o = Object.assign({}, this.state.newProject);
18+
o[prop] = e.target.value;
19+
this.setState({newProject: o});
20+
};
21+
22+
render(){
23+
return (
24+
<form role="form">
25+
<div className="form-group">
26+
<label htmlFor="exampleInputName">Project Name</label>
27+
<input type="text" className="form-control" id="exampleInputName" value={this.state.newProject.name}
28+
onChange={(e) => { this.handleChange(e,'name')}}/>
29+
</div>
30+
<div className="form-group">
31+
<label htmlFor="exampleInputDescription">Project Description</label>
32+
<input type="text" className="form-control" id="exampleInputDescription" value={this.state.newProject.description}
33+
onChange={(e) => { this.handleChange(e,'description')}}/>
34+
</div>
35+
<div className="form-group">
36+
<label htmlFor="exampleInputFile">File input</label>
37+
<input type="file" id="exampleInputFile"/>
38+
<p className="help-block">Example block-level help text here.</p>
39+
</div>
40+
<div className="checkbox">
41+
<label>
42+
<input type="checkbox"/>Check me out
43+
</label>
44+
</div>
45+
<button type="submit" className="btn btn-default" onClick={this.handleSubmit}>Submit</button>
46+
</form>
47+
)
48+
}
49+
}
50+
export default CreateProjectForm;

‎components/Forms/CreateStageForm.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { PropTypes } from 'react';
2+
3+
class CreateStageForm extends React.Component {
4+
state = {
5+
newStage: {}
6+
};
7+
8+
static propTypes = {
9+
handleSubmit: React.PropTypes.func
10+
};
11+
12+
handleSubmit = (event) => {
13+
this.props.handleSubmit(event);
14+
};
15+
16+
handleChange = (e, prop) => {
17+
let o = Object.assign({}, this.state.newStage);
18+
o[prop] = e.target.value;
19+
this.setState({newStage: o});
20+
};
21+
22+
render(){
23+
return (
24+
<form role="form">
25+
<div className="form-group">
26+
<label htmlFor="exampleInputName">Stage Name</label>
27+
<input type="text" className="form-control" id="exampleInputName" value={this.state.newStage.name}
28+
onChange={(e) => { this.handleChange(e,'name')}}/>
29+
</div>
30+
<div className="form-group">
31+
<label htmlFor="exampleInputDescription">Stage Description</label>
32+
<input type="text" className="form-control" id="exampleInputDescription" value={this.state.newStage.description}
33+
onChange={(e) => { this.handleChange(e,'description')}}/>
34+
</div>
35+
<div className="form-group">
36+
<label htmlFor="exampleInputFile">File input</label>
37+
<input type="file" id="exampleInputFile"/>
38+
<p className="help-block">Example block-level help text here.</p>
39+
</div>
40+
<div className="checkbox">
41+
<label>
42+
<input type="checkbox"/>Check me out
43+
</label>
44+
</div>
45+
<button type="submit" className="btn btn-default" onClick={this.handleSubmit}>Submit</button>
46+
</form>
47+
)
48+
}
49+
}
50+
export default CreateStageForm;

‎pages/apps/index.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,18 @@ class AppsPage extends React.Component {
2727
render() {
2828
return (
2929
<Layout className="container-fluid container-pf-nav-pf-vertical">
30-
<AppListView apps={ this.state.apps }/>
30+
<div className="row">
31+
<div className="col-md-12">
32+
<div className="page-header">
33+
<h1>Apps</h1>
34+
</div>
35+
</div>
36+
</div>
37+
<div className="row">
38+
<div className="col-md-12">
39+
<AppListView apps={ this.state.apps }/>
40+
</div>
41+
</div>
3142
</Layout>
3243
);
3344
}

‎pages/environments/index.js

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { PropTypes } from 'react';
2-
import PfAlert from 'patternfly-webcomponents/dist/es2015/pf-alert/index.js'
3-
// import { PfAlert } from 'patternfly-webcomponents';
2+
import Layout from '../../components/Layout';
3+
import WizardView from '../../components/Wizard/WizardView';
4+
import c from '../common.css';
45

56
class EnvironmentsPage extends React.Component {
67

@@ -10,14 +11,43 @@ class EnvironmentsPage extends React.Component {
1011
document.title = 'Patternfly React Boiler | Environments';
1112
}
1213

14+
handleClick = (event) => {
15+
this.setState({wizardView: true});
16+
};
17+
18+
handleClose = (event) => {
19+
this.setState({wizardView: false});
20+
};
21+
1322
render() {
14-
return (
15-
<pf-alert type="danger">
16-
<strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
17-
</pf-alert>
18-
)
23+
const { projects } = this.props;
24+
25+
if(this.state.wizardView){
26+
return (
27+
<Layout className={c.add_layout}>
28+
<div className={c.add_container + ' container-pf-nav-pf-vertical'}>
29+
<div className={c.add_button} onClick={this.handleClick}>
30+
<i className="fa fa-4x fa-plus-circle" aria-hidden="true"></i>
31+
<h3>Add environments</h3>
32+
</div>
33+
</div>
34+
<WizardView handleClose={this.handleClose.bind(this)}/>
35+
</Layout>
36+
);
37+
} else {
38+
return (
39+
<Layout className={c.add_layout}>
40+
<div className={c.add_container + ' container-pf-nav-pf-vertical'}>
41+
<div className={c.add_button} onClick={this.handleClick}>
42+
<i className="fa fa-4x fa-plus-circle" aria-hidden="true"></i>
43+
<h3>Add environments</h3>
44+
</div>
45+
</div>
46+
</Layout>
47+
);
48+
}
1949
}
2050

2151
}
2252

23-
export default EnvironmentsPage;
53+
export default EnvironmentsPage;

‎pages/home/index.js

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,64 @@
11
import React, { PropTypes } from 'react';
22
import Layout from '../../components/Layout';
3-
import ProjectListView from '../../components/ListView/ProjectListView';
4-
import constants from '../../core/constants';
3+
import CreateProjectForm from '../../components/Forms/CreateProjectForm';
4+
import CreateStageForm from '../../components/Forms/CreateStageForm';
5+
import PfTabs from 'pf-tabs';
6+
import PfAlert from 'pf-alert';
57

68
class HomePage extends React.Component {
79

8-
state = { projects: [] };
10+
state = {
11+
showSuccess: false
12+
};
913

1014
componentDidMount() {
1115
document.title = 'Patternfly React Boiler | Home';
1216
}
1317

14-
componentWillMount() {
15-
this.getProjects();
18+
handleSubmitProject(event){
19+
this.setState({showSuccess: !this.state.showSuccess});
20+
event.preventDefault();
1621
}
1722

18-
getProjects() {
19-
let that = this;
20-
fetch(constants.get_projects_url).then(r => r.json())
21-
.then(data => {
22-
that.setState({projects : data})
23-
})
24-
.catch(e => console.log("Booo"));
23+
handleSubmitStage(event){
24+
this.setState({showError: !this.state.showError});
25+
event.preventDefault();
2526
}
2627

2728
render() {
2829
return (
2930
<Layout className="container-fluid container-pf-nav-pf-vertical">
30-
<ProjectListView projects={ this.state.projects }/>
31+
<div className="row">
32+
<div className="col-md-12">
33+
<div className="page-header">
34+
<h1>Projects</h1>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div className="row">
40+
<div className="col-md-12">
41+
<pf-tabs>
42+
<pf-tab title="Create Project" active="true">
43+
{this.state.showSuccess &&
44+
<pf-alert type="success">
45+
<strong>Great job!</strong> This is really working out great for us.
46+
</pf-alert>
47+
}
48+
<CreateProjectForm handleSubmit={this.handleSubmitProject.bind(this)}/>
49+
</pf-tab>
50+
<pf-tab title="Create Stage">
51+
{this.state.showError &&
52+
<pf-alert type="danger">
53+
<strong>Hey there is a problem!</strong> Yeah this is really messed up and you should know about it.
54+
</pf-alert>
55+
}
56+
<CreateStageForm handleSubmit={this.handleSubmitStage.bind(this)}/>
57+
</pf-tab>
58+
</pf-tabs>
59+
</div>
60+
</div>
61+
3162
</Layout>
3263
);
3364
}

‎public/app.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
Patternfly css extensions
3+
*/
4+
5+
.blank-slate-pf {
6+
background-color: #ffffff;
7+
}
8+
9+
.list-view-pf-view {
10+
margin-top: 0px;
11+
}
12+
13+
/**
14+
Web Component styles
15+
*/
16+
pf-tab {
17+
padding: 10px 15px;
18+
display: block;
19+
background-color: #ffffff;
20+
border: 1px solid #ddd;
21+
border-top: none;
22+
}
23+
24+
pf-alert {
25+
display:block;
26+
}

‎public/index.ejs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="apple-touch-icon" href="apple-touch-icon.png">
1010
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/patternfly/3.12.0/css/patternfly.min.css">
1111
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/patternfly/3.12.0/css/patternfly-additions.min.css">
12+
<link rel="stylesheet" href="app.css">
1213

1314
<!-- js dependencies -->
1415
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

‎webpack.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@ const config = {
4242
'./main.js'
4343
],
4444

45+
resolve: {
46+
root: [
47+
path.join(__dirname, "node_modules/patternfly-webcomponents/src"),
48+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-alert"),
49+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-hello"),
50+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-i18n"),
51+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-list-view"),
52+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-template-repeater"),
53+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-tabs"),
54+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-utilization-bar-chart"),
55+
path.join(__dirname, "node_modules/patternfly-webcomponents/src/pf-utils")
56+
]
57+
},
58+
4559
// Options affecting the output of the compilation
4660
output: {
4761
path: path.resolve(__dirname, './public/dist'),
@@ -98,6 +112,7 @@ const config = {
98112
path.resolve(__dirname, './core'),
99113
path.resolve(__dirname, './pages'),
100114
path.resolve(__dirname, './main.js'),
115+
path.resolve(__dirname, "./node_modules/patternfly-webcomponents/src"),
101116
],
102117
loader: `babel-loader?${JSON.stringify(babelConfig)}`,
103118
},

0 commit comments

Comments
 (0)