Skip to content

Commit e140702

Browse files
catarakcatarak
authored
Create Asset List View and refactor overlay code (#356)
* start to create asset list * begin refactoring overlay component to remove duplicate code * refactoring of overlays, asset list styles * changes to add size to asset list * fixes to asset list * handle case in which a user hasn't uploaded any assets * fix bug in which asset list only grabbed first asset * remove console.log * update overlay exit styling to use icon mixin
1 parent 080e9aa commit e140702

30 files changed

+716
-502
lines changed

‎client/components/Nav.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,11 @@ class Nav extends React.PureComponent {
142142
My sketches
143143
</Link>
144144
</li>
145+
<li>
146+
<Link to={`/${this.props.user.username}/assets`}>
147+
My assets
148+
</Link>
149+
</li>
145150
<li>
146151
<Link to={`/${this.props.user.username}/account`}>
147152
My account

‎client/constants.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// TODO Organize this file by reducer type, ot break this apart into
2+
// multiple files
13
export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
24
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
35

@@ -124,3 +126,4 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
124126

125127
export const SHOW_HELP_MODAL = 'SHOW_HELP_MODAL';
126128
export const HIDE_HELP_MODAL = 'HIDE_HELP_MODAL';
129+
export const SET_ASSETS = 'SET_ASSETS';

‎client/modules/App/components/Overlay.jsx

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,70 @@
11
import React, { PropTypes } from 'react';
2+
import InlineSVG from 'react-inlinesvg';
3+
import { browserHistory } from 'react-router';
24

3-
function Overlay(props) {
4-
return (
5-
<div className="overlay">
6-
<div className="overlay-content">
7-
{props.children}
5+
const exitUrl = require('../../../images/exit.svg');
6+
7+
class Overlay extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
this.close = this.close.bind(this);
11+
}
12+
13+
componentDidMount() {
14+
this.overlay.focus();
15+
}
16+
17+
close() {
18+
if (!this.props.closeOverlay) {
19+
browserHistory.push(this.props.previousPath);
20+
} else {
21+
this.props.closeOverlay();
22+
}
23+
}
24+
25+
render() {
26+
const {
27+
ariaLabel,
28+
title,
29+
children
30+
} = this.props;
31+
return (
32+
<div className="overlay">
33+
<div className="overlay__content">
34+
<section
35+
tabIndex="0"
36+
role="main"
37+
aria-label={ariaLabel}
38+
ref={(element) => { this.overlay = element; }}
39+
className="overlay__body"
40+
>
41+
<header className="overlay__header">
42+
<h2 className="overlay__title">{title}</h2>
43+
<button className="overlay__close-button" onClick={this.close}>
44+
<InlineSVG src={exitUrl} alt="close overlay" />
45+
</button>
46+
</header>
47+
{children}
48+
</section>
49+
</div>
850
</div>
9-
</div>
10-
);
51+
);
52+
}
1153
}
1254

1355
Overlay.propTypes = {
14-
children: PropTypes.element
56+
children: PropTypes.element,
57+
closeOverlay: PropTypes.func,
58+
title: PropTypes.string,
59+
ariaLabel: PropTypes.string,
60+
previousPath: PropTypes.string.isRequired
1561
};
1662

1763
Overlay.defaultProps = {
18-
children: null
64+
children: null,
65+
title: 'Modal',
66+
closeOverlay: null,
67+
ariaLabel: 'modal'
1968
};
2069

2170
export default Overlay;

‎client/modules/IDE/actions/assets.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import axios from 'axios';
2+
3+
import * as ActionTypes from '../../../constants';
4+
5+
const ROOT_URL = process.env.API_URL;
6+
7+
function setAssets(assets) {
8+
return {
9+
type: ActionTypes.SET_ASSETS,
10+
assets
11+
};
12+
}
13+
14+
export function getAssets(username) {
15+
return (dispatch, getState) => {
16+
axios.get(`${ROOT_URL}/S3/${username}/objects`, { withCredentials: true })
17+
.then((response) => {
18+
dispatch(setAssets(response.data.assets));
19+
})
20+
.catch(response => dispatch({
21+
type: ActionTypes.ERROR
22+
}));
23+
};
24+
}
25+
26+
export function deleteAsset(assetKey, userId) {
27+
return {
28+
type: 'PLACEHOLDER'
29+
};
30+
}

‎client/modules/IDE/components/About.jsx

Lines changed: 92 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,101 @@
1-
import React, { PropTypes } from 'react';
1+
import React from 'react';
22
import InlineSVG from 'react-inlinesvg';
3-
import { browserHistory } from 'react-router';
43

5-
const exitUrl = require('../../../images/exit.svg');
64
const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
75
const playUrl = require('../../../images/play.svg');
86
const asteriskUrl = require('../../../images/p5-asterisk.svg');
97

10-
class About extends React.Component {
11-
constructor(props) {
12-
super(props);
13-
this.closeAboutModal = this.closeAboutModal.bind(this);
14-
}
15-
16-
componentDidMount() {
17-
this.aboutSection.focus();
18-
}
19-
20-
closeAboutModal() {
21-
browserHistory.push(this.props.previousPath);
22-
}
23-
24-
render() {
25-
return (
26-
<section className="about" ref={(element) => { this.aboutSection = element; }} tabIndex="0">
27-
<header className="about__header">
28-
<h2 className="about__header-title">Welcome</h2>
29-
<button className="about__exit-button" onClick={this.closeAboutModal}>
30-
<InlineSVG src={exitUrl} alt="Close About Overlay" />
31-
</button>
32-
</header>
33-
<div className="about__content">
34-
<div className="about__content-column">
35-
<InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
36-
<p className="about__play-video">
37-
<a
38-
href="http://hello.p5js.org/"
39-
target="_blank"
40-
rel="noopener noreferrer"
41-
>
42-
<InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
43-
Play hello! video</a>
44-
</p>
45-
</div>
46-
<div className="about__content-column">
47-
<h3 className="about__content-column-title">New to p5.js?</h3>
48-
<p className="about__content-column-list">
49-
<a
50-
href="https://p5js.org/examples/"
51-
target="_blank"
52-
rel="noopener noreferrer"
53-
>
54-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
55-
Examples</a>
56-
</p>
57-
<p className="about__content-column-list">
58-
<a
59-
href="https://p5js.org/tutorials/"
60-
target="_blank"
61-
rel="noopener noreferrer"
62-
>
63-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
64-
Tutorials</a>
65-
</p>
66-
</div>
67-
<div className="about__content-column">
68-
<h3 className="about__content-column-title">Resources</h3>
69-
<p className="about__content-column-list">
70-
<a
71-
href="https://p5js.org/libraries/"
72-
target="_blank"
73-
rel="noopener noreferrer"
74-
>
75-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
76-
Libraries</a>
77-
</p>
78-
<p className="about__content-column-list">
79-
<a
80-
href="https://p5js.org/reference/"
81-
target="_blank"
82-
rel="noopener noreferrer"
83-
>
84-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
85-
Reference</a>
86-
</p>
87-
<p className="about__content-column-list">
88-
<a
89-
href="https://forum.processing.org/two/"
90-
target="_blank"
91-
rel="noopener noreferrer"
92-
>
93-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
94-
Forum</a>
95-
</p>
96-
</div>
97-
</div>
98-
<div className="about__footer">
99-
<p className="about__footer-list">
100-
<a
101-
href="https://github.com/processing/p5.js-web-editor"
102-
target="_blank"
103-
rel="noopener noreferrer"
104-
>Contribute</a>
105-
</p>
106-
<p className="about__footer-list">
107-
<a
108-
href="https://github.com/processing/p5.js-web-editor/issues/new"
109-
target="_blank"
110-
rel="noopener noreferrer"
111-
>Report a bug</a>
112-
</p>
113-
<p className="about__footer-list">
114-
<a
115-
href="https://twitter.com/p5xjs?lang=en"
116-
target="_blank"
117-
rel="noopener noreferrer"
118-
>Twitter</a>
119-
</p>
120-
<button className="about__ok-button" onClick={this.closeAboutModal}>OK!</button>
121-
</div>
122-
</section>
123-
);
124-
}
8+
function About(props) {
9+
return (
10+
<div className="about__content">
11+
<div className="about__content-column">
12+
<InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
13+
<p className="about__play-video">
14+
<a
15+
href="http://hello.p5js.org/"
16+
target="_blank"
17+
rel="noopener noreferrer"
18+
>
19+
<InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
20+
Play hello! video</a>
21+
</p>
22+
</div>
23+
<div className="about__content-column">
24+
<h3 className="about__content-column-title">New to p5.js?</h3>
25+
<p className="about__content-column-list">
26+
<a
27+
href="https://p5js.org/examples/"
28+
target="_blank"
29+
rel="noopener noreferrer"
30+
>
31+
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
32+
Examples</a>
33+
</p>
34+
<p className="about__content-column-list">
35+
<a
36+
href="https://p5js.org/tutorials/"
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
>
40+
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
41+
Tutorials</a>
42+
</p>
43+
</div>
44+
<div className="about__content-column">
45+
<h3 className="about__content-column-title">Resources</h3>
46+
<p className="about__content-column-list">
47+
<a
48+
href="https://p5js.org/libraries/"
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
>
52+
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
53+
Libraries</a>
54+
</p>
55+
<p className="about__content-column-list">
56+
<a
57+
href="https://p5js.org/reference/"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
62+
Reference</a>
63+
</p>
64+
<p className="about__content-column-list">
65+
<a
66+
href="https://forum.processing.org/two/"
67+
target="_blank"
68+
rel="noopener noreferrer"
69+
>
70+
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
71+
Forum</a>
72+
</p>
73+
</div>
74+
<div className="about__footer">
75+
<p className="about__footer-list">
76+
<a
77+
href="https://github.com/processing/p5.js-web-editor"
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
>Contribute</a>
81+
</p>
82+
<p className="about__footer-list">
83+
<a
84+
href="https://github.com/processing/p5.js-web-editor/issues/new"
85+
target="_blank"
86+
rel="noopener noreferrer"
87+
>Report a bug</a>
88+
</p>
89+
<p className="about__footer-list">
90+
<a
91+
href="https://twitter.com/p5xjs?lang=en"
92+
target="_blank"
93+
rel="noopener noreferrer"
94+
>Twitter</a>
95+
</p>
96+
</div>
97+
</div>
98+
);
12599
}
126100

127-
About.propTypes = {
128-
previousPath: PropTypes.string.isRequired
129-
};
130-
131101
export default About;

0 commit comments

Comments
 (0)