From 7e9aa18a75bb86947dc9990bfa5447e194b38564 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 28 Jul 2020 16:50:51 -0300 Subject: [PATCH 1/4] :ok_hand: fix dropdown link to original view --- client/components/OverlayManager.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/components/OverlayManager.jsx b/client/components/OverlayManager.jsx index 53025a7e..204e0cc0 100644 --- a/client/components/OverlayManager.jsx +++ b/client/components/OverlayManager.jsx @@ -28,11 +28,7 @@ const OverlayManager = ({ overlay, hideOverlay }) => { href: '/mobile/preferences', }, { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' }, - { - icon: PreferencesIcon, - title: 'Original Editor', - href: '/mobile/preferences', - }, + { icon: PreferencesIcon, title: 'Original Editor', href: '/' }, ]; const jsx = ( From 262199d017be847a3be8dcf6422f6b194651d386 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 28 Jul 2020 17:13:55 -0300 Subject: [PATCH 2/4] :sparkles: load examples on MobileDashboard --- client/components/mobile/Header.jsx | 17 +++++--- ...MobileExamples.jsx => MobileDashboard.jsx} | 43 +++++++++++-------- client/routes.jsx | 4 +- 3 files changed, 39 insertions(+), 25 deletions(-) rename client/modules/Mobile/{MobileExamples.jsx => MobileDashboard.jsx} (67%) diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 9a40f170..750a3afa 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` @@ -52,9 +54,10 @@ const TitleContainer = styled.div` `; const Header = ({ - title, subtitle, leftButton, children, transparent, inverted + title, subtitle, leftButton, children, + transparent, inverted, slim }) => ( - + {leftButton} {title &&

{title}

} @@ -72,7 +75,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 = { @@ -81,7 +85,8 @@ Header.defaultProps = { leftButton: null, children: [], transparent: false, - inverted: false + inverted: false, + slim: false }; export default Header; diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileDashboard.jsx similarity index 67% rename from client/modules/Mobile/MobileExamples.jsx rename to client/modules/Mobile/MobileDashboard.jsx index 0ecbae27..c08a01ee 100644 --- a/client/modules/Mobile/MobileExamples.jsx +++ b/client/modules/Mobile/MobileDashboard.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { bindActionCreators } from 'redux'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; @@ -37,41 +37,50 @@ const FooterTabContainer = styled.div` // } const Panels = { - Sketches: () => , + Sketches: props => , Collections: () => , Assets: () => }; -const MobileExamples = () => { +const MobileDashboard = ({ username }) => { // const tabs = ['Sketches', 'Collections', 'Assets']; const Tabs = Object.keys(Panels); const [selected, selectTab] = useState(Tabs[0]); + + const isExamples = username === 'p5'; + return ( -
+
- {Panels[selected] && Panels[selected]()} + {Panels[selected] && Panels[selected]({ username })}
- - {Tabs.map(tab => ( - selectTab(tab)} - > -

{tab}

- )) - } - + {!isExamples && + + {Tabs.map(tab => ( + selectTab(tab)} + > +

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

+ )) + } + + }
); }; -export default MobileExamples; +MobileDashboard.propTypes = { username: PropTypes.string }; +MobileDashboard.defaultProps = { username: '' }; + + +export default MobileDashboard; 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 => ( - + } /> ); From b2c4a6cd9d680ae888d47b31a7fb4fe8d8279c18 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 28 Jul 2020 17:46:22 -0300 Subject: [PATCH 3/4] :sparkles: mount searchbar on examples/dashboard view --- client/modules/Mobile/MobileDashboard.jsx | 43 ++++++++++++--------- client/modules/Mobile/MobileViewContent.jsx | 2 +- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/client/modules/Mobile/MobileDashboard.jsx b/client/modules/Mobile/MobileDashboard.jsx index c08a01ee..4358e68e 100644 --- a/client/modules/Mobile/MobileDashboard.jsx +++ b/client/modules/Mobile/MobileDashboard.jsx @@ -11,6 +11,9 @@ 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')}; @@ -20,34 +23,35 @@ const FooterTab = styled.div` display: flex; `; -const FooterTabContainer = styled.div` +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%; } `; -// switch (tabKey) { -// case TabKey.assets: -// return ; -// case TabKey.collections: -// return ; -// case TabKey.sketches: -// default: -// return ; -// } - const Panels = { Sketches: props => , - Collections: () => , - Assets: () => + Collections: props => , + Assets: props => }; const MobileDashboard = ({ username }) => { - // const tabs = ['Sketches', 'Collections', 'Assets']; const Tabs = Object.keys(Panels); const [selected, selectTab] = useState(Tabs[0]); - const isExamples = username === 'p5'; + const isExamples = username === EXAMPLE_USERNAME; return ( @@ -56,14 +60,17 @@ const MobileDashboard = ({ username }) => {
- + + + + {Panels[selected] && Panels[selected]({ username })}
{!isExamples && - + {Tabs.map(tab => ( {

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

)) } - + }
); 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)}; `; From 056455c92d63265326ff2da483f626345bbb8282 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 28 Jul 2020 18:10:20 -0300 Subject: [PATCH 4/4] :broom: restore devtools sidebar, enable mobile on .env.example --- .env.example | 1 + client/modules/App/App.jsx | 3 +-- client/modules/Mobile/MobileDashboard.jsx | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) 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/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 index 4358e68e..adda7b59 100644 --- a/client/modules/Mobile/MobileDashboard.jsx +++ b/client/modules/Mobile/MobileDashboard.jsx @@ -31,7 +31,7 @@ const Subheader = styled.div` border-radius: 0px; } } - .searchbar__input { width: 100%; } + .searchbar__input { width: 100%; } `; @@ -67,7 +67,6 @@ const MobileDashboard = ({ username }) => { {Panels[selected] && Panels[selected]({ username })} -