Merge branch 'master' of https://github.com/processing/p5.js-web-editor into fix/rename-file-set-unsaved

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://processingfoundation.org/support

client/components/Nav.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import { Link, browserHistory } from 'react-router';
+import { Link } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
@@ -167,8 +167,6 @@ class Nav extends React.PureComponent {
 
   handleLogout() {
     this.props.logoutUser();
-    // if you're on the settings page, probably.
-    browserHistory.push('/');
     this.setDropdown('none');
   }
 
@@ -184,7 +182,8 @@ class Nav extends React.PureComponent {
   }
 
   handleShare() {
-    this.props.showShareModal();
+    const { username } = this.props.params;
+    this.props.showShareModal(this.props.project.id, this.props.project.name, username);
     this.setDropdown('none');
   }
 
@@ -717,6 +716,7 @@ Nav.propTypes = {
   }).isRequired,
   project: PropTypes.shape({
     id: PropTypes.string,
+    name: PropTypes.string,
     owner: PropTypes.shape({
       id: PropTypes.string
     })
@@ -742,7 +742,10 @@ Nav.propTypes = {
   layout: PropTypes.oneOf(['dashboard', 'project']),
   rootFile: PropTypes.shape({
     id: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
+  params: PropTypes.shape({
+    username: PropTypes.string
+  })
 };
 
 Nav.defaultProps = {
@@ -752,7 +755,10 @@ Nav.defaultProps = {
   },
   cmController: {},
   layout: 'project',
-  warnIfUnsavedChanges: undefined
+  warnIfUnsavedChanges: undefined,
+  params: {
+    username: undefined
+  }
 };
 
 function mapStateToProps(state) {

client/modules/IDE/components/SketchList.jsx

@@ -312,7 +312,7 @@ SketchListRowBase.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
   changeProjectName: PropTypes.func.isRequired,
-  onAddToCollection: PropTypes.func.isRequired,
+  onAddToCollection: PropTypes.func.isRequired
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {

client/modules/User/components/Collection.jsx

@@ -327,44 +327,46 @@ class Collection extends React.Component {
         </Helmet>
         {this._renderLoader()}
         {this.hasCollection() && this._renderCollectionMetadata()}
-        <div className="collection-table-wrapper">
-          {this._renderEmptyTable()}
-          {this.hasCollectionItems() &&
-            <table className="sketches-table" summary="table containing all collections">
-              <thead>
-                <tr>
-                  {this._renderFieldHeader('name', 'Name')}
-                  {this._renderFieldHeader('createdAt', 'Date Added')}
-                  {this._renderFieldHeader('user', 'Owner')}
-                  <th scope="col"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {this.props.collection.items.map(item =>
-                  (<CollectionItemRow
-                    key={item.id}
-                    item={item}
-                    user={this.props.user}
-                    username={this.getUsername()}
-                    collection={this.props.collection}
-                  />))}
-              </tbody>
-            </table>
-          }
-          {
-            this.state.isAddingSketches && (
-              <Overlay
-                title="Add sketch"
-                actions={<SketchSearchbar />}
-                closeOverlay={this.hideAddSketches}
-                isFixedHeight
-              >
-                <div className="collection-add-sketch">
-                  <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
-                </div>
-              </Overlay>
-            )
-          }
+        <div className="collection-content">
+          <div className="collection-table-wrapper">
+            {this._renderEmptyTable()}
+            {this.hasCollectionItems() &&
+              <table className="sketches-table" summary="table containing all collections">
+                <thead>
+                  <tr>
+                    {this._renderFieldHeader('name', 'Name')}
+                    {this._renderFieldHeader('createdAt', 'Date Added')}
+                    {this._renderFieldHeader('user', 'Owner')}
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {this.props.collection.items.map(item =>
+                    (<CollectionItemRow
+                      key={item.id}
+                      item={item}
+                      user={this.props.user}
+                      username={this.getUsername()}
+                      collection={this.props.collection}
+                    />))}
+                </tbody>
+              </table>
+            }
+            {
+              this.state.isAddingSketches && (
+                <Overlay
+                  title="Add sketch"
+                  actions={<SketchSearchbar />}
+                  closeOverlay={this.hideAddSketches}
+                  isFixedHeight
+                >
+                  <div className="collection-add-sketch">
+                    <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
+                  </div>
+                </Overlay>
+              )
+            }
+          </div>
         </div>
       </section>
     );

client/styles/components/_collection.scss

@@ -1,8 +1,10 @@
 .collection-container {
   padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  position: relative;
   flex: 1;
+  overflow: hidden;
   display: flex;
-  flex-direction: column;
+  flex-direction:column;
 }
 
 .collection-metadata {
@@ -114,15 +116,28 @@
   flex-grow: 0;
 }
 
-.collection-table-wrapper {
-  width: #{1012 / $base-font-size}rem;
-  margin: 0 auto;
+.collection-content {
+  display: flex;
+  flex-direction: column;
   flex: 1;
+  overflow: hidden;
+  max-width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  width: 100%;
+
   @include themify() {
     border: 1px solid getThemifyVariable('modal-border-color');
   }
 }
 
+.collection-table-wrapper {
+  overflow-y: auto;
+  max-width: 100%;
+  min-height: 100%;
+}
+
+
+// maybe don't need this?
 [data-has-items=false] .collection-table-wrapper {
   display: flex;
   justify-content: center;