Skip to content

Commit d3e0872

Browse files
raclimraclim
authored
Merge branch 'develop' into piyush/refactor-react-redux-assetsize-component
2 parents dafe2d5 + 6715528 commit d3e0872

Some content is hidden

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

51 files changed

+263
-404
lines changed

‎client/components/AddRemoveButton.jsx

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎client/components/NavBasic.jsx

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎client/components/OverlayManager.jsx

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎client/components/PreviewNav.jsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
1212
<nav className="nav preview-nav">
1313
<div className="nav__items-left">
1414
<div className="nav__item-logo">
15-
<LogoIcon
16-
role="img"
17-
aria-label={t('Common.p5logoARIA')}
18-
focusable="false"
19-
className="svg__logo"
20-
/>
15+
<Link to={`/${owner.username}/sketches`}>
16+
<LogoIcon
17+
role="img"
18+
aria-label={t('Common.p5logoARIA')}
19+
focusable="false"
20+
className="svg__logo"
21+
/>
22+
</Link>
2123
</div>
2224
<Link
2325
className="nav__item"

‎client/constants.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
// multiple files
33
export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
44
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
5-
65
export const START_SKETCH = 'START_SKETCH';
76
export const STOP_SKETCH = 'STOP_SKETCH';
87

‎client/i18n-test.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import i18n from 'i18next';
22
import { initReactI18next } from 'react-i18next';
3-
43
import translations from '../translations/locales/en-US/translations.json';
54

65
i18n.use(initReactI18next).init({

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,12 @@ function EditableInput({
2828
const { t } = useTranslation();
2929
React.useEffect(() => {
3030
if (isEditing) {
31-
inputRef.current?.focus();
31+
const inputElement = inputRef.current;
32+
inputElement.setSelectionRange(
33+
inputElement.value.length,
34+
inputElement.value.length
35+
);
36+
inputElement.focus();
3237
}
3338
}, [isEditing]);
3439
React.useEffect(() => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const EditorContainer = styled.div`
99
transform: ${(props) =>
1010
props.expanded ? 'translateX(50%)' : 'translateX(0)'};
1111
12-
> header {
12+
> div {
1313
display: flex;
1414
${prop('MobilePanel.secondary')}
1515
> span {

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,10 @@ class Editor extends React.Component {
208208
if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
209209
this.showHint(_cm);
210210
}
211+
if (e.key === 'Escape') {
212+
e.preventDefault();
213+
this._cm.getInputField().blur();
214+
}
211215
});
212216

213217
this._cm.getWrapperElement().style[
@@ -235,6 +239,16 @@ class Editor extends React.Component {
235239

236240
componentDidUpdate(prevProps) {
237241
if (this.props.file.id !== prevProps.file.id) {
242+
const fileMode = this.getFileMode(this.props.file.name);
243+
if (fileMode === 'javascript') {
244+
// Define the new Emmet configuration based on the file mode
245+
const emmetConfig = {
246+
preview: ['html'],
247+
markTagPairs: false,
248+
autoRenameTags: true
249+
};
250+
this._cm.setOption('emmet', emmetConfig);
251+
}
238252
const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
239253
this._docs[prevProps.file.id] = oldDoc;
240254
this._cm.focus();
@@ -513,7 +527,7 @@ class Editor extends React.Component {
513527
{(matches) =>
514528
matches ? (
515529
<section className={editorSectionClass}>
516-
<header className="editor__header">
530+
<div className="editor__header">
517531
<button
518532
aria-label={this.props.t('Editor.OpenSketchARIA')}
519533
className="sidebar__contract"
@@ -538,7 +552,7 @@ class Editor extends React.Component {
538552
</span>
539553
<Timer />
540554
</div>
541-
</header>
555+
</div>
542556
<article
543557
ref={(element) => {
544558
this.codemirrorContainer = element;
@@ -555,7 +569,7 @@ class Editor extends React.Component {
555569
</section>
556570
) : (
557571
<EditorContainer expanded={this.props.isExpanded}>
558-
<header>
572+
<>
559573
<IconButton
560574
onClick={this.props.expandSidebar}
561575
icon={FolderIcon}
@@ -564,7 +578,7 @@ class Editor extends React.Component {
564578
{this.props.file.name}
565579
<UnsavedChangesIndicator />
566580
</span>
567-
</header>
581+
</>
568582
<section>
569583
<EditorHolder
570584
ref={(element) => {

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as FileActions from '../actions/files';
1010
import DownArrowIcon from '../../../images/down-filled-triangle.svg';
1111
import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
1212
import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
13-
import FileIcon from '../../../images/file.svg';
13+
import FileTypeIcon from './FileTypeIcon';
1414

1515
function parseFileName(name) {
1616
const nameArray = name.split('.');
@@ -256,6 +256,7 @@ class FileNode extends React.Component {
256256
const isRoot = this.props.name === 'root';
257257

258258
const { t } = this.props;
259+
const { extension } = parseFileName(this.props.name);
259260

260261
return (
261262
<div className={itemClass}>
@@ -267,7 +268,11 @@ class FileNode extends React.Component {
267268
<span className="file-item__spacer"></span>
268269
{isFile && (
269270
<span className="sidebar__file-item-icon">
270-
<FileIcon focusable="false" aria-hidden="true" />
271+
<FileTypeIcon
272+
fileExtension={extension}
273+
focusable="false"
274+
aria-hidden="true"
275+
/>
271276
</span>
272277
)}
273278
{isFolder && (

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { IoLogoHtml5, IoLogoCss3, IoLogoJavascript } from 'react-icons/io';
4+
import { TbFileTypeXml, TbTxt, TbCsv } from 'react-icons/tb';
5+
import { VscJson } from 'react-icons/vsc';
6+
import FileIcon from '../../../images/file.svg';
7+
8+
export default function FileTypeIcon({ fileExtension }) {
9+
switch (fileExtension) {
10+
case '.html':
11+
return (
12+
<span>
13+
<IoLogoHtml5 />
14+
</span>
15+
);
16+
case '.css':
17+
return (
18+
<span>
19+
<IoLogoCss3 />
20+
</span>
21+
);
22+
case '.js':
23+
return (
24+
<span>
25+
<IoLogoJavascript />
26+
</span>
27+
);
28+
case '.json':
29+
return (
30+
<span>
31+
<VscJson />
32+
</span>
33+
);
34+
case '.xml':
35+
return (
36+
<span>
37+
<TbFileTypeXml />
38+
</span>
39+
);
40+
case '.txt':
41+
return (
42+
<span>
43+
<TbTxt />
44+
</span>
45+
);
46+
case '.csv':
47+
return (
48+
<span>
49+
<TbCsv />
50+
</span>
51+
);
52+
default:
53+
return <FileIcon focusable="false" aria-hidden="true" />;
54+
}
55+
}
56+
57+
FileTypeIcon.propTypes = {
58+
fileExtension: PropTypes.string.isRequired
59+
};

‎client/modules/IDE/components/Header/MobileNav.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,9 @@ const MobileNav = () => {
238238
<Title>
239239
<h1>{title === project.name ? <ProjectName /> : title}</h1>
240240
{project?.owner && title === project.name && (
241-
<h5>by {project?.owner?.username}</h5>
241+
<Link to={`/${project.owner.username}/sketches`}>
242+
by {project?.owner?.username}
243+
</Link>
242244
)}
243245
</Title>
244246
{/* check if the user is in login page */}

‎client/modules/IDE/components/Header/Nav.jsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const ProjectMenu = () => {
114114
const isUserOwner = useSelector(getIsUserOwner);
115115
const project = useSelector((state) => state.project);
116116
const user = useSelector((state) => state.user);
117-
117+
const userSketches = `/${user.username}/sketches`;
118118
const isUnsaved = !project?.id;
119119

120120
const rootFile = useSelector(selectRootFile);
@@ -137,12 +137,25 @@ const ProjectMenu = () => {
137137
return (
138138
<ul className="nav__items-left">
139139
<li className="nav__item-logo">
140-
<LogoIcon
141-
role="img"
142-
aria-label={t('Common.p5logoARIA')}
143-
focusable="false"
144-
className="svg__logo"
145-
/>
140+
{user && user.username !== undefined ? (
141+
<Link to={userSketches}>
142+
<LogoIcon
143+
role="img"
144+
aria-label={t('Common.p5logoARIA')}
145+
focusable="false"
146+
className="svg__logo"
147+
/>
148+
</Link>
149+
) : (
150+
<a href="https://p5js.org">
151+
<LogoIcon
152+
role="img"
153+
aria-label={t('Common.p5logoARIA')}
154+
focusable="false"
155+
className="svg__logo"
156+
/>
157+
</a>
158+
)}
146159
</li>
147160
<NavDropdownMenu id="file" title={t('Nav.File.Title')}>
148161
<NavMenuItem onClick={newSketch}>{t('Nav.File.New')}</NavMenuItem>
@@ -270,7 +283,7 @@ const UnauthenticatedUserMenu = () => {
270283
</span>
271284
</Link>
272285
</li>
273-
<span className="nav__item-or">{t('Nav.LoginOr')}</span>
286+
<li className="nav__item-or">{t('Nav.LoginOr')}</li>
274287
<li className="nav__item">
275288
<Link to="/signup" className="nav__auth-button">
276289
<span className="nav__item-header" title="SignUp">

0 commit comments

Comments
 (0)