Skip to content

Commit 8b619c6

Browse files
ghalestriloghalestrilo
authored
Merge branch 'develop' into feature/switch-mobile-desktop
2 parents e88ee4e + 017dd2c commit 8b619c6

16 files changed

+402
-129
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { browserHistory } from 'react-router';
4+
import { withTranslation } from 'react-i18next';
45

56
import ExitIcon from '../../../images/exit.svg';
67

@@ -80,7 +81,7 @@ class Overlay extends React.Component {
8081
<h2 className="overlay__title">{title}</h2>
8182
<div className="overlay__actions">
8283
{actions}
83-
<button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
84+
<button className="overlay__close-button" onClick={this.close} aria-label={this.props.t('Overlay.AriaLabel', { title })}>
8485
<ExitIcon focusable="false" aria-hidden="true" />
8586
</button>
8687
</div>
@@ -101,6 +102,7 @@ Overlay.propTypes = {
101102
ariaLabel: PropTypes.string,
102103
previousPath: PropTypes.string,
103104
isFixedHeight: PropTypes.bool,
105+
t: PropTypes.func.isRequired
104106
};
105107

106108
Overlay.defaultProps = {
@@ -113,4 +115,4 @@ Overlay.defaultProps = {
113115
isFixedHeight: false,
114116
};
115117

116-
export default Overlay;
118+
export default withTranslation()(Overlay);

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import { Helmet } from 'react-helmet';
44
import { connect } from 'react-redux';
55
import { bindActionCreators } from 'redux';
6+
import { withTranslation } from 'react-i18next';
67

78
import * as ProjectActions from '../actions/project';
89
import * as ProjectsActions from '../actions/projects';
@@ -42,9 +43,9 @@ class CollectionList extends React.Component {
4243

4344
getTitle() {
4445
if (this.props.username === this.props.user.username) {
45-
return 'p5.js Web Editor | My collections';
46+
return this.props.t('AddToCollectionList.Title');
4647
}
47-
return `p5.js Web Editor | ${this.props.username}'s collections`;
48+
return this.props.t('AddToCollectionList.AnothersTitle', { anotheruser: this.props.username });
4849
}
4950

5051
handleCollectionAdd = (collection) => {
@@ -74,10 +75,11 @@ class CollectionList extends React.Component {
7475
items={collectionWithSketchStatus}
7576
onAdd={this.handleCollectionAdd}
7677
onRemove={this.handleCollectionRemove}
78+
t={this.props.t}
7779
/>
7880
);
7981
} else {
80-
content = 'No collections';
82+
content = this.props.t('AddToCollectionList.Empty');
8183
}
8284

8385
return (
@@ -135,7 +137,8 @@ CollectionList.propTypes = {
135137
owner: PropTypes.shape({
136138
id: PropTypes.string
137139
})
138-
})
140+
}),
141+
t: PropTypes.func.isRequired
139142
};
140143

141144
CollectionList.defaultProps = {
@@ -164,4 +167,4 @@ function mapDispatchToProps(dispatch) {
164167
);
165168
}
166169

167-
export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
170+
export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import { Helmet } from 'react-helmet';
44
import { connect } from 'react-redux';
55
import { bindActionCreators } from 'redux';
6+
import { withTranslation } from 'react-i18next';
67
// import find from 'lodash/find';
78
import * as ProjectsActions from '../actions/projects';
89
import * as CollectionsActions from '../actions/collections';
@@ -32,9 +33,9 @@ class SketchList extends React.Component {
3233

3334
getSketchesTitle() {
3435
if (this.props.username === this.props.user.username) {
35-
return 'p5.js Web Editor | My sketches';
36+
return this.props.t('AddToCollectionSketchList.Title');
3637
}
37-
return `p5.js Web Editor | ${this.props.username}'s sketches`;
38+
return this.props.t('AddToCollectionSketchList.AnothersTitle', { anotheruser: this.props.username });
3839
}
3940

4041
handleCollectionAdd = (sketch) => {
@@ -68,7 +69,7 @@ class SketchList extends React.Component {
6869
/>
6970
);
7071
} else {
71-
content = 'No collections';
72+
content = this.props.t('AddToCollectionSketchList.NoCollections');
7273
}
7374

7475
return (
@@ -113,6 +114,7 @@ SketchList.propTypes = {
113114
}).isRequired,
114115
addToCollection: PropTypes.func.isRequired,
115116
removeFromCollection: PropTypes.func.isRequired,
117+
t: PropTypes.func.isRequired
116118
};
117119

118120
SketchList.defaultProps = {
@@ -136,4 +138,4 @@ function mapDispatchToProps(dispatch) {
136138
);
137139
}
138140

139-
export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
141+
export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(SketchList));

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Helmet } from 'react-helmet';
4+
import { withTranslation } from 'react-i18next';
45
import { connect } from 'react-redux';
56
import { bindActionCreators } from 'redux';
67
import classNames from 'classnames';
@@ -50,9 +51,9 @@ class CollectionList extends React.Component {
5051

5152
getTitle() {
5253
if (this.props.username === this.props.user.username) {
53-
return 'p5.js Web Editor | My collections';
54+
return this.props.t('CollectionList.Title');
5455
}
55-
return `p5.js Web Editor | ${this.props.username}'s collections`;
56+
return this.props.t('CollectionList.AnothersTitle', { anotheruser: this.props.username });
5657
}
5758

5859
showAddSketches = (collectionId) => {
@@ -78,7 +79,7 @@ class CollectionList extends React.Component {
7879

7980
_renderEmptyTable() {
8081
if (!this.props.loading && this.props.collections.length === 0) {
81-
return (<p className="sketches-table__empty">No collections.</p>);
82+
return (<p className="sketches-table__empty">{this.props.t('CollectionList.NoCollections')}</p>);
8283
}
8384
return null;
8485
}
@@ -88,14 +89,14 @@ class CollectionList extends React.Component {
8889
let buttonLabel;
8990
if (field !== fieldName) {
9091
if (field === 'name') {
91-
buttonLabel = `Sort by ${displayName} ascending.`;
92+
buttonLabel = this.props.t('CollectionList.ButtonLabelAscendingARIA', { displayName });
9293
} else {
93-
buttonLabel = `Sort by ${displayName} descending.`;
94+
buttonLabel = this.props.t('CollectionList.ButtonLabelDescendingARIA', { displayName });
9495
}
9596
} else if (direction === SortingActions.DIRECTION.ASC) {
96-
buttonLabel = `Sort by ${displayName} descending.`;
97+
buttonLabel = this.props.t('CollectionList.ButtonLabelDescendingARIA', { displayName });
9798
} else {
98-
buttonLabel = `Sort by ${displayName} ascending.`;
99+
buttonLabel = this.props.t('CollectionList.ButtonLabelAscendingARIA', { displayName });
99100
}
100101
return buttonLabel;
101102
}
@@ -116,10 +117,10 @@ class CollectionList extends React.Component {
116117
>
117118
<span className={headerClass}>{displayName}</span>
118119
{field === fieldName && direction === SortingActions.DIRECTION.ASC &&
119-
<ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
120+
<ArrowUpIcon role="img" aria-label={this.props.t('CollectionList.DirectionAscendingARIA')} focusable="false" />
120121
}
121122
{field === fieldName && direction === SortingActions.DIRECTION.DESC &&
122-
<ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
123+
<ArrowDownIcon role="img" aria-label={this.props.t('CollectionList.DirectionDescendingARIA')} focusable="false" />
123124
}
124125
</button>
125126
</th>
@@ -142,10 +143,10 @@ class CollectionList extends React.Component {
142143
<table className="sketches-table" summary="table containing all collections">
143144
<thead>
144145
<tr>
145-
{this._renderFieldHeader('name', 'Name')}
146-
{this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
147-
{this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
148-
{this._renderFieldHeader('numItems', mobile ? 'Sketches' : '# sketches')}
146+
{this._renderFieldHeader('name', this.props.t('CollectionList.HeaderName'))}
147+
{this._renderFieldHeader('createdAt', this.props.t('CollectionList.HeaderCreatedAt', { context: mobile ? 'mobile' : '' }))}
148+
{this._renderFieldHeader('updatedAt', this.props.t('CollectionList.HeaderUpdatedAt', { context: mobile ? 'mobile' : '' }))}
149+
{this._renderFieldHeader('numItems', this.props.t('CollectionList.HeaderNumItems', { context: mobile ? 'mobile' : '' }))}
149150
<th scope="col"></th>
150151
</tr>
151152
</thead>
@@ -165,7 +166,7 @@ class CollectionList extends React.Component {
165166
{
166167
this.state.addingSketchesToCollectionId && (
167168
<Overlay
168-
title="Add sketch"
169+
title={this.props.t('CollectionList.AddSketch')}
169170
actions={<SketchSearchbar />}
170171
closeOverlay={this.hideAddSketches}
171172
isFixedHeight
@@ -211,6 +212,7 @@ CollectionList.propTypes = {
211212
id: PropTypes.string
212213
})
213214
}),
215+
t: PropTypes.func.isRequired,
214216
mobile: PropTypes.bool,
215217
};
216218

@@ -242,4 +244,4 @@ function mapDispatchToProps(dispatch) {
242244
);
243245
}
244246

245-
export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
247+
export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));

‎client/modules/IDE/components/CollectionList/CollectionListRow.jsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from 'react';
44
import { connect } from 'react-redux';
55
import { Link } from 'react-router';
66
import { bindActionCreators } from 'redux';
7+
import { withTranslation } from 'react-i18next';
78
import * as ProjectActions from '../../actions/project';
89
import * as CollectionsActions from '../../actions/collections';
910
import * as IdeActions from '../../actions/ide';
@@ -81,7 +82,7 @@ class CollectionListRowBase extends React.Component {
8182

8283
handleCollectionDelete = () => {
8384
this.closeAll();
84-
if (window.confirm(`Are you sure you want to delete "${this.props.collection.name}"?`)) {
85+
if (window.confirm(this.props.t('Common.DeleteConfirmation', { name: this.props.collection.name }))) {
8586
this.props.deleteCollection(this.props.collection.id);
8687
}
8788
}
@@ -130,7 +131,7 @@ class CollectionListRowBase extends React.Component {
130131
onClick={this.toggleOptions}
131132
onBlur={this.onBlurComponent}
132133
onFocus={this.onFocusComponent}
133-
aria-label="Toggle Open/Close collection options"
134+
aria-label={this.props.t('CollectionListRow.ToggleCollectionOptionsARIA')}
134135
>
135136
<DownFilledTriangleIcon title="Menu" />
136137
</button>
@@ -145,7 +146,7 @@ class CollectionListRowBase extends React.Component {
145146
onBlur={this.onBlurComponent}
146147
onFocus={this.onFocusComponent}
147148
>
148-
Add sketch
149+
{this.props.t('CollectionListRow.AddSketch')}
149150
</button>
150151
</li>
151152
{userIsOwner &&
@@ -156,7 +157,7 @@ class CollectionListRowBase extends React.Component {
156157
onBlur={this.onBlurComponent}
157158
onFocus={this.onFocusComponent}
158159
>
159-
Delete
160+
{this.props.t('CollectionListRow.Delete')}
160161
</button>
161162
</li>}
162163
{userIsOwner &&
@@ -167,7 +168,7 @@ class CollectionListRowBase extends React.Component {
167168
onBlur={this.onBlurComponent}
168169
onFocus={this.onFocusComponent}
169170
>
170-
Rename
171+
{this.props.t('CollectionListRow.Rename')}
171172
</button>
172173
</li>}
173174
</ul>
@@ -248,6 +249,7 @@ CollectionListRowBase.propTypes = {
248249
editCollection: PropTypes.func.isRequired,
249250
onAddSketches: PropTypes.func.isRequired,
250251
mobile: PropTypes.bool,
252+
t: PropTypes.func.isRequired
251253
};
252254

253255
CollectionListRowBase.defaultProps = {
@@ -258,4 +260,4 @@ function mapDispatchToPropsSketchListRow(dispatch) {
258260
return bindActionCreators(Object.assign({}, CollectionsActions, ProjectActions, IdeActions, ToastActions), dispatch);
259261
}
260262

261-
export default connect(null, mapDispatchToPropsSketchListRow)(CollectionListRowBase);
263+
export default withTranslation()(connect(null, mapDispatchToPropsSketchListRow)(CollectionListRowBase));

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { Link } from 'react-router';
4+
import { withTranslation } from 'react-i18next';
45

56
import Icons from './Icons';
67

78
const Item = ({
8-
isAdded, onSelect, name, url
9+
isAdded, onSelect, name, url, t
910
}) => {
1011
const buttonLabel = isAdded ? 'Remove from collection' : 'Add to collection';
1112
return (
@@ -20,7 +21,7 @@ const Item = ({
2021
target="_blank"
2122
onClick={e => e.stopPropogation()}
2223
>
23-
View
24+
{t('QuickAddList.View')}
2425
</Link>
2526
</li>
2627
);
@@ -37,10 +38,11 @@ Item.propTypes = {
3738
url: PropTypes.string.isRequired,
3839
isAdded: PropTypes.bool.isRequired,
3940
onSelect: PropTypes.func.isRequired,
41+
t: PropTypes.func.isRequired
4042
};
4143

4244
const QuickAddList = ({
43-
items, onAdd, onRemove
45+
items, onAdd, onRemove, t
4446
}) => {
4547
const handleAction = (item) => {
4648
if (item.isAdded) {
@@ -53,6 +55,7 @@ const QuickAddList = ({
5355
return (
5456
<ul className="quick-add">{items.map(item => (<Item
5557
key={item.id}
58+
t={t}
5659
{...item}
5760
onSelect={
5861
(event) => {
@@ -70,6 +73,7 @@ QuickAddList.propTypes = {
7073
items: PropTypes.arrayOf(ItemType).isRequired,
7174
onAdd: PropTypes.func.isRequired,
7275
onRemove: PropTypes.func.isRequired,
76+
t: PropTypes.func.isRequired
7377
};
7478

75-
export default QuickAddList;
79+
export default withTranslation()(QuickAddList);

0 commit comments

Comments
 (0)