Merge branch 'develop' into fix/scroll-position

Author: raclim

client/common/icons.jsx

@@ -29,28 +29,28 @@ import CircleInfo from '../images/circle-info.svg';
 // could also give these a default size, color, etc. based on the theme
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
-  const Icon = (props) => {
-    const StyledIcon = styled(SvgComponent)`
-      &&& {
-        color: ${prop('Icon.default')};
+  const StyledIcon = styled(SvgComponent)`
+    &&& {
+      color: ${prop('Icon.default')};
+      & g,
+      & path,
+      & polygon {
+        opacity: 1;
+        fill: ${prop('Icon.default')};
+      }
+      &:hover {
+        color: ${prop('Icon.hover')};
         & g,
         & path,
         & polygon {
           opacity: 1;
-          fill: ${prop('Icon.default')};
-        }
-        &:hover {
-          color: ${prop('Icon.hover')};
-          & g,
-          & path,
-          & polygon {
-            opacity: 1;
-            fill: ${prop('Icon.hover')};
-          }
+          fill: ${prop('Icon.hover')};
         }
       }
-    `;
+    }
+  `;
 
+  const Icon = (props) => {
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
       return (

client/modules/IDE/components/About.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
 // import PlayIcon from '../../../images/play.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
+import packageData from '../../../../package.json';
 
 function About(props) {
   const { t } = useTranslation();
+  const p5version = useSelector((state) => {
+    const index = state.files.find((file) => file.name === 'index.html');
+    return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
+  });
   return (
     <div className="about__content">
       <Helmet>
@@ -20,6 +26,14 @@ function About(props) {
           aria-label={t('Common.p5logoARIA')}
           focusable="false"
         />
+        <div className="about__content-column">
+          <p className="about__version-info">
+            Web Editor: <span>v{packageData?.version}</span>
+          </p>
+          <p className="about__version-info">
+            p5.js: <span>v{p5version}</span>
+          </p>
+        </div>
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.NewP5')}</h3>

client/modules/IDE/components/Toast.jsx

@@ -1,39 +1,27 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import * as ToastActions from '../actions/toast';
+import { hideToast } from '../actions/toast';
 
 import ExitIcon from '../../../images/exit.svg';
 
-function Toast(props) {
+export default function Toast() {
+  const { text, isVisible } = useSelector((state) => state.toast);
+  const dispatch = useDispatch();
   const { t } = useTranslation();
+  if (!isVisible) {
+    return null;
+  }
   return (
     <section className="toast">
-      <p>{t(props.text)}</p>
+      <p>{t(text)}</p>
       <button
         className="toast__close"
-        onClick={props.hideToast}
+        onClick={() => dispatch(hideToast())}
         aria-label="Close Alert"
       >
         <ExitIcon focusable="false" aria-hidden="true" />
       </button>
     </section>
   );
 }
-
-Toast.propTypes = {
-  text: PropTypes.string.isRequired,
-  hideToast: PropTypes.func.isRequired
-};
-
-function mapStateToProps(state) {
-  return state.toast;
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(ToastActions, dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Toast);

client/modules/IDE/pages/IDEView.jsx

@@ -26,7 +26,6 @@ import * as ProjectActions from '../actions/project';
 import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
 import * as UserActions from '../../User/actions';
-import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 import { getHTMLFile } from '../reducers/files';
 import Overlay from '../../App/components/Overlay';
@@ -255,7 +254,7 @@ class IDEView extends React.Component {
         <Helmet>
           <title>{getTitle(this.props)}</title>
         </Helmet>
-        {this.props.toast.isVisible && <Toast />}
+        <Toast />
         <Nav
           warnIfUnsavedChanges={this.handleUnsavedChanges}
           cmController={this.cmController}
@@ -561,9 +560,6 @@ IDEView.propTypes = {
   closeNewFileModal: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
   closeKeyboardShortcutModal: PropTypes.func.isRequired,
-  toast: PropTypes.shape({
-    isVisible: PropTypes.bool.isRequired
-  }).isRequired,
   autosaveProject: PropTypes.func.isRequired,
   router: PropTypes.shape({
     setRouteLeaveHook: PropTypes.func
@@ -594,7 +590,6 @@ function mapStateToProps(state) {
     editorAccessibility: state.editorAccessibility,
     user: state.user,
     project: state.project,
-    toast: state.toast,
     console: state.console,
     isUserOwner: getIsUserOwner(state)
   };
@@ -610,7 +605,6 @@ function mapDispatchToProps(dispatch) {
       IDEActions,
       PreferencesActions,
       UserActions,
-      ToastActions,
       ConsoleActions
     ),
     dispatch

client/modules/IDE/pages/MobileIDEView.jsx

@@ -278,7 +278,6 @@ const MobileIDEView = (props) => {
     files,
     toggleForceDesktop,
     logoutUser,
-    toast,
     isUserOwner
   } = props;
 
@@ -383,7 +382,7 @@ const MobileIDEView = (props) => {
           />
         </li>
       </Header>
-      {toast.isVisible && <Toast />}
+      <Toast />
 
       <IDEWrapper>
         <Editor provideController={setCmController} />
@@ -456,10 +455,6 @@ MobileIDEView.propTypes = {
     username: PropTypes.string
   }).isRequired,
 
-  toast: PropTypes.shape({
-    isVisible: PropTypes.bool
-  }).isRequired,
-
   logoutUser: PropTypes.func.isRequired,
 
   getProject: PropTypes.func.isRequired,
@@ -490,7 +485,6 @@ function mapStateToProps(state) {
     preferences: state.preferences,
     user: state.user,
     project: state.project,
-    toast: state.toast,
     console: state.console,
     isUserOwner: getIsUserOwner(state)
   };

client/modules/Preview/EmbedFrame.jsx

@@ -227,7 +227,7 @@ function injectLocalFiles(files, htmlFile, options) {
   const accessiblelib = sketchDoc.createElement('script');
   accessiblelib.setAttribute(
     'src',
-    'https://cdn.jsdelivr.net/gh/processing/p5.accessibility@v0.1.1/dist/p5.accessibility.js'
+    'https://cdn.jsdelivr.net/gh/processing/p5.accessibility@0.1.1/dist/p5-accessibility.js'
   );
   const accessibleOutputs = sketchDoc.createElement('section');
   accessibleOutputs.setAttribute('id', 'accessible-outputs');

client/modules/User/pages/AccountView.jsx

@@ -68,7 +68,7 @@ class AccountView extends React.Component {
         <Helmet>
           <title>{this.props.t('AccountView.Title')}</title>
         </Helmet>
-        {this.props.toast.isVisible && <Toast />}
+        <Toast />
 
         <Nav layout="dashboard" />
 
@@ -129,8 +129,7 @@ function mapStateToProps(state) {
     previousPath: state.ide.previousPath,
     user: state.user,
     apiKeys: state.user.apiKeys,
-    theme: state.preferences.theme,
-    toast: state.toast
+    theme: state.preferences.theme
   };
 }
 
@@ -151,9 +150,6 @@ AccountView.propTypes = {
   location: PropTypes.shape({
     search: PropTypes.string.isRequired,
     pathname: PropTypes.string.isRequired
-  }).isRequired,
-  toast: PropTypes.shape({
-    isVisible: PropTypes.bool.isRequired
   }).isRequired
 };
 

client/styles/components/_about.scss

@@ -74,6 +74,24 @@
   }
 }
 
+.about__version-info {
+  @include themify() {
+    padding-top: #{8 / $base-font-size}rem;
+    font-size: #{16 / $base-font-size}rem;
+    span {
+      color: getThemifyVariable('logo-color');
+    }
+    &:first-child {
+      padding-top: #{30 /$base-font-size}rem;
+    }
+  }
+  // span {
+  //   @include themify() {
+  //     fill: getThemifyVariable('logo-color');
+  //   }
+  // }
+}
+
 .about__footer {
   display: flex;
   justify-content: space-between;

contributor_docs/installation.md

@@ -25,7 +25,6 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
 7. Install MongoDB and make sure it is running
    * For Mac OSX with [homebrew](http://brew.sh/): `brew tap mongodb/brew` then `brew install mongodb-community` and finally start the server with `brew services start mongodb-community` or you can visit the installation guide here [Installation Guide For MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
    * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
-<<<<<<< HEAD:contributor_docs/installation.md
 8. `$ cp .env.example .env`
 9. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
 10. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
@@ -34,16 +33,6 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
 13. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
 14. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 15. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
-=======
-7. `$ cp .env.example .env`
-8. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
-9. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
-10. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
-11. `$ npm start`
-12. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
-13. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-14. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
->>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
 
 ## Docker Installation
 
@@ -54,7 +43,6 @@ Using Docker, you can have a complete, consistent development environment withou
 Note that this takes up a significant amount of space on your machine. Make sure you have at least 5GB free.
 
 1. Install Docker for your operating system
-<<<<<<< HEAD:contributor_docs/installation.md
    * [Mac](https://www.docker.com/docker-mac)
    * [Windows](https://www.docker.com/docker-windows)
 2. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/)
@@ -64,16 +52,6 @@ Note that this takes up a significant amount of space on your machine. Make sure
 6. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
 7. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` -  note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
 8. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
-=======
-   * Mac: https://www.docker.com/docker-mac
-   * Windows: https://www.docker.com/docker-windows
-2. Clone this repository and cd into it
-3. `$ docker-compose -f docker-compose-development.yml build`
-4. `$ cp .env.example .env`
-5. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
-6. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` -  note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
-7. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
->>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
 
 Now, anytime you wish to start the server with its dependencies, you can run: