Skip to content

Commit 6c79d30

Browse files
lindapaistelindapaiste
authored
Merge branch 'develop' into refactor/collection-create
2 parents f0a6045 + 2255bf1 commit 6c79d30

33 files changed

+393
-432
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ Learn more about [our community](https://p5js.org/community/) and read our commu
1616

1717
Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
1818

19+
## Setting Up the Development Environment
20+
21+
- Refer to [this documentation for setting up your environment](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/installation.md)
22+
23+
24+
1925
## Issues
2026

2127
If you have found a bug in the p5.js Web Editor, you can file it under the ["issues" tab](https://github.com/processing/p5.js-web-editor/issues). You can also request new features here. A set of templates for reporting issues and requesting features are provided to assist you (and us!). The p5.js Editor is maintained mostly by volunteers, so we thank you for your patience as we try to address your issues as soon as we can. Please post bugs and feature requests in the correct repository if you can:

‎client/common/icons.jsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,28 +29,28 @@ import CircleInfo from '../images/circle-info.svg';
2929
// could also give these a default size, color, etc. based on the theme
3030
// Need to add size to these - like small icon, medium icon, large icon. etc.
3131
function withLabel(SvgComponent) {
32-
const Icon = (props) => {
33-
const StyledIcon = styled(SvgComponent)`
34-
&&& {
35-
color: ${prop('Icon.default')};
32+
const StyledIcon = styled(SvgComponent)`
33+
&&& {
34+
color: ${prop('Icon.default')};
35+
& g,
36+
& path,
37+
& polygon {
38+
opacity: 1;
39+
fill: ${prop('Icon.default')};
40+
}
41+
&:hover {
42+
color: ${prop('Icon.hover')};
3643
& g,
3744
& path,
3845
& polygon {
3946
opacity: 1;
40-
fill: ${prop('Icon.default')};
41-
}
42-
&:hover {
43-
color: ${prop('Icon.hover')};
44-
& g,
45-
& path,
46-
& polygon {
47-
opacity: 1;
48-
fill: ${prop('Icon.hover')};
49-
}
47+
fill: ${prop('Icon.hover')};
5048
}
5149
}
52-
`;
50+
}
51+
`;
5352

53+
const Icon = (props) => {
5454
const { 'aria-label': ariaLabel } = props;
5555
if (ariaLabel) {
5656
return (

‎client/components/AddRemoveButton.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { withTranslation } from 'react-i18next';
3+
import { useTranslation } from 'react-i18next';
44

55
import AddIcon from '../images/plus.svg';
66
import RemoveIcon from '../images/minus.svg';
77

8-
const AddRemoveButton = ({ type, onClick, t }) => {
8+
const AddRemoveButton = ({ type, onClick }) => {
9+
const { t } = useTranslation();
910
const alt =
1011
type === 'add'
1112
? t('AddRemoveButton.AltAddARIA')
@@ -25,8 +26,7 @@ const AddRemoveButton = ({ type, onClick, t }) => {
2526

2627
AddRemoveButton.propTypes = {
2728
type: PropTypes.oneOf(['add', 'remove']).isRequired,
28-
onClick: PropTypes.func.isRequired,
29-
t: PropTypes.func.isRequired
29+
onClick: PropTypes.func.isRequired
3030
};
3131

32-
export default withTranslation()(AddRemoveButton);
32+
export default AddRemoveButton;

‎client/components/Nav.jsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,7 @@ class Nav extends React.PureComponent {
278278
onClick={this.toggleDropdownForFile}
279279
onBlur={this.handleBlur}
280280
onFocus={this.clearHideTimeout}
281+
title="File"
281282
onMouseOver={() => {
282283
if (this.state.dropdownOpen !== 'none') {
283284
this.setDropdown('file');
@@ -396,6 +397,7 @@ class Nav extends React.PureComponent {
396397
onClick={this.toggleDropdownForEdit}
397398
onBlur={this.handleBlur}
398399
onFocus={this.clearHideTimeout}
400+
title="Edit"
399401
onMouseOver={() => {
400402
if (this.state.dropdownOpen !== 'none') {
401403
this.setDropdown('edit');
@@ -454,6 +456,7 @@ class Nav extends React.PureComponent {
454456
onClick={this.toggleDropdownForSketch}
455457
onBlur={this.handleBlur}
456458
onFocus={this.clearHideTimeout}
459+
title="Sketch"
457460
onMouseOver={() => {
458461
if (this.state.dropdownOpen !== 'none') {
459462
this.setDropdown('sketch');
@@ -539,6 +542,7 @@ class Nav extends React.PureComponent {
539542
onClick={this.toggleDropdownForHelp}
540543
onBlur={this.handleBlur}
541544
onFocus={this.clearHideTimeout}
545+
title="Help"
542546
onMouseOver={() => {
543547
if (this.state.dropdownOpen !== 'none') {
544548
this.setDropdown('help');
@@ -600,6 +604,7 @@ class Nav extends React.PureComponent {
600604
onClick={this.toggleDropdownForLang}
601605
onBlur={this.handleBlur}
602606
onFocus={this.clearHideTimeout}
607+
title="Language"
603608
onMouseOver={() => {
604609
if (this.state.dropdownOpen !== 'none') {
605610
this.setDropdown('lang');
@@ -760,15 +765,15 @@ class Nav extends React.PureComponent {
760765
this.renderLanguageMenu(navDropdownState)}
761766
<li className="nav__item">
762767
<Link to="/login" className="nav__auth-button">
763-
<span className="nav__item-header">
768+
<span className="nav__item-header" title="Login">
764769
{this.props.t('Nav.Login')}
765770
</span>
766771
</Link>
767772
</li>
768773
<span className="nav__item-or">{this.props.t('Nav.LoginOr')}</span>
769774
<li className="nav__item">
770775
<Link to="/signup" className="nav__auth-button">
771-
<span className="nav__item-header">
776+
<span className="nav__item-header" title="SignUp">
772777
{this.props.t('Nav.SignUp')}
773778
</span>
774779
</Link>

‎client/components/PreviewNav.jsx

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,50 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Link } from 'react-router';
4-
import { withTranslation } from 'react-i18next';
4+
import { useTranslation } from 'react-i18next';
55

66
import LogoIcon from '../images/p5js-logo-small.svg';
77
import CodeIcon from '../images/code.svg';
88

9-
const PreviewNav = ({ owner, project, t }) => (
10-
<nav className="nav preview-nav">
11-
<div className="nav__items-left">
12-
<div className="nav__item-logo">
13-
<LogoIcon
14-
role="img"
15-
aria-label={t('Common.p5logoARIA')}
16-
focusable="false"
17-
className="svg__logo"
18-
/>
9+
const PreviewNav = ({ owner, project }) => {
10+
const { t } = useTranslation();
11+
return (
12+
<nav className="nav preview-nav">
13+
<div className="nav__items-left">
14+
<div className="nav__item-logo">
15+
<LogoIcon
16+
role="img"
17+
aria-label={t('Common.p5logoARIA')}
18+
focusable="false"
19+
className="svg__logo"
20+
/>
21+
</div>
22+
<Link
23+
className="nav__item"
24+
to={`/${owner.username}/sketches/${project.id}`}
25+
>
26+
{project.name}
27+
</Link>
28+
<p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
29+
<Link className="nav__item" to={`/${owner.username}/sketches/`}>
30+
{owner.username}
31+
</Link>
1932
</div>
20-
<Link
21-
className="nav__item"
22-
to={`/${owner.username}/sketches/${project.id}`}
23-
>
24-
{project.name}
25-
</Link>
26-
<p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
27-
<Link className="nav__item" to={`/${owner.username}/sketches/`}>
28-
{owner.username}
29-
</Link>
30-
</div>
31-
<div className="nav__items-right">
32-
<Link
33-
to={`/${owner.username}/sketches/${project.id}`}
34-
aria-label={t('PreviewNav.EditSketchARIA')}
35-
>
36-
<CodeIcon
37-
className="preview-nav__editor-svg"
38-
focusable="false"
39-
aria-hidden="true"
40-
/>
41-
</Link>
42-
</div>
43-
</nav>
44-
);
33+
<div className="nav__items-right">
34+
<Link
35+
to={`/${owner.username}/sketches/${project.id}`}
36+
aria-label={t('PreviewNav.EditSketchARIA')}
37+
>
38+
<CodeIcon
39+
className="preview-nav__editor-svg"
40+
focusable="false"
41+
aria-hidden="true"
42+
/>
43+
</Link>
44+
</div>
45+
</nav>
46+
);
47+
};
4548

4649
PreviewNav.propTypes = {
4750
owner: PropTypes.shape({
@@ -50,8 +53,7 @@ PreviewNav.propTypes = {
5053
project: PropTypes.shape({
5154
name: PropTypes.string.isRequired,
5255
id: PropTypes.string.isRequired
53-
}).isRequired,
54-
t: PropTypes.func.isRequired
56+
}).isRequired
5557
};
5658

57-
export default withTranslation()(PreviewNav);
59+
export default PreviewNav;

‎client/components/__snapshots__/Nav.unit.test.jsx.snap

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ exports[`Nav renders correctly 1`] = `
2222
<li
2323
class="nav__item"
2424
>
25-
<button>
25+
<button
26+
title="File"
27+
>
2628
<span
2729
class="nav__item-header"
2830
/>
@@ -65,7 +67,9 @@ exports[`Nav renders correctly 1`] = `
6567
<li
6668
class="nav__item"
6769
>
68-
<button>
70+
<button
71+
title="Edit"
72+
>
6973
<span
7074
class="nav__item-header"
7175
/>
@@ -116,7 +120,9 @@ exports[`Nav renders correctly 1`] = `
116120
<li
117121
class="nav__item"
118122
>
119-
<button>
123+
<button
124+
title="Sketch"
125+
>
120126
<span
121127
class="nav__item-header"
122128
/>
@@ -166,7 +172,9 @@ exports[`Nav renders correctly 1`] = `
166172
<li
167173
class="nav__item"
168174
>
169-
<button>
175+
<button
176+
title="Help"
177+
>
170178
<span
171179
class="nav__item-header"
172180
/>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import React from 'react';
2+
import { useSelector } from 'react-redux';
23
import { Helmet } from 'react-helmet';
34
import { useTranslation } from 'react-i18next';
45
import { Link } from 'react-router';
56
import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
67
// import PlayIcon from '../../../images/play.svg';
78
import AsteriskIcon from '../../../images/p5-asterisk.svg';
9+
import packageData from '../../../../package.json';
810

911
function About(props) {
1012
const { t } = useTranslation();
13+
const p5version = useSelector((state) => {
14+
const index = state.files.find((file) => file.name === 'index.html');
15+
return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
16+
});
1117
return (
1218
<div className="about__content">
1319
<Helmet>
@@ -20,6 +26,14 @@ function About(props) {
2026
aria-label={t('Common.p5logoARIA')}
2127
focusable="false"
2228
/>
29+
<div className="about__content-column">
30+
<p className="about__version-info">
31+
Web Editor: <span>v{packageData?.version}</span>
32+
</p>
33+
<p className="about__version-info">
34+
p5.js: <span>v{p5version}</span>
35+
</p>
36+
</div>
2337
</div>
2438
<div className="about__content-column">
2539
<h3 className="about__content-column-title">{t('About.NewP5')}</h3>

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useRef, useEffect } from 'react';
2-
import PropTypes from 'prop-types';
3-
import { withTranslation } from 'react-i18next';
2+
import { useTranslation } from 'react-i18next';
43

54
import { bindActionCreators } from 'redux';
65

@@ -201,7 +200,8 @@ const getConsoleFeedStyle = (theme, fontSize) => {
201200
}
202201
};
203202

204-
const Console = ({ t }) => {
203+
const Console = () => {
204+
const { t } = useTranslation();
205205
const consoleEvents = useSelector((state) => state.console);
206206
const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
207207
const isPlaying = useSelector((state) => state.ide.isPlaying);
@@ -267,6 +267,7 @@ const Console = ({ t }) => {
267267
style={{ fontSize }}
268268
>
269269
<ConsoleFeed
270+
variant={theme === 'light' ? 'light' : 'dark'}
270271
styles={getConsoleFeedStyle(theme, fontSize)}
271272
logs={consoleEvents}
272273
key={`${theme}-${fontSize}`}
@@ -284,8 +285,4 @@ const Console = ({ t }) => {
284285
);
285286
};
286287

287-
Console.propTypes = {
288-
t: PropTypes.func.isRequired
289-
};
290-
291-
export default withTranslation()(Console);
288+
export default Console;

0 commit comments

Comments
 (0)