Merge branch 'feature/date-i18n' of https://github.com/andrewn/p5.js-web-editor into feature/date-i18n

Author: andrewn

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

@@ -140,7 +140,7 @@ class CollectionList extends React.Component {
         {this._renderLoader()}
         {this._renderEmptyTable()}
         {this.hasCollections() &&
-          <table className="sketches-table" summary="table containing all collections">
+          <table className="sketches-table" summary={this.props.t('CollectionList.TableSummary')}>
             <thead>
               <tr>
                 {this._renderFieldHeader('name', this.props.t('CollectionList.HeaderName'))}

client/modules/IDE/components/NewFileModal.jsx

@@ -20,10 +20,23 @@ class NewFileModal extends React.Component {
   constructor(props) {
     super(props);
     this.focusOnModal = this.focusOnModal.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
   }
 
   componentDidMount() {
     this.focusOnModal();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.modal)) return;
+
+    this.props.closeNewFileModal();
   }
 
   focusOnModal() {

client/modules/IDE/components/NewFolderModal.jsx

@@ -8,8 +8,25 @@ import NewFolderForm from './NewFolderForm';
 import ExitIcon from '../../../images/exit.svg';
 
 class NewFolderModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+
   componentDidMount() {
     this.newFolderModal.focus();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.newFolderModal)) return;
+
+    this.props.closeModal();
   }
 
   render() {

client/modules/IDE/components/SketchList.jsx

@@ -433,7 +433,7 @@ class SketchList extends React.Component {
         {this._renderLoader()}
         {this._renderEmptyTable()}
         {this.hasSketches() &&
-          <table className="sketches-table" summary="table containing all saved projects">
+          <table className="sketches-table" summary={this.props.t('SketchList.TableSummary')}>
             <thead>
               <tr>
                 {this._renderFieldHeader('name', this.props.t('SketchList.HeaderName'))}

client/modules/IDE/components/Toolbar.jsx

@@ -156,7 +156,7 @@ class Toolbar extends React.Component {
             if (this.props.owner) {
               return (
                 <p className="toolbar__project-owner">
-                  by <Link to={`/${this.props.owner.username}/sketches`}>{this.props.owner.username}</Link>
+                  {this.props.t('Toolbar.By')} <Link to={`/${this.props.owner.username}/sketches`}>{this.props.owner.username}</Link>
                 </p>
               );
             }

client/modules/IDE/reducers/ide.js

@@ -40,7 +40,11 @@ const ide = (state = initialState, action) => {
     case ActionTypes.CONSOLE_EVENT:
       return Object.assign({}, state, { consoleEvent: action.event });
     case ActionTypes.SHOW_MODAL:
-      return Object.assign({}, state, { modalIsVisible: true, parentId: action.parentId });
+      return Object.assign({}, state, {
+        modalIsVisible: true,
+        parentId: action.parentId,
+        newFolderModalVisible: false
+      });
     case ActionTypes.HIDE_MODAL:
       return Object.assign({}, state, { modalIsVisible: false });
     case ActionTypes.COLLAPSE_SIDEBAR:
@@ -62,7 +66,11 @@ const ide = (state = initialState, action) => {
     case ActionTypes.CLOSE_PROJECT_OPTIONS:
       return Object.assign({}, state, { projectOptionsVisible: false });
     case ActionTypes.SHOW_NEW_FOLDER_MODAL:
-      return Object.assign({}, state, { newFolderModalVisible: true, parentId: action.parentId });
+      return Object.assign({}, state, {
+        newFolderModalVisible: true,
+        parentId: action.parentId,
+        modalIsVisible: false
+      });
     case ActionTypes.CLOSE_NEW_FOLDER_MODAL:
       return Object.assign({}, state, { newFolderModalVisible: false });
     case ActionTypes.SHOW_SHARE_MODAL:

client/modules/User/components/Collection.jsx

@@ -371,7 +371,7 @@ class Collection extends React.Component {
             <div className="collection-table-wrapper">
               {this._renderEmptyTable()}
               {this.hasCollectionItems() &&
-                <table className="sketches-table" summary="table containing all collections">
+                <table className="sketches-table" summary={this.props.t('Collection.TableSummary')}>
                   <thead>
                     <tr>
                       {this._renderFieldHeader('name', this.props.t('Collection.HeaderName'))}

developer_docs/README.md

@@ -6,6 +6,7 @@ This folder contains documents intended for developers of the p5.js Web Editor.
 * [Development](development.md) - A guide for adding code to the web editor
 * [Preparing a pull-request](preparing_a_pull_request.md) - Instructions for how to make a pull-request
 * [Accessibility Guidelines](accessibility.md) - Guidelines for writing code to create an accessible application
+* [Translations Guidelines](translations.md) - Guidelines for translating the application
 * [Deployment](deployment.md) - A guide to production deployment, and all platforms that are being used.
 * [Release](./release.md) - A guide to creating a production release.
 

developer_docs/translations.md

@@ -0,0 +1,54 @@
+# Translations Guidelines
+
+
+*How to contribute with Translations for p5 web editor*
+ 
+## General rules of thumb for translations
+
+In order to simplify the translations process the following rules of thumb were used:
+
+## Technical Part
+
+* There is only one file to translate all the texts in any specific language, which is located under the directory, in respective locale [subdirectory](https://github.com/processing/p5.js-web-editor/tree/develop/translations/locales)
+* The new language code must be added to [client/i18n.js](https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L7)
+* New languages will need to be selected using a dropdown in Nav component, specifically in function [renderLanguageMenu.](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L550)
+ 
+## Translations
+
+* Every component should introduce its own subset of keys inside a dictionary named after the component. 
+   For instance: If you want to translate AssetList.jsx you need to introduce the following namespace in translations.json :
+```json
+ "AssetList": {
+    "Title": "p5.js Web Editor | My assets",
+    "ToggleOpenCloseARIA": "Toggle Open/Close Asset Options",
+    "OpenNewTab": "Open in New Tab",
+    "HeaderName": "Name",
+  }
+```
+* There are common texts that are present with `Common` prefix, try to check first if the exact label is already present there.
+* Every key follows PascalCase case style.
+* Every key that is used in an ARIA text should end with the suffix `ARIA`.
+* The order of keys inside of appearance should be order of in the order they appear in the source code
+
+## Language Use
+
+The Processing Foundation is specifically invested in expanding the communities of technology and the arts to include and support those who have not had equal access because of their race, gender, class, sexuality, and/or disability. We see software as a medium, something that connects two things. We view it as a means for thinking and making. We believe software, and the tools to learn it, should be accessible to everyone
+
+With those principles in mind, we want to strongly suggest the use of non-gendered terms whenever possible. If it is not possible to avoid, use the most inclusive version. 
+For instance, in Spanish translation we tackled that problem with a particular rule of thumb:
+Avoid male-gendered words, use instead the letter ‘e’  , we used the ‘e’ approach vs other approaches like ‘x’ or ‘@’ because you also need to think about how screen readers would read the text aloud.
+
+## Background
+ 
+Did you want to know the context?
+* The original idea for Alpha Editor in Spanish was addressed in [this issue](https://github.com/processing/p5.js-web-editor/issues/595)
+* The discussion regarding which library to use was addressed in [Library](https://github.com/processing/p5.js-web-editor/issues/1447)
+* [UI Design](https://github.com/processing/p5.js-web-editor/issues/1434)
+* [Language Use](https://github.com/processing/p5.js-web-editor/issues/1509) 
+
+
+
+Thanks! 
+
+P5.js Web Editor Community
+

translations/locales/en-US/translations.json

@@ -99,7 +99,8 @@
     "PlayOnlyVisualSketchARIA": "Play only visual sketch",
     "StopSketchARIA": "Stop sketch",
     "EditSketchARIA": "Edit sketch name",
-    "NewSketchNameARIA": "New sketch name"
+    "NewSketchNameARIA": "New sketch name",
+    "By": " by "
   },
   "Console": {
     "Title": "Console",
@@ -407,6 +408,7 @@
     "NumSketches_plural": "{{count}} sketches",
     "By":"Collection by ",
     "NoSketches": "No sketches in collection",
+    "TableSummary": "table containing all collections",
     "HeaderName": "Name",
     "HeaderCreatedAt": "Date Added",
     "HeaderUser": "Owner",
@@ -445,6 +447,7 @@
     "Title": "p5.js Web Editor | My collections",
     "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s collections",
     "NoCollections": "No collections.",
+    "TableSummary": "table containing all collections",
     "HeaderName": "Name",
     "HeaderCreatedAt": "Date Created",
     "HeaderCreatedAt_mobile": "Created",
@@ -487,6 +490,7 @@
     "ButtonLabelAscendingARIA": "Sort by {{displayName}} ascending.",
     "ButtonLabelDescendingARIA": "Sort by {{displayName}} descending.",
     "AddToCollectionOverlayTitle": "Add to collection",
+    "TableSummary": "table containing all saved projects",
     "HeaderName": "Sketch",
     "HeaderCreatedAt": "Date Created",
     "HeaderCreatedAt_mobile": "Created",

translations/locales/es-419/translations.json

@@ -99,7 +99,8 @@
     "PlayOnlyVisualSketchARIA": "Ejecutar bosquejo visual",
     "StopSketchARIA": "Detener bosquejo",
     "EditSketchARIA": "Editar nombre de bosquejo",
-    "NewSketchNameARIA": "Nuevo nombre de bosquejo"
+    "NewSketchNameARIA": "Nuevo nombre de bosquejo",
+    "By": " de "
   },
   "Console": {
     "Title": "Consola",
@@ -407,6 +408,7 @@
     "NumSketches_plural": "{{count}} bosquejos",
     "By":"Colección por ",
     "NoSketches": "No hay bosquejos en la colección",
+    "TableSummary": "tabla que contiene todas las colecciones",
     "HeaderName": "Nombre",
     "HeaderCreatedAt": "Fecha de agregación",
     "HeaderUser": "Propietario",
@@ -445,6 +447,7 @@
     "Title": "p5.js Web Editor | Mis colecciones",
     "AnothersTitle": "Editor Web p5.js | Colecciones de {{anotheruser}}",
     "NoCollections": "No hay colecciones.",
+    "TableSummary": "la tabla contiene todas las colecciones",
     "HeaderName": "Nombre",
     "HeaderCreatedAt": "Fecha Creación",
     "HeaderCreatedAt_mobile": "Creación",
@@ -487,6 +490,7 @@
     "ButtonLabelAscendingARIA": "Ordenar por {{displayName}} ascendente.",
     "ButtonLabelDescendingARIA": "Ordenar por {{displayName}} descendente.",
     "AddToCollectionOverlayTitle": "Agregar a colección",
+    "TableSummary": "la tabla contiene todos los proyectos guardados",
     "HeaderName": "Bosquejo",
     "HeaderCreatedAt": "Fecha Creación",
     "HeaderCreatedAt_mobile": "Creación",