Merge branch 'develop' into issue-#2653

Author: raclim

client/common/useKeyDownHandlers.js

@@ -33,7 +33,11 @@ export default function useKeyDownHandlers(keyHandlers) {
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
-      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+      handlers.current[
+        `ctrl-shift-${
+          /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
+        }`
+      ]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/components/SkipLink.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const SkipLink = ({ targetId, text }) => {
+  const [focus, setFocus] = useState(false);
+  const { t } = useTranslation();
+  const handleFocus = () => {
+    setFocus(true);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+  };
+  const linkClasses = classNames('skip_link', { focus });
+
+  return (
+    <a
+      href={`#${targetId}`}
+      className={linkClasses}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {t(`SkipLink.${text}`)}
+    </a>
+  );
+};
+
+SkipLink.propTypes = {
+  targetId: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+export default SkipLink;

client/components/createRedirectWithUsername.jsx

@@ -1,29 +1,24 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import browserHistory from '../browserHistory';
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
-  React.useEffect(() => {
-    if (username == null) {
-      return;
+const RedirectToUser = ({ url = '/:username/sketches' }) => {
+  const history = useHistory();
+  const username = useSelector((state) =>
+    state.user ? state.user.username : null
+  );
+  useEffect(() => {
+    if (username) {
+      history.replace(url.replace(':username', username));
     }
-
-    browserHistory.replace(url.replace(':username', username));
-  }, [username]);
+  }, [history, url, username]);
 
   return null;
 };
 
-function mapStateToProps(state) {
-  return {
-    username: state.user ? state.user.username : null
-  };
-}
-
-const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
-
-const createRedirectWithUsername = (url) => (props) => (
-  <ConnectedRedirectToUser {...props} url={url} />
-);
+RedirectToUser.propTypes = {
+  url: PropTypes.string.isRequired
+};
 
-export default createRedirectWithUsername;
+export default RedirectToUser;

client/constants.js

@@ -52,8 +52,6 @@ export const SET_BLOB_URL = 'SET_BLOB_URL';
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
-export const CONSOLE_EVENT = 'CONSOLE_EVENT';
-export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
@@ -140,3 +138,6 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 
 export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';
+
+export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';

client/index.jsx

@@ -9,6 +9,7 @@ import Routing from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
 import './i18n';
+import SkipLink from './components/SkipLink';
 
 require('./styles/main.scss');
 
@@ -23,6 +24,7 @@ const App = () => (
   <Provider store={store}>
     <ThemeProvider>
       <Router history={browserHistory}>
+        <SkipLink targetId="play-sketch" text="PlaySketch" />
         <Routing />
       </Router>
     </ThemeProvider>

client/modules/IDE/actions/console.js

@@ -1,14 +1 @@
-import * as ActionTypes from '../../../constants';
-
-export function clearConsole() {
-  return {
-    type: ActionTypes.CLEAR_CONSOLE
-  };
-}
-
-export function dispatchConsoleEvent(messages) {
-  return {
-    type: ActionTypes.CONSOLE_EVENT,
-    event: messages
-  };
-}
+export { dispatchConsoleEvent, clearConsole } from '../reducers/console';

client/modules/IDE/components/AssetSize.jsx

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
 import getConfig from '../../../utils/getConfig';
@@ -18,7 +17,11 @@ const formatPercent = (percent) => {
 };
 
 /* Eventually, this copy should be Total / 250 MB Used */
-const AssetSize = ({ totalSize }) => {
+const AssetSize = () => {
+  const totalSize = useSelector(
+    (state) => state.user.totalSize || state.assets.totalSize
+  );
+
   if (totalSize === undefined) {
     return null;
   }
@@ -40,15 +43,4 @@ const AssetSize = ({ totalSize }) => {
   );
 };
 
-AssetSize.propTypes = {
-  totalSize: PropTypes.number.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    user: state.user,
-    totalSize: state.user.totalSize || state.assets.totalSize
-  };
-}
-
-export default connect(mapStateToProps)(AssetSize);
+export default AssetSize;

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

@@ -4,14 +4,88 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
+import styled from 'styled-components';
 import MenuItem from '../../../../components/Dropdown/MenuItem';
 import TableDropdown from '../../../../components/Dropdown/TableDropdown';
 import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
+import { remSize, prop } from '../../../../theme';
 
+const SketchsTableRow = styled.tr`
+  &&& {
+    margin: ${remSize(10)};
+    height: ${remSize(72)};
+    font-size: ${remSize(16)};
+  }
+  &:nth-child(odd) {
+    background: ${prop('tableRowStripeColor')};
+  }
+
+  > th:nth-child(1) {
+    padding-left: ${remSize(12)};
+  }
+
+  > td {
+    padding-left: ${remSize(8)};
+  }
+
+  a {
+    color: ${prop('primaryTextColor')};
+  }
+
+  &.is-deleted > * {
+    font-style: italic;
+  }
+  @media (max-width: 770px) {
+    &&& {
+      margin: 0;
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      padding: ${remSize(15)};
+      height: fit-content;
+      gap: ${remSize(8)};
+      border: 1px solid ${prop('modalBorderColor')};
+      background-color: ${prop('searchBackgroundColor')};
+      > th {
+        padding-left: 0;
+        width: 100%;
+        font-weight: bold;
+        margin-bottom: ${remSize(6)};
+      }
+      > td {
+        padding-left: 0;
+        width: 30%;
+        font-size: ${remSize(14)};
+        color: ${prop('modalBorderColor')};
+      }
+    }
+  }
+`;
+const SketchesTableName = styled.span`
+  &&& {
+    display: flex;
+    align-items: center;
+  }
+`;
+const SketchlistDropdownColumn = styled.td`
+  &&& {
+    position: relative;
+    width: ${remSize(60)};
+  }
+  @media (max-width: 770px) {
+    &&& {
+      position: absolute;
+      top: 0;
+      right: ${remSize(4)};
+      width: auto !important;
+      margin: ${remSize(8)};
+    }
+  }
+`;
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
 
@@ -66,6 +140,7 @@ const CollectionListRowBase = (props) => {
 
   const handleRenameEnter = (e) => {
     if (e.key === 'Enter') {
+      e.preventDefault();
       updateName();
       closeAll();
     }
@@ -113,7 +188,7 @@ const CollectionListRowBase = (props) => {
           <input
             value={renameValue}
             onChange={handleRenameChange}
-            onKeyUp={handleRenameEnter}
+            onKeyDown={handleRenameEnter}
             onBlur={handleRenameBlur}
             onClick={(e) => e.stopPropagation()}
             ref={renameInput}
@@ -126,18 +201,18 @@ const CollectionListRowBase = (props) => {
   const { collection, mobile } = props;
 
   return (
-    <tr className="sketches-table__row" key={collection.id}>
+    <SketchsTableRow key={collection.id}>
       <th scope="row">
-        <span className="sketches-table__name">{renderCollectionName()}</span>
+        <SketchesTableName>{renderCollectionName()}</SketchesTableName>
       </th>
       <td>{formatDateCell(collection.createdAt, mobile)}</td>
       <td>{formatDateCell(collection.updatedAt, mobile)}</td>
       <td>
         {mobile && 'sketches: '}
         {(collection.items || []).length}
       </td>
-      <td className="sketch-list__dropdown-column">{renderActions()}</td>
-    </tr>
+      <SketchlistDropdownColumn>{renderActions()}</SketchlistDropdownColumn>
+    </SketchsTableRow>
   );
 };
 

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

@@ -19,6 +19,7 @@ export const EditorContainer = styled.div`
       padding: ${remSize(10)};
       font-weight: bold;
       ${prop('MobilePanel.default')}
+      background-color: ${prop('backgroundColor')}
     }
   }