Skip to content

Commit 972b534

Browse files
catarakcatarak
authored
Merge branch 'develop' into feature/Internationalize-mobile-text
2 parents 4fcf288 + 1d172ad commit 972b534

Some content is hidden

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

45 files changed

+670
-264
lines changed

‎client/components/Nav.jsx

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { logoutUser } from '../modules/User/actions';
1414

1515
import getConfig from '../utils/getConfig';
1616
import { metaKeyName, } from '../utils/metaKey';
17+
import { getIsUserOwner } from '../modules/IDE/selectors/users';
1718

1819
import CaretLeftIcon from '../images/left-arrow.svg';
1920
import TriangleIcon from '../images/down-filled-triangle.svg';
@@ -215,10 +216,6 @@ class Nav extends React.PureComponent {
215216
}
216217
}
217218

218-
isUserOwner() {
219-
return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
220-
}
221-
222219
handleFocus(dropdown) {
223220
this.clearHideTimeout();
224221
this.setDropdown(dropdown);
@@ -283,7 +280,7 @@ class Nav extends React.PureComponent {
283280
{this.props.t('Nav.File.New')}
284281
</button>
285282
</li>
286-
{ getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
283+
{ getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.props.isUserOwner) &&
287284
<li className="nav__dropdown-item">
288285
<button
289286
onClick={this.handleSave}
@@ -566,16 +563,6 @@ class Nav extends React.PureComponent {
566563
</button>
567564
<ul className="nav__dropdown">
568565

569-
<li className="nav__dropdown-item">
570-
<button
571-
onFocus={this.handleFocusForLang}
572-
onBlur={this.handleBlur}
573-
value="it"
574-
onClick={e => this.handleLangSelection(e)}
575-
>
576-
Italian (Test Fallback)
577-
</button>
578-
</li>
579566
<li className="nav__dropdown-item">
580567
<button
581568
onFocus={this.handleFocusForLang}
@@ -807,6 +794,7 @@ Nav.propTypes = {
807794
t: PropTypes.func.isRequired,
808795
setLanguage: PropTypes.func.isRequired,
809796
language: PropTypes.string.isRequired,
797+
isUserOwner: PropTypes.bool.isRequired
810798
};
811799

812800
Nav.defaultProps = {
@@ -828,7 +816,8 @@ function mapStateToProps(state) {
828816
user: state.user,
829817
unsavedChanges: state.ide.unsavedChanges,
830818
rootFile: state.files.filter(file => file.name === 'root')[0],
831-
language: state.preferences.language
819+
language: state.preferences.language,
820+
isUserOwner: getIsUserOwner(state)
832821
};
833822
}
834823

‎client/components/NavBasic.jsx

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

45
import LogoIcon from '../images/p5js-logo-small.svg';
56
import ArrowIcon from '../images/triangle-arrow-left.svg';
@@ -14,7 +15,7 @@ class NavBasic extends React.PureComponent {
1415
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
1516
<ul className="nav__items-left">
1617
<li className="nav__item-logo">
17-
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
18+
<LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
1819
</li>
1920
{ this.props.onBack && (
2021
<li className="nav__item">
@@ -34,6 +35,7 @@ class NavBasic extends React.PureComponent {
3435

3536
NavBasic.propTypes = {
3637
onBack: PropTypes.func,
38+
t: PropTypes.func.isRequired
3739
};
3840

39-
export default NavBasic;
41+
export default withTranslation()(NavBasic);

‎client/components/mobile/MobileScreen.jsx

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import styled from 'styled-components';
4+
import { remSize } from '../../theme';
35

4-
const Screen = ({ children, fullscreen }) => (
5-
<div className={fullscreen && 'fullscreen-preview'}>
6+
const ScreenWrapper = styled.div`
7+
.toast {
8+
font-size: ${remSize(12)};
9+
padding: ${remSize(8)};
10+
11+
border-radius: ${remSize(4)};
12+
width: 92%;
13+
top: unset;
14+
min-width: unset;
15+
bottom: ${remSize(64)}
16+
}
17+
`;
18+
19+
const Screen = ({ children, fullscreen, slimheader }) => (
20+
<ScreenWrapper className={fullscreen && 'fullscreen-preview'} slimheader={slimheader}>
621
{children}
7-
</div>
22+
</ScreenWrapper>
823
);
924

1025
Screen.defaultProps = {
11-
fullscreen: false
26+
fullscreen: false,
27+
slimheader: false,
1228
};
1329

1430
Screen.propTypes = {
1531
children: PropTypes.node.isRequired,
16-
fullscreen: PropTypes.bool
32+
fullscreen: PropTypes.bool,
33+
slimheader: PropTypes.bool
1734
};
1835

1936
export default Screen;

‎client/modules/App/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class App extends React.Component {
4141
render() {
4242
return (
4343
<div className="app">
44-
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
44+
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
4545
{this.props.children}
4646
</div>
4747
);

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,6 @@ export function dropzoneSendingCallback(file, xhr, formData) {
7777
Object.keys(file.postData).forEach((key) => {
7878
formData.append(key, file.postData[key]);
7979
});
80-
formData.append('Content-type', file.type);
81-
formData.append('Content-length', '');
82-
formData.append('acl', 'public-read');
8380
}
8481
};
8582
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,13 @@ class AssetListRowBase extends React.Component {
6161
handleAssetDelete = () => {
6262
const { key, name } = this.props.asset;
6363
this.closeOptions();
64-
if (window.confirm(`Are you sure you want to delete "${name}"?`)) {
64+
if (window.confirm(this.props.t('Common.DeleteConfirmation', { name }))) {
6565
this.props.deleteAssetRequest(key);
6666
}
6767
}
6868

6969
render() {
70-
const { asset, username } = this.props;
70+
const { asset, username, t } = this.props;
7171
const { optionsOpen } = this.state;
7272
return (
7373
<tr className="asset-table__row" key={asset.key}>
@@ -86,7 +86,7 @@ class AssetListRowBase extends React.Component {
8686
onClick={this.toggleOptions}
8787
onBlur={this.onBlurComponent}
8888
onFocus={this.onFocusComponent}
89-
aria-label={this.props.t('AssetList.ToggleOpenCloseARIA')}
89+
aria-label={t('AssetList.ToggleOpenCloseARIA')}
9090
>
9191
<DownFilledTriangleIcon focusable="false" aria-hidden="true" />
9292
</button>
@@ -101,7 +101,7 @@ class AssetListRowBase extends React.Component {
101101
onBlur={this.onBlurComponent}
102102
onFocus={this.onFocusComponent}
103103
>
104-
{this.props.t('AssetList.Delete')}
104+
{t('AssetList.Delete')}
105105
</button>
106106
</li>
107107
<li>
@@ -112,7 +112,7 @@ class AssetListRowBase extends React.Component {
112112
onFocus={this.onFocusComponent}
113113
className="asset-table__action-option"
114114
>
115-
{this.props.t('AssetList.OpenNewTab')}
115+
{t('AssetList.OpenNewTab')}
116116
</Link>
117117
</li>
118118
</ul>}
@@ -194,7 +194,7 @@ class AssetList extends React.Component {
194194
</tr>
195195
</thead>
196196
<tbody>
197-
{assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)}
197+
{assetList.map(asset => <AssetListRow asset={asset} key={asset.key} t={t} />)}
198198
</tbody>
199199
</table>}
200200
</article>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ class CollectionList extends React.Component {
140140
{this._renderLoader()}
141141
{this._renderEmptyTable()}
142142
{this.hasCollections() &&
143-
<table className="sketches-table" summary="table containing all collections">
143+
<table className="sketches-table" summary={this.props.t('CollectionList.TableSummary')}>
144144
<thead>
145145
<tr>
146146
{this._renderFieldHeader('name', this.props.t('CollectionList.HeaderName'))}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import { withTranslation } from 'react-i18next';
3+
import { useTranslation } from 'react-i18next';
44
import i18next from 'i18next';
55
import EditIcon from '../../../images/pencil.svg';
66

@@ -22,7 +22,7 @@ function EditableInput({
2222
isEditing ? 'is-editing' : 'is-not-editing'
2323
} editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
2424
const inputRef = React.createRef();
25-
25+
const { t } = useTranslation();
2626
React.useEffect(() => {
2727
if (isEditing) {
2828
inputRef.current.focus();
@@ -60,7 +60,7 @@ function EditableInput({
6060
<button
6161
className="editable-input__label"
6262
onClick={beginEditing}
63-
aria-label={this.props.t('EditableInput.EditValue', { display: displayValue })}
63+
aria-label={t('EditableInput.EditValue', { display: displayValue })}
6464
>
6565
<span>{displayValue}</span>
6666
<EditIcon
@@ -101,7 +101,6 @@ EditableInput.propTypes = {
101101
onChange: PropTypes.func.isRequired,
102102
validate: PropTypes.func,
103103
value: PropTypes.string,
104-
t: PropTypes.func.isRequired
105104
};
106105

107-
export default withTranslation()(EditableInput);
106+
export default EditableInput;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
4343
import RightArrowIcon from '../../../images/right-arrow.svg';
4444
import LeftArrowIcon from '../../../images/left-arrow.svg';
4545
import { getHTMLFile } from '../reducers/files';
46+
import { getIsUserOwner } from '../selectors/users';
4647

4748
import * as FileActions from '../actions/files';
4849
import * as IDEActions from '../actions/ide';
@@ -411,7 +412,7 @@ Editor.propTypes = {
411412
isExpanded: PropTypes.bool.isRequired,
412413
collapseSidebar: PropTypes.func.isRequired,
413414
expandSidebar: PropTypes.func.isRequired,
414-
isUserOwner: PropTypes.bool,
415+
isUserOwner: PropTypes.bool.isRequired,
415416
clearConsole: PropTypes.func.isRequired,
416417
showRuntimeErrorWarning: PropTypes.func.isRequired,
417418
hideRuntimeErrorWarning: PropTypes.func.isRequired,
@@ -421,7 +422,6 @@ Editor.propTypes = {
421422
};
422423

423424
Editor.defaultProps = {
424-
isUserOwner: false,
425425
consoleEvents: [],
426426
};
427427

@@ -446,8 +446,9 @@ function mapStateToProps(state) {
446446
...state.ide,
447447
...state.project,
448448
...state.editorAccessibility,
449-
isExpanded: state.ide.consoleIsExpanded,
450-
projectSavedTime: state.project.updatedAt
449+
isExpanded: state.ide.sidebarIsExpanded,
450+
projectSavedTime: state.project.updatedAt,
451+
isUserOwner: getIsUserOwner(state)
451452
};
452453
}
453454

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,19 @@ class ErrorModal extends React.Component {
1515
);
1616
}
1717

18+
oauthError() {
19+
const { t, service } = this.props;
20+
const serviceLabels = {
21+
github: 'GitHub',
22+
google: 'Google'
23+
};
24+
return (
25+
<p>
26+
{t('ErrorModal.LinkMessage', { serviceauth: serviceLabels[service] })}
27+
</p>
28+
);
29+
}
30+
1831
staleSession() {
1932
return (
2033
<p>
@@ -42,6 +55,8 @@ class ErrorModal extends React.Component {
4255
return this.staleSession();
4356
} else if (this.props.type === 'staleProject') {
4457
return this.staleProject();
58+
} else if (this.props.type === 'oauthError') {
59+
return this.oauthError();
4560
}
4661
})()}
4762
</div>
@@ -52,7 +67,12 @@ class ErrorModal extends React.Component {
5267
ErrorModal.propTypes = {
5368
type: PropTypes.string.isRequired,
5469
closeModal: PropTypes.func.isRequired,
55-
t: PropTypes.func.isRequired
70+
t: PropTypes.func.isRequired,
71+
service: PropTypes.string
72+
};
73+
74+
ErrorModal.defaultProps = {
75+
service: ''
5676
};
5777

5878
export default withTranslation()(ErrorModal);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,23 @@ class NewFileModal extends React.Component {
2020
constructor(props) {
2121
super(props);
2222
this.focusOnModal = this.focusOnModal.bind(this);
23+
this.handleOutsideClick = this.handleOutsideClick.bind(this);
2324
}
2425

2526
componentDidMount() {
2627
this.focusOnModal();
28+
document.addEventListener('click', this.handleOutsideClick, false);
29+
}
30+
31+
componentWillUnmount() {
32+
document.removeEventListener('click', this.handleOutsideClick, false);
33+
}
34+
35+
handleOutsideClick(e) {
36+
// ignore clicks on the component itself
37+
if (e.path.includes(this.modal)) return;
38+
39+
this.props.closeNewFileModal();
2740
}
2841

2942
focusOnModal() {

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,25 @@ import NewFolderForm from './NewFolderForm';
88
import ExitIcon from '../../../images/exit.svg';
99

1010
class NewFolderModal extends React.Component {
11+
constructor(props) {
12+
super(props);
13+
this.handleOutsideClick = this.handleOutsideClick.bind(this);
14+
}
15+
1116
componentDidMount() {
1217
this.newFolderModal.focus();
18+
document.addEventListener('click', this.handleOutsideClick, false);
19+
}
20+
21+
componentWillUnmount() {
22+
document.removeEventListener('click', this.handleOutsideClick, false);
23+
}
24+
25+
handleOutsideClick(e) {
26+
// ignore clicks on the component itself
27+
if (e.path.includes(this.newFolderModal)) return;
28+
29+
this.props.closeModal();
1330
}
1431

1532
render() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Item = ({
1919
className="quick-add__item-view"
2020
to={url}
2121
target="_blank"
22-
onClick={e => e.stopPropogation()}
22+
onClick={e => e.stopPropagation()}
2323
>
2424
{t('QuickAddList.View')}
2525
</Link>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@ class SketchList extends React.Component {
433433
{this._renderLoader()}
434434
{this._renderEmptyTable()}
435435
{this.hasSketches() &&
436-
<table className="sketches-table" summary="table containing all saved projects">
436+
<table className="sketches-table" summary={this.props.t('SketchList.TableSummary')}>
437437
<thead>
438438
<tr>
439439
{this._renderFieldHeader('name', this.props.t('SketchList.HeaderName'))}

0 commit comments

Comments
 (0)