Skip to content

Commit e0e9879

Browse files
raclimraclim
authored
Merge branch 'develop' into update/issue-template-yaml
2 parents 9ab8df8 + b575bff commit e0e9879

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1394
-612
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/Button.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ Button.propTypes = {
257257
* The visible part of the button, telling the user what
258258
* the action is
259259
*/
260-
children: PropTypes.element,
260+
children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
261261
/**
262262
If the button can be activated or not
263263
*/

‎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: 17 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');
@@ -747,6 +752,16 @@ class Nav extends React.PureComponent {
747752
正體中文
748753
</button>
749754
</li>
755+
<li className="nav__dropdown-item">
756+
<button
757+
onFocus={this.handleFocusForLang}
758+
onBlur={this.handleBlur}
759+
value="tr"
760+
onClick={(e) => this.handleLangSelection(e)}
761+
>
762+
Türkçe
763+
</button>
764+
</li>
750765
</ul>
751766
</li>
752767
</React.Fragment>
@@ -760,15 +775,15 @@ class Nav extends React.PureComponent {
760775
this.renderLanguageMenu(navDropdownState)}
761776
<li className="nav__item">
762777
<Link to="/login" className="nav__auth-button">
763-
<span className="nav__item-header">
778+
<span className="nav__item-header" title="Login">
764779
{this.props.t('Nav.Login')}
765780
</span>
766781
</Link>
767782
</li>
768783
<span className="nav__item-or">{this.props.t('Nav.LoginOr')}</span>
769784
<li className="nav__item">
770785
<Link to="/signup" className="nav__auth-button">
771-
<span className="nav__item-header">
786+
<span className="nav__item-header" title="SignUp">
772787
{this.props.t('Nav.SignUp')}
773788
</span>
774789
</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/i18n.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
zhCN,
1616
zhTW,
1717
uk,
18-
sv
18+
sv,
19+
tr
1920
} from 'date-fns/locale';
2021

2122
const fallbackLng = ['en-US'];
@@ -32,7 +33,8 @@ const availableLanguages = [
3233
'sv',
3334
'uk-UA',
3435
'zh-CN',
35-
'zh-TW'
36+
'zh-TW',
37+
'tr'
3638
];
3739

3840
export function languageKeyToLabel(lang) {
@@ -49,7 +51,8 @@ export function languageKeyToLabel(lang) {
4951
sv: 'Svenska',
5052
'uk-UA': 'Українська',
5153
'zh-CN': '简体中文',
52-
'zh-TW': '正體中文'
54+
'zh-TW': '正體中文',
55+
tr: 'Türkçe'
5356
};
5457
return languageMap[lang];
5558
}
@@ -68,7 +71,8 @@ export function languageKeyToDateLocale(lang) {
6871
sv,
6972
'uk-UA': uk,
7073
'zh-CN': zhCN,
71-
'zh-TW': zhTW
74+
'zh-TW': zhTW,
75+
tr
7276
};
7377
return languageMap[lang];
7478
}

‎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>

0 commit comments

Comments
 (0)