Skip to content

Commit 6af4649

Browse files
raclimraclim
authored
Merge branch 'develop' into piyush/refactor-createRedirectWithUsername
2 parents 0498747 + 934fb07 commit 6af4649

Some content is hidden

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

49 files changed

+491
-221
lines changed

‎client/common/useKeyDownHandlers.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ export default function useKeyDownHandlers(keyHandlers) {
3333
const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
3434
const isCtrl = isMac ? e.metaKey : e.ctrlKey;
3535
if (e.shiftKey && isCtrl) {
36-
handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
36+
handlers.current[
37+
`ctrl-shift-${
38+
/^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
39+
}`
40+
]?.(e);
3741
} else if (isCtrl) {
3842
handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
3943
}

‎client/components/PreviewNav.jsx

+8-6
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/components/SkipLink.jsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { useState } from 'react';
2+
import classNames from 'classnames';
3+
import PropTypes from 'prop-types';
4+
import { useTranslation } from 'react-i18next';
5+
6+
const SkipLink = ({ targetId, text }) => {
7+
const [focus, setFocus] = useState(false);
8+
const { t } = useTranslation();
9+
const handleFocus = () => {
10+
setFocus(true);
11+
};
12+
13+
const handleBlur = () => {
14+
setFocus(false);
15+
};
16+
const linkClasses = classNames('skip_link', { focus });
17+
18+
return (
19+
<a
20+
href={`#${targetId}`}
21+
className={linkClasses}
22+
onFocus={handleFocus}
23+
onBlur={handleBlur}
24+
>
25+
{t(`SkipLink.${text}`)}
26+
</a>
27+
);
28+
};
29+
30+
SkipLink.propTypes = {
31+
targetId: PropTypes.string.isRequired,
32+
text: PropTypes.string.isRequired
33+
};
34+
35+
export default SkipLink;

‎client/constants.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,6 @@ export const SET_BLOB_URL = 'SET_BLOB_URL';
5252
export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
5353
export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
5454

55-
export const CONSOLE_EVENT = 'CONSOLE_EVENT';
56-
export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
5755
export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
5856
export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
5957

@@ -140,3 +138,6 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
140138
export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
141139

142140
export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';
141+
142+
export const CONSOLE_EVENT = 'CONSOLE_EVENT';
143+
export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';

‎client/index.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Routing from './routes';
99
import ThemeProvider from './modules/App/components/ThemeProvider';
1010
import Loader from './modules/App/components/loader';
1111
import './i18n';
12+
import SkipLink from './components/SkipLink';
1213

1314
require('./styles/main.scss');
1415

@@ -23,6 +24,7 @@ const App = () => (
2324
<Provider store={store}>
2425
<ThemeProvider>
2526
<Router history={browserHistory}>
27+
<SkipLink targetId="play-sketch" text="PlaySketch" />
2628
<Routing />
2729
</Router>
2830
</ThemeProvider>

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

+1-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1 @@
1-
import * as ActionTypes from '../../../constants';
2-
3-
export function clearConsole() {
4-
return {
5-
type: ActionTypes.CLEAR_CONSOLE
6-
};
7-
}
8-
9-
export function dispatchConsoleEvent(messages) {
10-
return {
11-
type: ActionTypes.CONSOLE_EVENT,
12-
event: messages
13-
};
14-
}
1+
export { dispatchConsoleEvent, clearConsole } from '../reducers/console';

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

+7-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import PropTypes from 'prop-types';
21
import React from 'react';
3-
import { connect } from 'react-redux';
2+
import { useSelector } from 'react-redux';
43
import prettyBytes from 'pretty-bytes';
54

65
import getConfig from '../../../utils/getConfig';
@@ -18,7 +17,11 @@ const formatPercent = (percent) => {
1817
};
1918

2019
/* Eventually, this copy should be Total / 250 MB Used */
21-
const AssetSize = ({ totalSize }) => {
20+
const AssetSize = () => {
21+
const totalSize = useSelector(
22+
(state) => state.user.totalSize || state.assets.totalSize
23+
);
24+
2225
if (totalSize === undefined) {
2326
return null;
2427
}
@@ -40,15 +43,4 @@ const AssetSize = ({ totalSize }) => {
4043
);
4144
};
4245

43-
AssetSize.propTypes = {
44-
totalSize: PropTypes.number.isRequired
45-
};
46-
47-
function mapStateToProps(state) {
48-
return {
49-
user: state.user,
50-
totalSize: state.user.totalSize || state.assets.totalSize
51-
};
52-
}
53-
54-
export default connect(mapStateToProps)(AssetSize);
46+
export default AssetSize;

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

+78-4
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,88 @@ import { connect } from 'react-redux';
44
import { Link } from 'react-router-dom';
55
import { bindActionCreators } from 'redux';
66
import { withTranslation } from 'react-i18next';
7+
import styled from 'styled-components';
78
import MenuItem from '../../../../components/Dropdown/MenuItem';
89
import TableDropdown from '../../../../components/Dropdown/TableDropdown';
910
import * as ProjectActions from '../../actions/project';
1011
import * as CollectionsActions from '../../actions/collections';
1112
import * as IdeActions from '../../actions/ide';
1213
import * as ToastActions from '../../actions/toast';
1314
import dates from '../../../../utils/formatDate';
15+
import { remSize, prop } from '../../../../theme';
1416

17+
const SketchsTableRow = styled.tr`
18+
&&& {
19+
margin: ${remSize(10)};
20+
height: ${remSize(72)};
21+
font-size: ${remSize(16)};
22+
}
23+
&:nth-child(odd) {
24+
background: ${prop('tableRowStripeColor')};
25+
}
26+
27+
> th:nth-child(1) {
28+
padding-left: ${remSize(12)};
29+
}
30+
31+
> td {
32+
padding-left: ${remSize(8)};
33+
}
34+
35+
a {
36+
color: ${prop('primaryTextColor')};
37+
}
38+
39+
&.is-deleted > * {
40+
font-style: italic;
41+
}
42+
@media (max-width: 770px) {
43+
&&& {
44+
margin: 0;
45+
position: relative;
46+
display: flex;
47+
flex-wrap: wrap;
48+
padding: ${remSize(15)};
49+
height: fit-content;
50+
gap: ${remSize(8)};
51+
border: 1px solid ${prop('modalBorderColor')};
52+
background-color: ${prop('searchBackgroundColor')};
53+
> th {
54+
padding-left: 0;
55+
width: 100%;
56+
font-weight: bold;
57+
margin-bottom: ${remSize(6)};
58+
}
59+
> td {
60+
padding-left: 0;
61+
width: 30%;
62+
font-size: ${remSize(14)};
63+
color: ${prop('modalBorderColor')};
64+
}
65+
}
66+
}
67+
`;
68+
const SketchesTableName = styled.span`
69+
&&& {
70+
display: flex;
71+
align-items: center;
72+
}
73+
`;
74+
const SketchlistDropdownColumn = styled.td`
75+
&&& {
76+
position: relative;
77+
width: ${remSize(60)};
78+
}
79+
@media (max-width: 770px) {
80+
&&& {
81+
position: absolute;
82+
top: 0;
83+
right: ${remSize(4)};
84+
width: auto !important;
85+
margin: ${remSize(8)};
86+
}
87+
}
88+
`;
1589
const formatDateCell = (date, mobile = false) =>
1690
dates.format(date, { showTime: !mobile });
1791

@@ -126,18 +200,18 @@ const CollectionListRowBase = (props) => {
126200
const { collection, mobile } = props;
127201

128202
return (
129-
<tr className="sketches-table__row" key={collection.id}>
203+
<SketchsTableRow key={collection.id}>
130204
<th scope="row">
131-
<span className="sketches-table__name">{renderCollectionName()}</span>
205+
<SketchesTableName>{renderCollectionName()}</SketchesTableName>
132206
</th>
133207
<td>{formatDateCell(collection.createdAt, mobile)}</td>
134208
<td>{formatDateCell(collection.updatedAt, mobile)}</td>
135209
<td>
136210
{mobile && 'sketches: '}
137211
{(collection.items || []).length}
138212
</td>
139-
<td className="sketch-list__dropdown-column">{renderActions()}</td>
140-
</tr>
213+
<SketchlistDropdownColumn>{renderActions()}</SketchlistDropdownColumn>
214+
</SketchsTableRow>
141215
);
142216
};
143217

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

+10
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,16 @@ class Editor extends React.Component {
239239

240240
componentDidUpdate(prevProps) {
241241
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+
}
242252
const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
243253
this._docs[prevProps.file.id] = oldDoc;
244254
this._cm.focus();

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -187,11 +187,19 @@ class FileNode extends React.Component {
187187
if (
188188
hasEmptyFilename ||
189189
hasNoExtension ||
190-
notSameExtension ||
191190
hasOnlyExtension ||
192191
hasExtensionIfFolder
193192
) {
194193
this.setUpdatedName(currentName);
194+
} else if (notSameExtension) {
195+
const userResponse = window.confirm(
196+
'Are you sure you want to change the file extension?'
197+
);
198+
if (userResponse) {
199+
this.saveUpdatedFileName();
200+
} else {
201+
this.setUpdatedName(currentName);
202+
}
195203
} else {
196204
this.saveUpdatedFileName();
197205
}

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

+22-11
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>
@@ -193,9 +206,7 @@ const ProjectMenu = () => {
193206
<NavDropdownMenu id="edit" title={t('Nav.Edit.Title')}>
194207
<NavMenuItem onClick={cmRef.current?.tidyCode}>
195208
{t('Nav.Edit.TidyCode')}
196-
<span className="nav__keyboard-shortcut">
197-
{metaKeyName}+{'\u21E7'}+F
198-
</span>
209+
<span className="nav__keyboard-shortcut">{metaKeyName}+Shift+F</span>
199210
</NavMenuItem>
200211
<NavMenuItem onClick={cmRef.current?.showFind}>
201212
{t('Nav.Edit.Find')}
@@ -220,7 +231,7 @@ const ProjectMenu = () => {
220231
<NavMenuItem onClick={() => dispatch(stopSketch())}>
221232
{t('Nav.Sketch.Stop')}
222233
<span className="nav__keyboard-shortcut">
223-
{'\u21E7'}+{metaKeyName}+Enter
234+
Shift+{metaKeyName}+Enter
224235
</span>
225236
</NavMenuItem>
226237
</NavDropdownMenu>

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

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const Toolbar = (props) => {
6161
</button>
6262
<button
6363
className={playButtonClass}
64+
id="play-sketch"
6465
onClick={() => {
6566
props.syncFileContent();
6667
dispatch(startSketch());

0 commit comments

Comments
 (0)