Skip to content

Commit c5ffc8b

Browse files
raclimraclim
authored
Merge branch 'develop' into fixes-#2221/random-character-getting-deleted
2 parents 8106c0c + c1b3f7c commit c5ffc8b

Some content is hidden

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

42 files changed

+186
-377
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/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: 20 additions & 7 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>

‎client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -473,12 +473,16 @@ exports[`Nav renders editor version for desktop 1`] = `
473473
<li
474474
class="nav__item-logo"
475475
>
476-
<test-file-stub
477-
aria-label="p5.js Logo"
478-
classname="svg__logo"
479-
focusable="false"
480-
role="img"
481-
/>
476+
<a
477+
href="https://p5js.org"
478+
>
479+
<test-file-stub
480+
aria-label="p5.js Logo"
481+
classname="svg__logo"
482+
focusable="false"
483+
role="img"
484+
/>
485+
</a>
482486
</li>
483487
<li
484488
class="nav__item"

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
4-
import CheckIcon from '../../../../images/check_encircled.svg';
53
import CloseIcon from '../../../../images/close.svg';
4+
import CheckIcon from '../../../../images/check_encircled.svg';
65

76
const Icons = ({ isAdded }) => {
87
const classes = [
@@ -21,12 +20,6 @@ const Icons = ({ isAdded }) => {
2120
focusable="false"
2221
/>
2322
<CheckIcon
24-
className="quick-add__in-icon"
25-
role="img"
26-
aria-label="Descending"
27-
focusable="false"
28-
/>
29-
<CloseIcon
3023
className="quick-add__add-icon"
3124
role="img"
3225
aria-label="Descending"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const CollectionCreate = () => {
7171
value={description}
7272
onChange={(e) => setDescription(e.target.value)}
7373
placeholder={t('CollectionCreate.DescriptionPlaceholder')}
74-
rows="4"
74+
rows="6"
7575
/>
7676
</p>
7777
<Button type="submit" disabled={invalid}>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function LoginForm() {
3434
type="text"
3535
id="email"
3636
autoComplete="username"
37+
autoCapitalize="none"
3738
{...field.input}
3839
/>
3940
{field.meta.touched && field.meta.error && (

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ function SignupForm() {
6464
type="text"
6565
id="username"
6666
autoComplete="username"
67+
autoCapitalize="none"
6768
{...field.input}
6869
/>
6970
{field.meta.touched && field.meta.error && (

‎client/styles/components/_collection-create.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22

33
.collection-create {
44
padding: #{math.div(24, $base-font-size)}rem;
5+
6+
@media (max-width: 650px) {
7+
.form__input {
8+
min-width: unset;
9+
}
10+
}
511
}

‎client/styles/components/_collection.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,10 @@
106106
@extend %dropdown-open-right;
107107
padding: #{math.div(20, $base-font-size)}rem;
108108
width: #{math.div(350, $base-font-size)}rem;
109+
@media only screen and (max-width: 520px) {
110+
max-width: 90vw;
111+
right: -#{120 / $base-font-size}rem;
112+
}
109113
}
110114

111115
.collection-content {

0 commit comments

Comments
 (0)