🚧 pull from mine/mobile-examples
This commit is contained in:
ghalestrilo
commit
6efc22c8a0
7 changed files with 108 additions and 88 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -34,8 +34,7 @@ class App extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
{/* FIXME: remove false */}
|
||||
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
|
||||
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
92
client/modules/Mobile/MobileDashboard.jsx
Normal file
92
client/modules/Mobile/MobileDashboard.jsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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)};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue