Merge pull request #1528 from ghalestrilo/feature/mobile-examples

Feature/mobile examples

Author: ghalestrilo

.env.example

@@ -26,3 +26,4 @@ S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
 UI_ACCESS_TOKEN_ENABLED=false
 UPLOAD_LIMIT=250000000
+MOBILE_ENABLED=true

client/components/mobile/Header.jsx

@@ -3,16 +3,22 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
-const background = transparent => prop(transparent ? 'backgroundColor' : 'MobilePanel.default.background');
-const textColor = prop('primaryTextColor');
+
+const background = ({ transparent, inverted }) => prop(transparent === true
+  ? 'backgroundColor'
+  : `MobilePanel.default.${inverted === true ? 'foreground' : 'background'}`);
+
+const textColor = ({ transparent, inverted }) => prop((transparent === false && inverted === true)
+  ? 'MobilePanel.default.background'
+  : 'primaryTextColor');
 
 
 const HeaderDiv = styled.div`
   position: fixed;
   width: 100%;
-  background: ${props => background(props.transparent === true)};
+  background: ${props => background(props)};
   color: ${textColor};
-  padding: ${remSize(12)};
+  padding: ${props => remSize(props.slim === true ? 2 : 12)};
   padding-left: ${remSize(16)};
   padding-right: ${remSize(16)};
   z-index: 1;
@@ -25,8 +31,10 @@ const HeaderDiv = styled.div`
 
   svg {
     max-height: ${remSize(32)};
-    padding: ${remSize(4)}
+    padding: ${remSize(4)};
   }
+
+  & svg path { fill: ${textColor} !important; }
 `;
 
 const IconContainer = styled.div`
@@ -48,9 +56,10 @@ const TitleContainer = styled.div`
 `;
 
 const Header = ({
-  title, subtitle, leftButton, children, transparent
+  title, subtitle, leftButton, children,
+  transparent, inverted, slim
 }) => (
-  <HeaderDiv transparent={transparent}>
+  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -67,15 +76,19 @@ Header.propTypes = {
   subtitle: PropTypes.string,
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
-  transparent: PropTypes.bool
+  transparent: PropTypes.bool,
+  inverted: PropTypes.bool,
+  slim: PropTypes.bool,
 };
 
 Header.defaultProps = {
   title: null,
   subtitle: null,
   leftButton: null,
   children: [],
-  transparent: false
+  transparent: false,
+  inverted: false,
+  slim: false
 };
 
 export default Header;

client/components/mobile/Tab.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+import { prop, remSize } from '../../theme';
+
+export default styled(Link)`
+  box-sizing: border-box;
+
+
+  background: transparent;
+  /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
+  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
+
+  color: ${prop('primaryTextColor')};
+
+  padding: ${remSize(8)} ${remSize(16)};
+  width: 30%;
+`;

client/components/mobile/TabSwitcher.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { prop, remSize } from '../../theme';
+
+export default styled.div`
+  display: flex;
+  justify-content: space-between;
+  
+  h3 { text-align: center; width: 100%; }
+  border-top: 1px solid ${prop('Separator')};
+
+  background: ${props => prop('backgroundColor')};
+`;
+

client/modules/IDE/actions/collections.js

@@ -17,6 +17,7 @@ export function getCollections(username) {
     } else {
       url = '/collections';
     }
+    console.log(url);
     apiClient.get(url)
       .then((response) => {
         dispatch({

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

@@ -21,6 +21,7 @@ import CollectionListRow from './CollectionListRow';
 import ArrowUpIcon from '../../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../../images/sort-arrow-down.svg';
 
+
 class CollectionList extends React.Component {
   constructor(props) {
     super(props);
@@ -127,6 +128,7 @@ class CollectionList extends React.Component {
 
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
+    const { mobile } = this.props;
 
     return (
       <article className="sketches-table-container">
@@ -141,15 +143,16 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
-                {this._renderFieldHeader('updatedAt', 'Date Updated')}
-                {this._renderFieldHeader('numItems', '# sketches')}
+                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
+                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
+                {this._renderFieldHeader('numItems', mobile ? 'Sketches' : '# sketches')}
                 <th scope="col"></th>
               </tr>
             </thead>
             <tbody>
               {this.props.collections.map(collection =>
                 (<CollectionListRow
+                  mobile={mobile}
                   key={collection.id}
                   collection={collection}
                   user={this.props.user}
@@ -209,7 +212,8 @@ CollectionList.propTypes = {
     owner: PropTypes.shape({
       id: PropTypes.string
     })
-  })
+  }),
+  mobile: PropTypes.bool,
 };
 
 CollectionList.defaultProps = {
@@ -218,7 +222,8 @@ CollectionList.defaultProps = {
     id: undefined,
     owner: undefined
   },
-  username: undefined
+  username: undefined,
+  mobile: false
 };
 
 function mapStateToProps(state, ownProps) {

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

@@ -11,6 +11,8 @@ import * as ToastActions from '../../actions/toast';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
 
+const formatDateCell = (date, mobile = false) => format(new Date(date), 'MMM D, YYYY');
+
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
     return collection.items.find(item => item.project.id === project.id) != null;
@@ -199,7 +201,7 @@ class CollectionListRowBase extends React.Component {
   }
 
   render() {
-    const { collection } = this.props;
+    const { collection, mobile } = this.props;
 
     return (
       <tr
@@ -211,9 +213,9 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
-        <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>
-        <td>{(collection.items || []).length}</td>
+        <td>{mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
+        <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
+        <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}
         </td>
@@ -245,6 +247,11 @@ CollectionListRowBase.propTypes = {
   deleteCollection: PropTypes.func.isRequired,
   editCollection: PropTypes.func.isRequired,
   onAddSketches: PropTypes.func.isRequired,
+  mobile: PropTypes.bool,
+};
+
+CollectionListRowBase.defaultProps = {
+  mobile: false,
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {

client/modules/IDE/components/EditableInput.jsx

@@ -5,13 +5,20 @@ import EditIcon from '../../../images/pencil.svg';
 
 // TODO I think this needs a description prop so that it's accessible
 function EditableInput({
-  validate, value, emptyPlaceholder, InputComponent, inputProps, onChange
+  validate,
+  value,
+  emptyPlaceholder,
+  InputComponent,
+  inputProps,
+  onChange,
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value || '');
   const displayValue = currentValue || emptyPlaceholder;
   const hasValue = currentValue !== '';
-  const classes = `editable-input editable-input--${isEditing ? 'is-editing' : 'is-not-editing'} editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
+  const classes = `editable-input editable-input--${
+    isEditing ? 'is-editing' : 'is-not-editing'
+  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
   const inputRef = React.createRef();
 
   React.useEffect(() => {
@@ -54,7 +61,11 @@ function EditableInput({
         aria-label={`Edit ${displayValue} value`}
       >
         <span>{displayValue}</span>
-        <EditIcon className="editable-input__icon" focusable="false" aria-hidden="true" />
+        <EditIcon
+          className="editable-input__icon"
+          focusable="false"
+          aria-hidden="true"
+        />
       </button>
 
       <InputComponent
@@ -68,7 +79,7 @@ function EditableInput({
         ref={inputRef}
         value={currentValue}
       />
-    </span >
+    </span>
   );
 }
 
@@ -84,7 +95,7 @@ EditableInput.propTypes = {
   emptyPlaceholder: PropTypes.string,
   InputComponent: PropTypes.elementType,
   // eslint-disable-next-line react/forbid-prop-types
-  inputProps: PropTypes.object,
+  inputProps: PropTypes.object, // eslint-disable-line
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
   value: PropTypes.string,

client/modules/IDE/components/NewFileForm.jsx

@@ -16,7 +16,10 @@ class NewFileForm extends React.Component {
   }
 
   render() {
-    const { fields: { name }, handleSubmit } = this.props;
+    const {
+      fields: { name },
+      handleSubmit,
+    } = this.props;
     return (
       <form
         className="new-file-form"
@@ -26,22 +29,28 @@ class NewFileForm extends React.Component {
         }}
       >
         <div className="new-file-form__input-wrapper">
-          <label className="new-file-form__name-label" htmlFor="name">Name:</label>
+          <label className="new-file-form__name-label" htmlFor="name">
+            Name:
+          </label>
           <input
             className="new-file-form__name-input"
             id="name"
             type="text"
             placeholder={this.props.t('NewFileForm.Placeholder')}
             maxLength="128"
             {...domOnlyProps(name)}
-            ref={(element) => { this.fileName = element; }}
+            ref={(element) => {
+              this.fileName = element;
+            }}
           />
           <Button
             type="submit"
           >{this.props.t('NewFileForm.AddFileSubmit')}
           </Button>
         </div>
-        {name.touched && name.error && <span className="form-error">{name.error}</span>}
+        {name.touched && name.error && (
+          <span className="form-error">{name.error}</span>
+        )}
       </form>
     );
   }

client/modules/IDE/components/NewFolderForm.jsx

@@ -18,7 +18,8 @@ class NewFolderForm extends React.Component {
 
   render() {
     const {
-      fields: { name }, handleSubmit
+      fields: { name },
+      handleSubmit,
     } = this.props;
     return (
       <form
@@ -28,7 +29,9 @@ class NewFolderForm extends React.Component {
         }}
       >
         <div className="new-folder-form__input-wrapper">
-          <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
+          <label className="new-folder-form__name-label" htmlFor="name">
+            Name:
+          </label>
           <input
             className="new-folder-form__name-input"
             id="name"
@@ -43,7 +46,9 @@ class NewFolderForm extends React.Component {
           >{this.props.t('NewFolderForm.AddFolderSubmit')}
           </Button>
         </div>
-        {name.touched && name.error && <span className="form-error">{name.error}</span>}
+        {name.touched && name.error && (
+          <span className="form-error">{name.error}</span>
+        )}
       </form>
     );
   }
@@ -62,6 +67,6 @@ NewFolderForm.propTypes = {
 };
 NewFolderForm.defaultProps = {
   submitting: false,
-  pristine: true
+  pristine: true,
 };
 export default withTranslation()(NewFolderForm);