🚧 pull from mine/mobile-examples

.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

@@ -18,7 +18,7 @@ const HeaderDiv = styled.div`
   width: 100%;
   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;
@@ -31,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`
@@ -54,9 +56,10 @@ const TitleContainer = styled.div`
 `;
 
 const Header = ({
-  title, subtitle, leftButton, children, transparent, inverted
+  title, subtitle, leftButton, children,
+  transparent, inverted, slim
 }) => (
-  <HeaderDiv transparent={transparent} inverted={inverted}>
+  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -74,7 +77,8 @@ Header.propTypes = {
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
   transparent: PropTypes.bool,
-  inverted: PropTypes.bool
+  inverted: PropTypes.bool,
+  slim: PropTypes.bool,
 };
 
 Header.defaultProps = {
@@ -83,7 +87,8 @@ Header.defaultProps = {
   leftButton: null,
   children: [],
   transparent: false,
-  inverted: false
+  inverted: false,
+  slim: false
 };
 
 export default Header;

client/modules/App/App.jsx

@@ -34,8 +34,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {/* FIXME: remove false */}
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
-        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/Mobile/MobileDashboard.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Screen from '../../components/mobile/MobileScreen';
+import Header from '../../components/mobile/Header';
+import IconButton from '../../components/mobile/IconButton';
+import { ExitIcon } from '../../common/icons';
+import Footer from '../../components/mobile/Footer';
+import { prop, remSize } from '../../theme';
+import SketchList from '../IDE/components/SketchList';
+import CollectionList from '../IDE/components/CollectionList';
+import AssetList from '../IDE/components/AssetList';
+import Content from './MobileViewContent';
+import { SketchSearchbar } from '../IDE/components/Searchbar';
+
+const EXAMPLE_USERNAME = 'p5';
+
+const FooterTab = styled.div`
+  background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
+  color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
+  padding: ${remSize(16)};
+  width: 100%;
+  display: flex;
+`;
+
+const Subheader = styled.div`
+
+  .searchbar {
+    display: flex;
+    * {
+      border-radius: 0px;
+    }
+  }
+  .searchbar__input { width: 100%; }
+`;
+
+
+const FooterTabSwitcher = styled.div`
+  display: flex;
+  
+  h3 { text-align: center; width: 100%; }
+`;
+
+const Panels = {
+  Sketches: props => <SketchList {...props} />,
+  Collections: props => <CollectionList {...props} />,
+  Assets: props => <AssetList {...props} />
+};
+
+const MobileDashboard = ({ username }) => {
+  const Tabs = Object.keys(Panels);
+  const [selected, selectTab] = useState(Tabs[0]);
+
+  const isExamples = username === EXAMPLE_USERNAME;
+
+  return (
+    <Screen fullscreen>
+      <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
+        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
+      </Header>
+
+
+      <Content slimheader>
+        <Subheader>
+          <SketchSearchbar />
+        </Subheader>
+        {Panels[selected] && Panels[selected]({ username })}
+      </Content>
+
+      <Footer>
+        {!isExamples &&
+          <FooterTabSwitcher>
+            {Tabs.map(tab => (
+              <FooterTab
+                key={`tab-${tab}`}
+                selected={tab === selected}
+                onClick={() => selectTab(tab)}
+              >
+                <h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3>
+              </FooterTab>))
+            }
+          </FooterTabSwitcher>
+        }
+      </Footer>
+    </Screen>);
+};
+
+MobileDashboard.propTypes = { username: PropTypes.string };
+MobileDashboard.defaultProps = { username: '' };
+
+
+export default MobileDashboard;

client/modules/Mobile/MobileExamples.jsx

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-import { bindActionCreators } from 'redux';
-import styled from 'styled-components';
-import Screen from '../../components/mobile/MobileScreen';
-import Header from '../../components/mobile/Header';
-import IconButton from '../../components/mobile/IconButton';
-import { ExitIcon } from '../../common/icons';
-import Footer from '../../components/mobile/Footer';
-import { prop, remSize } from '../../theme';
-import SketchList from '../IDE/components/SketchList';
-import CollectionList from '../IDE/components/CollectionList';
-import AssetList from '../IDE/components/AssetList';
-import Content from './MobileViewContent';
-
-const FooterTab = styled.div`
-  background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
-  color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
-  padding: ${remSize(16)};
-  width: 100%;
-  display: flex;
-`;
-
-const FooterTabContainer = styled.div`
-  display: flex;
-  
-  h3 { text-align: center; width: 100%; }
-`;
-
-// switch (tabKey) {
-//   case TabKey.assets:
-//     return <AssetList key={username} username={username} />;
-//   case TabKey.collections:
-//     return <CollectionList key={username} username={username} />;
-//   case TabKey.sketches:
-//   default:
-//     return <SketchList key={username} username={username} />;
-// }
-
-const Panels = {
-  Sketches: () => <SketchList />,
-  Collections: () => <CollectionList />,
-  Assets: () => <AssetList />
-};
-
-const MobileExamples = () => {
-  // const tabs = ['Sketches', 'Collections', 'Assets'];
-  const Tabs = Object.keys(Panels);
-  const [selected, selectTab] = useState(Tabs[0]);
-  return (
-    <Screen fullscreen>
-      <Header inverted title="My Stuff">
-        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
-      </Header>
-
-
-      <Content>
-        {Panels[selected] && Panels[selected]()}
-      </Content>
-
-
-      <Footer>
-        <FooterTabContainer>
-          {Tabs.map(tab => (
-            <FooterTab
-              key={`tab-${tab}`}
-              selected={tab === selected}
-              onClick={() => selectTab(tab)}
-            >
-              <h3>{tab}</h3>
-            </FooterTab>))
-          }
-        </FooterTabContainer>
-      </Footer>
-    </Screen>);
-};
-
-export default MobileExamples;

client/modules/Mobile/MobileViewContent.jsx

@@ -5,5 +5,5 @@ import { remSize } from '../../theme';
 
 export default styled.div`
   z-index: 0;
-  margin-top: ${remSize(68)};
+  margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
 `;

client/routes.jsx

@@ -15,10 +15,10 @@ import AccountView from './modules/User/pages/AccountView';
 import CollectionView from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
 import createRedirectWithUsername from './components/createRedirectWithUsername';
+import MobileDashboard from './modules/Mobile/MobileDashboard';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
-import MobileExamples from './modules/Mobile/MobileExamples';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
@@ -61,7 +61,7 @@ const routes = store => (
     <Route path="/mobile" component={MobileIDEView} />
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
-    <Route path="/mobile/examples" component={MobileExamples} />
+    <Route path="/mobile/examples" component={() => <MobileDashboard username="p5" />} />
   </Route>
 );