diff --git a/.env.example b/.env.example index 3a070317..a1db1ecb 100644 --- a/.env.example +++ b/.env.example @@ -26,3 +26,4 @@ S3_BUCKET_URL_BASE= SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production UI_ACCESS_TOKEN_ENABLED=false UPLOAD_LIMIT=250000000 +MOBILE_ENABLED=true diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index bd223e91..cb6702ed 100644 --- a/client/components/mobile/Header.jsx +++ b/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 }) => ( - + {leftButton} {title &&

{title}

} @@ -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; diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 346ea411..af441a9d 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,8 +34,7 @@ class App extends React.Component { render() { return (
- {/* FIXME: remove false */} - {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
); diff --git a/client/modules/Mobile/MobileDashboard.jsx b/client/modules/Mobile/MobileDashboard.jsx new file mode 100644 index 00000000..adda7b59 --- /dev/null +++ b/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 => , + Collections: props => , + Assets: props => +}; + +const MobileDashboard = ({ username }) => { + const Tabs = Object.keys(Panels); + const [selected, selectTab] = useState(Tabs[0]); + + const isExamples = username === EXAMPLE_USERNAME; + + return ( + +
+ +
+ + + + + + + {Panels[selected] && Panels[selected]({ username })} + + +
+ {!isExamples && + + {Tabs.map(tab => ( + selectTab(tab)} + > +

{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}

+ )) + } + + } +
+ ); +}; + +MobileDashboard.propTypes = { username: PropTypes.string }; +MobileDashboard.defaultProps = { username: '' }; + + +export default MobileDashboard; diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileExamples.jsx deleted file mode 100644 index 0ecbae27..00000000 --- a/client/modules/Mobile/MobileExamples.jsx +++ /dev/null @@ -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 ; -// case TabKey.collections: -// return ; -// case TabKey.sketches: -// default: -// return ; -// } - -const Panels = { - Sketches: () => , - Collections: () => , - Assets: () => -}; - -const MobileExamples = () => { - // const tabs = ['Sketches', 'Collections', 'Assets']; - const Tabs = Object.keys(Panels); - const [selected, selectTab] = useState(Tabs[0]); - return ( - -
- -
- - - - {Panels[selected] && Panels[selected]()} - - - -
- - {Tabs.map(tab => ( - selectTab(tab)} - > -

{tab}

- )) - } - -
- ); -}; - -export default MobileExamples; diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx index 5e8a5c48..d4e09dbe 100644 --- a/client/modules/Mobile/MobileViewContent.jsx +++ b/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)}; `; diff --git a/client/routes.jsx b/client/routes.jsx index b3a61193..d801e838 100644 --- a/client/routes.jsx +++ b/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 => ( - + } /> );