Skip to content

Commit 9185447

Browse files
catarakcatarak
committed
Merge master to fix/rename-file-set-unsaved
2 parents 6bf303d + 8114a88 commit 9185447

28 files changed

+1538
-537
lines changed

‎.github/CONTRIBUTING.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ Don't know where to begin? Here are some suggestions to get started:
3333
- Front end: React/Redux, CSS/Sass, CodeMirror
3434
- Back end: Node, Express, MongoDB, Jest, AWS
3535
- DevOps: Travis CI, Jest, Docker, Kubernetes, AWS
36+
- Documentation
37+
- Translations: Application and documentation
3638
* Use the [p5.js Web Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Open an issue.
3739
* Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
3840
* Try getting the project running locally on your computer by following the [installation steps](./../developer_docs/installation.md).

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# [p5.js Web Editor](https://editor.p5js.org)
22

3+
4+
Documentation is also available in the following languages:
5+
6+
[한국어](https://github.com/processing/p5.js-web-editor/blob/master/translations/ko)
7+
8+
## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
9+
310
The p5.js Web Editor is a platform for creative coding, with a focus on making coding accessible for as many people as possible, including artists, designers, educators, beginners, and anyone who wants to learn. Simply by opening the website you can get started writing p5.js sketches without downloading or configuring anything. The editor is designed with simplicity in mind by limiting features and frills. We strive to listen to the community to drive the editor’s development, and to be intentional with every change. The editor is free and open-source.
411

512
We also strive to give the community as much ownership and control as possible. You can download your sketches so that you can edit them locally or host them elsewhere. You can also host your own version of the editor, giving you control over its data.

‎client/components/Nav.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ class Nav extends React.PureComponent {
227227

228228
renderDashboardMenu(navDropdownState) {
229229
return (
230-
<ul className="nav__items-left" title="project-menu">
230+
<ul className="nav__items-left">
231231
<li className="nav__item-logo">
232232
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
233233
</li>
@@ -245,7 +245,7 @@ class Nav extends React.PureComponent {
245245

246246
renderProjectMenu(navDropdownState) {
247247
return (
248-
<ul className="nav__items-left" title="project-menu">
248+
<ul className="nav__items-left">
249249
<li className="nav__item-logo">
250250
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
251251
</li>

‎client/components/NavBasic.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class NavBasic extends React.PureComponent {
1313
render() {
1414
return (
1515
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
16-
<ul className="nav__items-left" title="project-menu">
16+
<ul className="nav__items-left">
1717
<li className="nav__item-logo">
1818
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
1919
</li>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ exports[`Nav renders correctly 1`] = `
77
>
88
<ul
99
className="nav__items-left"
10-
title="project-menu"
1110
>
1211
<li
1312
className="nav__item-logo"

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import axios from 'axios';
2+
import { browserHistory } from 'react-router';
23
import * as ActionTypes from '../../../constants';
34
import { startLoader, stopLoader } from './loader';
45
import { setToastText, showToast } from './toast';
@@ -47,20 +48,22 @@ export function createCollection(collection) {
4748
});
4849
dispatch(stopLoader());
4950

50-
const collectionName = response.data.name;
51-
dispatch(setToastText(`Created "${collectionName}"`));
51+
const newCollection = response.data;
52+
dispatch(setToastText(`Created "${newCollection.name}"`));
5253
dispatch(showToast(TOAST_DISPLAY_TIME_MS));
5354

54-
return response.data;
55+
const pathname = `/${newCollection.owner.username}/collections/${newCollection.id}`;
56+
const location = { pathname, state: { skipSavingPath: true } };
57+
58+
browserHistory.push(location);
5559
})
5660
.catch((response) => {
61+
console.error('Error creating collection', response.data);
5762
dispatch({
5863
type: ActionTypes.ERROR,
5964
error: response.data
6065
});
6166
dispatch(stopLoader());
62-
63-
return response.data;
6467
});
6568
};
6669
}

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

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,17 @@ export class FileNode extends React.Component {
230230
<ul title="file options">
231231
{ isFolder &&
232232
<React.Fragment>
233+
<li>
234+
<button
235+
aria-label="add folder"
236+
onClick={this.handleClickAddFolder}
237+
onBlur={this.onBlurComponent}
238+
onFocus={this.onFocusComponent}
239+
className="sidebar__file-item-option"
240+
>
241+
Create folder
242+
</button>
243+
</li>
233244
<li>
234245
<button
235246
aria-label="add file"
@@ -238,18 +249,20 @@ export class FileNode extends React.Component {
238249
onFocus={this.onFocusComponent}
239250
className="sidebar__file-item-option"
240251
>
241-
Add File
252+
Create file
242253
</button>
243254
</li>
244255
<li>
245256
<button
246-
aria-label="add folder"
247-
onClick={this.handleClickAddFolder}
257+
aria-label="upload file"
258+
onClick={() => {
259+
this.props.openUploadFileModal(this.props.id);
260+
setTimeout(this.hideFileOptions, 0);
261+
}}
248262
onBlur={this.onBlurComponent}
249263
onFocus={this.onFocusComponent}
250-
className="sidebar__file-item-option"
251264
>
252-
Add Folder
265+
Upload file
253266
</button>
254267
</li>
255268
</React.Fragment>
@@ -304,7 +317,8 @@ FileNode.propTypes = {
304317
newFolder: PropTypes.func.isRequired,
305318
showFolderChildren: PropTypes.func.isRequired,
306319
hideFolderChildren: PropTypes.func.isRequired,
307-
canEdit: PropTypes.bool.isRequired
320+
canEdit: PropTypes.bool.isRequired,
321+
openUploadFileModal: PropTypes.func.isRequired
308322
};
309323

310324
FileNode.defaultProps = {

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,18 @@ function KeyboardShortcutModal() {
7474
</span>
7575
<span>Turn off Accessible Output</span>
7676
</li>
77+
<li className="keyboard-shortcut-item">
78+
<span className="keyboard-shortcut__command">
79+
{metaKeyName} + B
80+
</span>
81+
<span>Toggle Sidebar</span>
82+
</li>
83+
<li className="keyboard-shortcut-item">
84+
<span className="keyboard-shortcut__command">
85+
Ctrl + `
86+
</span>
87+
<span>Toggle Console</span>
88+
</li>
7789
</ul>
7890
);
7991
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ const QuickAddList = ({
5353
{...item}
5454
onSelect={
5555
(event) => {
56-
event.target.blur();
56+
event.stopPropagation();
57+
event.currentTarget.blur();
5758
handleAction(item);
5859
}
5960
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,13 @@ class Searchbar extends React.Component {
2626

2727
handleSearchEnter = (e) => {
2828
if (e.key === 'Enter') {
29-
this.props.setSearchTerm(this.state.searchValue);
29+
this.searchChange();
3030
}
3131
}
3232

33-
searchChange = (value) => {
34-
this.props.setSearchTerm(this.state.searchValue);
33+
searchChange = () => {
34+
if (this.state.searchValue.trim().length === 0) return;
35+
this.props.setSearchTerm(this.state.searchValue.trim());
3536
};
3637

3738
handleSearchChange = (e) => {

‎client/modules/IDE/pages/IDEView.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,20 @@ class IDEView extends React.Component {
156156
} else if (e.keyCode === 49 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
157157
e.preventDefault();
158158
this.props.setAllAccessibleOutput(true);
159+
} else if (e.keyCode === 66 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
160+
e.preventDefault();
161+
if (!this.props.ide.sidebarIsExpanded) {
162+
this.props.expandSidebar();
163+
} else {
164+
this.props.collapseSidebar();
165+
}
166+
} else if (e.keyCode === 192 && e.ctrlKey) {
167+
e.preventDefault();
168+
if (this.props.ide.consoleIsExpanded) {
169+
this.props.collapseConsole();
170+
} else {
171+
this.props.expandConsole();
172+
}
159173
}
160174
}
161175

‎client/modules/User/components/Collection.jsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -380,15 +380,15 @@ Collection.propTypes = {
380380
}).isRequired,
381381
getCollections: PropTypes.func.isRequired,
382382
collection: PropTypes.shape({
383-
id: PropTypes.string.isRequired,
384-
name: PropTypes.string.isRequired,
383+
id: PropTypes.string,
384+
name: PropTypes.string,
385385
slug: PropTypes.string,
386386
description: PropTypes.string,
387387
owner: PropTypes.shape({
388-
username: PropTypes.string.isRequired,
388+
username: PropTypes.string,
389389
}).isRequired,
390390
items: PropTypes.arrayOf(PropTypes.shape({})),
391-
}).isRequired,
391+
}),
392392
username: PropTypes.string,
393393
loading: PropTypes.bool.isRequired,
394394
toggleDirectionForField: PropTypes.func.isRequired,
@@ -401,7 +401,14 @@ Collection.propTypes = {
401401
};
402402

403403
Collection.defaultProps = {
404-
username: undefined
404+
username: undefined,
405+
collection: {
406+
id: undefined,
407+
items: [],
408+
owner: {
409+
username: undefined
410+
}
411+
}
405412
};
406413

407414
function mapStateToProps(state, ownProps) {

‎client/modules/User/components/CollectionCreate.jsx

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Helmet } from 'react-helmet';
44
import { connect } from 'react-redux';
5-
import { browserHistory } from 'react-router';
65
import { bindActionCreators } from 'redux';
76
import * as CollectionsActions from '../../IDE/actions/collections';
87

@@ -39,19 +38,7 @@ class CollectionCreate extends React.Component {
3938
handleCreateCollection = (event) => {
4039
event.preventDefault();
4140

42-
this.props.createCollection(this.state.collection)
43-
.then(({ id, owner }) => {
44-
const pathname = `/${owner.username}/collections/${id}`;
45-
const location = { pathname, state: { skipSavingPath: true } };
46-
47-
browserHistory.replace(location);
48-
})
49-
.catch((error) => {
50-
console.error('Error creating collection', error);
51-
this.setState({
52-
creationError: error,
53-
});
54-
});
41+
this.props.createCollection(this.state.collection);
5542
}
5643

5744
render() {
@@ -107,12 +94,7 @@ CollectionCreate.propTypes = {
10794
username: PropTypes.string,
10895
authenticated: PropTypes.bool.isRequired
10996
}).isRequired,
110-
createCollection: PropTypes.func.isRequired,
111-
collection: PropTypes.shape({}).isRequired, // TODO
112-
sorting: PropTypes.shape({
113-
field: PropTypes.string.isRequired,
114-
direction: PropTypes.string.isRequired
115-
}).isRequired
97+
createCollection: PropTypes.func.isRequired
11698
};
11799

118100
function mapStateToProps(state, ownProps) {

‎client/modules/User/pages/CollectionView.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ function mapStateToProps(state) {
7272
}
7373

7474
function mapDispatchToProps(dispatch) {
75+
return {};
7576
}
7677

7778
CollectionView.propTypes = {
@@ -84,7 +85,7 @@ CollectionView.propTypes = {
8485
}).isRequired,
8586
theme: PropTypes.string.isRequired,
8687
user: PropTypes.shape({
87-
username: PropTypes.string.isRequired,
88+
username: PropTypes.string,
8889
}),
8990
};
9091

‎client/styles/abstracts/_placeholders.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,15 @@
8787
fill: getThemifyVariable('button-color');
8888
opacity: 1;
8989
}
90-
&:enabled:hover {
90+
&:not(disabled):hover {
9191
border-color: getThemifyVariable('button-background-hover-color');
9292
background-color: getThemifyVariable('button-background-hover-color');
9393
color: getThemifyVariable('button-hover-color');
9494
& g {
9595
fill: getThemifyVariable('button-hover-color');
9696
}
9797
}
98-
&:enabled:active {
98+
&:not(disabled):active {
9999
border-color: getThemifyVariable('button-background-active-color');
100100
background-color: getThemifyVariable('button-background-active-color');
101101
color: getThemifyVariable('button-active-color');

‎client/styles/abstracts/_variables.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ $themes: (
186186
modal-button-color: #333,
187187
heading-text-color: #e1e1e1,
188188
secondary-text-color: #e1e1e1,
189-
inactive-text-color: #c1c1c1,
189+
inactive-text-color: #f2f2f2,
190190
background-color: #333,
191191
button-background-color: $white,
192192
button-color: $black,
@@ -201,14 +201,14 @@ $themes: (
201201
modal-background-color: #444,
202202
modal-button-background-color: #C1C1C1,
203203
modal-border-color: #949494,
204-
icon-color: #a9a9a9,
204+
icon-color: #d9d9d9,
205205
icon-hover-color: $yellow,
206206
icon-toast-hover-color: $yellow,
207207
shadow-color: rgba(0, 0, 0, 0.16),
208208
console-background-color: #4f4f4f,
209209
console-color: $black,
210210
console-header-background-color: #3f3f3f,
211-
console-header-color: #b5b5b5,
211+
console-header-color: #d9d9d9,
212212
console-info-background-color: $lightsteelblue,
213213
console-warn-background-color: $orange,
214214
console-debug-background-color: $dodgerblue,

‎client/styles/components/_collection.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
}
99

1010
.collection-metadata {
11-
width: #{1012 / $base-font-size}rem;
11+
max-width: #{1012 / $base-font-size}rem;
12+
width: 100%;
1213
margin: 0 auto;
1314
margin-bottom: #{24 / $base-font-size}rem;
1415
}

‎client/styles/components/_editor.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
.CodeMirror {
2-
@include themify() {
3-
border: 1px solid getThemifyVariable('ide-border-color');
4-
}
52
font-family: Inconsolata, monospace;
63
height: 100%;
74
}
@@ -328,7 +325,10 @@ pre.CodeMirror-line {
328325
height: calc(100% - #{29 / $base-font-size}rem);
329326
width: 100%;
330327
position: absolute;
331-
&.editor-holder--hidden {
328+
@include themify() {
329+
border: 1px solid getThemifyVariable('ide-border-color');
330+
}
331+
&.editor-holder--hidden .CodeMirror {
332332
display: none;
333333
}
334334
}

‎client/styles/components/_forms.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: block;
33
padding-top: #{4 / $base-font-size}rem;
44
width: #{300 / $base-font-size}rem;
5-
font-size: #{9 / $base-font-size}rem;
5+
font-size: #{12 / $base-font-size}rem;
66
text-align: left;
77
@include themify() {
88
color: getThemifyVariable('error-color');

0 commit comments

Comments
 (0)