Feature/switch mobile desktop

client/components/Dropdown.jsx

@@ -91,7 +91,8 @@ Dropdown.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     action: PropTypes.func,
     icon: PropTypes.func,
-    href: PropTypes.string
+    href: PropTypes.string,
+    title: PropTypes.string
   })),
 };
 

client/constants.js

@@ -62,6 +62,7 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
 export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
 export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
+export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
 export const DELETE_FILE = 'DELETE_FILE';

client/modules/IDE/actions/editorAccessibility.js

@@ -14,3 +14,9 @@ export function clearLintMessage() {
     type: ActionTypes.CLEAR_LINT_MESSAGE
   };
 }
+
+export function toggleForceDesktop() {
+  return {
+    type: ActionTypes.TOGGLE_FORCE_DESKTOP
+  };
+}

client/modules/IDE/components/SketchList.jsx

@@ -263,8 +263,6 @@ class SketchListRowBase extends React.Component {
       url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
     }
 
-    if (this.props.mobile) url = `/mobile${url}`;
-
     const name = (
       <React.Fragment>
         <Link to={url}>

client/modules/IDE/pages/MobileIDEView.jsx

@@ -63,19 +63,19 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const getNavOptions = (username = undefined, logoutUser = () => {}) =>
+const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
   (username
     ? [
-      { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-      { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
-      { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+      { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
+      { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
+      { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
+      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
       { icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
     ]
     : [
-      { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-      { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+      { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
+      { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
+      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
       { icon: PreferencesIcon, title: 'Login', href: '/login', },
     ]
   );
@@ -86,7 +86,8 @@ const MobileIDEView = (props) => {
     selectedFile, updateFileContent, files, user, params,
     closeEditorOptions, showEditorOptions, logoutUser,
     startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
-    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges
+    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges,
+    toggleForceDesktop
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
@@ -112,7 +113,7 @@ const MobileIDEView = (props) => {
 
   // Screen Modals
   const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={getNavOptions(username, logoutUser)}
+    items={getNavOptions(username, logoutUser, toggleForceDesktop)}
     align="right"
   />);
 
@@ -131,6 +132,7 @@ const MobileIDEView = (props) => {
         subtitle={selectedFile.name}
       >
         <NavItem>
+
           <IconButton
             onClick={toggleNavDropdown}
             icon={MoreIcon}
@@ -139,7 +141,7 @@ const MobileIDEView = (props) => {
           <NavDropDown />
         </NavItem>
         <li>
-          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
+          <IconButton to="/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
         </li>
       </Header>
 
@@ -289,6 +291,7 @@ MobileIDEView.propTypes = {
   showRuntimeErrorWarning: PropTypes.func.isRequired,
 
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
+  toggleForceDesktop: PropTypes.func.isRequired,
 
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,

client/modules/IDE/reducers/editorAccessibility.js

@@ -1,7 +1,8 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  lintMessages: []
+  lintMessages: [],
+  forceDesktop: false
 };
 let messageId = 0;
 
@@ -16,6 +17,8 @@ const editorAccessibility = (state = initialState, action) => {
       });
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
+    case ActionTypes.TOGGLE_FORCE_DESKTOP:
+      return Object.assign({}, state, { forceDesktop: !(state.forceDesktop) });
     default:
       return state;
   }

client/modules/Mobile/MobileDashboardView.jsx

@@ -138,8 +138,8 @@ const Panels = {
 
 
 const navOptions = username => [
-  { title: 'Create Sketch', href: '/mobile' },
-  { title: 'Create Collection', href: `/mobile/${username}/collections/create` }
+  { title: 'Create Sketch', href: '/' },
+  { title: 'Create Collection', href: `/${username}/collections/create` }
 ];
 
 
@@ -185,7 +185,7 @@ const MobileDashboard = ({ params, location }) => {
           <NavDropdown />
 
         </NavItem>
-        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
+        <IconButton to="/" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
 

client/modules/Mobile/MobilePreferences.jsx

@@ -69,7 +69,7 @@ const MobilePreferences = () => {
     <Screen fullscreen>
       <section>
         <Header transparent title="Preferences">
-          <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
+          <IconButton to="/" icon={ExitIcon} aria-label="Return to ide view" />
         </Header>
         <section className="preferences">
           <Content>

client/modules/Mobile/MobileSketchView.jsx

@@ -39,7 +39,7 @@ const MobileSketchView = () => {
   return (
     <Screen fullscreen>
       <Header
-        leftButton={<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />}
+        leftButton={<IconButton to="/" icon={ExitIcon} aria-label="Return to original editor" />}
         title={projectName}
       />
       <Content>

client/modules/User/components/ResponsiveForm.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { remSize } from '../../../theme';
 
 
-const ResponsiveFormWrapper = styled.div`
+const ResponsiveForm = styled.div`
   .form-container__content {
     width: unset !important;
     padding-top: ${remSize(16)};
@@ -42,23 +42,4 @@ const ResponsiveFormWrapper = styled.div`
   }
 `;
 
-const ResponsiveForm = props =>
-  (props.mobile === true
-    ? (
-      <ResponsiveFormWrapper>
-        {props.children}
-      </ResponsiveFormWrapper>
-
-    )
-    : props.children);
-
-ResponsiveForm.propTypes = {
-  mobile: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-};
-ResponsiveForm.defaultProps = {
-  mobile: false,
-  children: []
-};
-
 export default ResponsiveForm;

client/modules/User/pages/LoginView.jsx

@@ -28,40 +28,36 @@ class LoginView extends React.Component {
   }
 
   render() {
-    const isMobile = () => (window.innerWidth < 770);
     if (this.props.user.authenticated) {
       this.gotoHomePage();
       return null;
     }
-    // TODO: mobile currently forced to true
     return (
-      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
-        <div className="login">
-          <Nav layout="dashboard" />
-          <main className="form-container">
-            <Helmet>
-              <title>{this.props.t('LoginView.Title')}</title>
-            </Helmet>
-            <div className="form-container__content">
-              <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
-              <LoginForm {...this.props} />
-              <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
-              <div className="form-container__stack">
-                <SocialAuthButton service={SocialAuthButton.services.github} />
-                <SocialAuthButton service={SocialAuthButton.services.google} />
-              </div>
-              <p className="form__navigation-options">
-                {this.props.t('LoginView.DontHaveAccount')}
-                <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
-              </p>
-              <p className="form__navigation-options">
-                {this.props.t('LoginView.ForgotPassword')}
-                <Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
-              </p>
+      <div className="login">
+        <Nav layout="dashboard" />
+        <main className="form-container">
+          <Helmet>
+            <title>{this.props.t('LoginView.Title')}</title>
+          </Helmet>
+          <div className="form-container__content">
+            <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
+            <LoginForm {...this.props} />
+            <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
+            <div className="form-container__stack">
+              <SocialAuthButton service={SocialAuthButton.services.github} />
+              <SocialAuthButton service={SocialAuthButton.services.google} />
             </div>
-          </main>
-        </div>
-      </ResponsiveForm>
+            <p className="form__navigation-options">
+              {this.props.t('LoginView.DontHaveAccount')}
+              <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
+            </p>
+            <p className="form__navigation-options">
+              {this.props.t('LoginView.ForgotPassword')}
+              <Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
+            </p>
+          </div>
+        </main>
+      </div>
     );
   }
 }
@@ -85,14 +81,12 @@ LoginView.propTypes = {
     authenticated: PropTypes.bool
   }),
   t: PropTypes.func.isRequired,
-  mobile: PropTypes.bool
 };
 
 LoginView.defaultProps = {
   user: {
     authenticated: false
   },
-  mobile: false
 };
 
 export default withTranslation()(reduxForm({

client/modules/User/pages/SignupView.jsx

@@ -13,7 +13,6 @@ import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
 import ResponsiveForm from '../components/ResponsiveForm';
 
-const isMobile = () => (window.innerWidth < 770);
 
 class SignupView extends React.Component {
   gotoHomePage = () => {
@@ -26,29 +25,27 @@ class SignupView extends React.Component {
       return null;
     }
     return (
-      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
-        <div className="signup">
-          <Nav layout="dashboard" />
-          <main className="form-container">
-            <Helmet>
-              <title>{this.props.t('SignupView.Title')}</title>
-            </Helmet>
-            <div className="form-container__content">
-              <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
-              <SignupForm {...this.props} />
-              <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
-              <div className="form-container__stack">
-                <SocialAuthButton service={SocialAuthButton.services.github} />
-                <SocialAuthButton service={SocialAuthButton.services.google} />
-              </div>
-              <p className="form__navigation-options">
-                {this.props.t('SignupView.AlreadyHave')}
-                <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
-              </p>
+      <div className="signup">
+        <Nav layout="dashboard" />
+        <main className="form-container">
+          <Helmet>
+            <title>{this.props.t('SignupView.Title')}</title>
+          </Helmet>
+          <div className="form-container__content">
+            <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
+            <SignupForm {...this.props} />
+            <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
+            <div className="form-container__stack">
+              <SocialAuthButton service={SocialAuthButton.services.github} />
+              <SocialAuthButton service={SocialAuthButton.services.google} />
             </div>
-          </main>
-        </div>
-      </ResponsiveForm>
+            <p className="form__navigation-options">
+              {this.props.t('SignupView.AlreadyHave')}
+              <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
+            </p>
+          </div>
+        </main>
+      </div>
     );
   }
 }
@@ -116,14 +113,12 @@ SignupView.propTypes = {
     authenticated: PropTypes.bool
   }),
   t: PropTypes.func.isRequired,
-  mobile: PropTypes.bool
 };
 
 SignupView.defaultProps = {
   user: {
     authenticated: false
   },
-  mobile: false
 };
 
 export default withTranslation()(reduxForm({