🚧 update nav mobile routes when logged in

ghalestrilo · ghalestrilo · commit 27168f09c839 · 2020-08-20T16:27:40.000-03:00
diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
     background-color: ${prop('Button.hover.background')};
     color: ${prop('Button.hover.foreground')};
 
-    & button, & a {
-      color: ${prop('Button.hover.foreground')};
-    }
+    * { color: ${prop('Button.hover.foreground')}; }
   }
 
   li {
@@ -48,12 +46,21 @@ const DropdownWrapper = styled.ul`
     align-items: center;
 
     & button,
+    & button span,
     & a {
+      padding: ${remSize(8)} ${remSize(16)};
+    }
+
+    * {
+      text-align: left;
+      justify-content: left;
+
       color: ${prop('primaryTextColor')};
       width: 100%;
-      text-align: left;
-      padding: ${remSize(8)} ${remSize(16)};
+      justify-content: flex-start;
     }
+
+    & button span { padding: 0px }
   }
 `;
 
@@ -63,18 +70,22 @@ const DropdownWrapper = styled.ul`
 const Dropdown = ({ items, align }) => (
   <DropdownWrapper align={align} >
     {/* className="nav__items-left" */}
-    {items && items.map(({ title, icon, href }) => (
+    {items && items.map(({
+      title, icon, href, action
+    }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
-        <Link to={href}>
-          {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
-          {title}
-        </Link>
+        {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
+        {href
+          ? <IconButton to={href}>{title}</IconButton>
+          : <IconButton onClick={() => action()}>{title}</IconButton>}
+
       </li>
     ))
     }
   </DropdownWrapper>
 );
 
+
 Dropdown.propTypes = {
   align: PropTypes.oneOf(['left', 'right']),
   items: PropTypes.arrayOf(PropTypes.shape({
diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx
@@ -17,15 +17,19 @@ const IconButton = (props) => {
   const Icon = icon;
 
   return (<ButtonWrapper
-    iconBefore={<Icon />}
+    iconBefore={icon && <Icon />}
     kind={Button.kinds.inline}
     focusable="false"
     {...otherProps}
   />);
 };
 
 IconButton.propTypes = {
-  icon: PropTypes.func.isRequired
+  icon: PropTypes.func
+};
+
+IconButton.defaultProps = {
+  icon: null
 };
 
 export default IconButton;
diff --git a/client/modules/IDE/actions/editorAccessibility.js b/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
+  };
+}
diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/client/modules/IDE/components/AddToCollectionList.jsx
@@ -14,7 +14,7 @@ import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
 
 const projectInCollection = (project, collection) =>
-  collection.items.find(item => item.project.id === project.id) != null;
+  collection.items.find(item => item.projectId === project.id) != null;
 
 class CollectionList extends React.Component {
   constructor(props) {
@@ -81,12 +81,14 @@ class CollectionList extends React.Component {
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getTitle()}</title>
-        </Helmet>
-
-        {content}
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getTitle()}</title>
+          </Helmet>
+
+          {content}
+        </div>
       </div>
     );
   }
diff --git a/client/modules/IDE/components/AddToCollectionSketchList.jsx b/client/modules/IDE/components/AddToCollectionSketchList.jsx
@@ -72,11 +72,13 @@ class SketchList extends React.Component {
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getSketchesTitle()}</title>
-        </Helmet>
-        {content}
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getSketchesTitle()}</title>
+          </Helmet>
+          {content}
+        </div>
       </div>
     );
   }
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -170,12 +170,10 @@ class CollectionList extends React.Component {
               closeOverlay={this.hideAddSketches}
               isFixedHeight
             >
-              <div className="collection-add-sketch">
-                <AddToCollectionSketchList
-                  username={this.props.username}
-                  collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
-                />
-              </div>
+              <AddToCollectionSketchList
+                username={this.props.username}
+                collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
+              />
             </Overlay>
           )
         }
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -20,7 +20,7 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { PlayIcon, MoreIcon, CircleFolderIcon } from '../../../common/icons';
+import { PlayIcon, MoreIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -63,26 +63,28 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const getNavOptions = (username = undefined, toggleForceDesktop = () => {}) =>
+const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
   (username
     ? [
       { 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: '/preferences', },
       { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
+      { icon: PreferencesIcon, title: 'Login', href: '/login', },
     ]
   );
 
 const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
     selectedFile, updateFileContent, files, user, params,
-    closeEditorOptions, showEditorOptions,
+    closeEditorOptions, showEditorOptions, logoutUser,
     startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
     showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges,
     toggleForceDesktop
@@ -111,7 +113,7 @@ const MobileIDEView = (props) => {
 
   // Screen Modals
   const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={getNavOptions(username, toggleForceDesktop)}
+    items={getNavOptions(username, logoutUser, toggleForceDesktop)}
     align="right"
   />);
 
@@ -296,6 +298,8 @@ MobileIDEView.propTypes = {
     username: PropTypes.string,
   }).isRequired,
 
+  logoutUser: PropTypes.func.isRequired,
+
   setUnsavedChanges: PropTypes.func.isRequired,
   getProject: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,
diff --git a/client/modules/IDE/reducers/editorAccessibility.js b/client/modules/IDE/reducers/editorAccessibility.js
@@ -7,6 +7,7 @@ const initialState = {
 let messageId = 0;
 
 const editorAccessibility = (state = initialState, action) => {
+  console.log('accessbility');
   switch (action.type) {
     case ActionTypes.UPDATE_LINT_MESSAGE:
       messageId += 1;
@@ -18,7 +19,7 @@ const editorAccessibility = (state = initialState, action) => {
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
     case ActionTypes.TOGGLE_FORCE_DESKTOP:
-      return { ...state, forceDesktop: !state.forceDesktop };
+      return Object.assign({}, state, { forceDesktop: !(state.forceDesktop) });
     default:
       return state;
   }
diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
@@ -398,9 +398,10 @@ class Collection extends React.Component {
                     closeOverlay={this.hideAddSketches}
                     isFixedHeight
                   >
-                    <div className="collection-add-sketch">
-                      <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
-                    </div>
+                    <AddToCollectionSketchList
+                      username={this.props.username}
+                      collection={this.props.collection}
+                    />
                   </Overlay>
                 )
               }
diff --git a/client/routes.jsx b/client/routes.jsx
@@ -44,7 +44,7 @@ const onRouteChange = (store) => {
 
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
+    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
 
     <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
     <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
@@ -88,6 +88,7 @@ $themes: (
     nav-border-color: $middle-light,
     error-color: $p5js-pink,
     table-row-stripe-color: $medium-light,
+    table-row-stripe-color-alternate: $medium-light,
     codefold-icon-open: url(../images/triangle-arrow-down.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl),
 
@@ -163,6 +164,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5js-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
@@ -236,6 +238,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
@@ -1,11 +1,16 @@
 .quick-add-wrapper {
   min-width: #{600 / $base-font-size}rem;
-  overflow-y: scroll;
+  padding: #{24 / $base-font-size}rem;
+  height: 100%;
 }
 
 .quick-add {
   width: auto;
-  padding: #{24 / $base-font-size}rem;
+  overflow-y: scroll;
+  height: 100%;
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
 }
 
 .quick-add__item {
@@ -23,7 +28,7 @@
 
 .quick-add__item:nth-child(odd) {
   @include themify() {
-    background: getThemifyVariable('table-row-stripe-color');
+    background: getThemifyVariable('table-row-stripe-color-alternate');
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -170,12 +170,10 @@ class CollectionList extends React.Component {`
`170`	`170`	`closeOverlay={this.hideAddSketches}`
`171`	`171`	`isFixedHeight`
`172`	`172`	`>`
`173`		`- <div className="collection-add-sketch">`
`174`		`- <AddToCollectionSketchList`
`175`		`- username={this.props.username}`
`176`		`- collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}`
`177`		`- />`
`178`		`- </div>`
	`173`	`+ <AddToCollectionSketchList`
	`174`	`+ username={this.props.username}`
	`175`	`+ collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}`
	`176`	`+ />`
`179`	`177`	`</Overlay>`
`180`	`178`	`)`
`181`	`179`	`}`
Original file line number	Diff line number	Diff line change
`@@ -398,9 +398,10 @@ class Collection extends React.Component {`
`398`	`398`	`closeOverlay={this.hideAddSketches}`
`399`	`399`	`isFixedHeight`
`400`	`400`	`>`
`401`		`- <div className="collection-add-sketch">`
`402`		`- <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />`
`403`		`- </div>`
	`401`	`+ <AddToCollectionSketchList`
	`402`	`+ username={this.props.username}`
	`403`	`+ collection={this.props.collection}`
	`404`	`+ />`
`404`	`405`	`</Overlay>`
`405`	`406`	`)`
`406`	`407`	`}`