🚧 mount List components

This commit is contained in:
ghalestrilo 2020-07-28 11:33:38 -03:00
parent 96b0ed4471
commit 57ee6f0b8b
4 changed files with 48 additions and 13 deletions

View file

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

View file

@ -7,9 +7,13 @@ 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(`MobilePanel.default.${props.selected ? 'background' : 'foreground'}`)};
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
padding: ${remSize(16)};
width: 100%;
@ -22,21 +26,46 @@ const FooterTabContainer = styled.div`
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 [selected, selectTab] = useState(tabs[0]);
// 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 selected={tab === selected} onClick={() => selectTab(tab)}>
{Tabs.map(tab => (
<FooterTab
key={`tab-${tab}`}
selected={tab === selected}
onClick={() => selectTab(tab)}
>
<h3>{tab}</h3>
</FooterTab>))
}

View file

@ -19,11 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files';
import { ExitIcon } from '../../common/icons';
import { remSize } from '../../theme';
import Footer from '../../components/mobile/Footer';
const Content = styled.div`
z-index: 0;
margin-top: ${remSize(68)};
`;
import Content from './MobileViewContent';
const MobileSketchView = (props) => {
const { files, ide, preferences } = useSelector(state => state);

View file

@ -0,0 +1,9 @@
import React from 'react';
import styled from 'styled-components';
import { remSize } from '../../theme';
export default styled.div`
z-index: 0;
margin-top: ${remSize(68)};
`;