🔀 merge from mobile-examples

This commit is contained in:
ghalestrilo 2020-08-11 12:11:23 -03:00
commit 71bd25d74a
5 changed files with 122 additions and 43 deletions

View file

@ -0,0 +1,18 @@
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router';
import { prop, remSize } from '../../theme';
export default styled(Link)`
box-sizing: border-box;
background: transparent;
/* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
color: ${prop('primaryTextColor')};
padding: ${remSize(8)} ${remSize(16)};
width: 30%;
`;

View file

@ -0,0 +1,15 @@
import React from 'react';
import styled from 'styled-components';
import { prop, remSize } from '../../theme';
export default styled.div`
display: flex;
justify-content: space-between;
h3 { text-align: center; width: 100%; }
border-top: 1px solid ${prop('Separator')};
background: ${props => prop('backgroundColor')};
`;

View file

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

View file

@ -2,27 +2,30 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { withRouter, Link } from 'react-router'; import { withRouter } from 'react-router';
import Screen from '../../components/mobile/MobileScreen'; import Screen from '../../components/mobile/MobileScreen';
import Header from '../../components/mobile/Header'; import Header from '../../components/mobile/Header';
import IconButton from '../../components/mobile/IconButton'; import IconButton from '../../components/mobile/IconButton';
import { ExitIcon } from '../../common/icons'; import { ExitIcon, MoreIcon } from '../../common/icons';
import Footer from '../../components/mobile/Footer'; import Footer from '../../components/mobile/Footer';
import { prop, remSize } from '../../theme'; import { remSize, prop } from '../../theme';
import SketchList from '../IDE/components/SketchList'; import SketchList from '../IDE/components/SketchList';
import CollectionList from '../IDE/components/CollectionList'; import CollectionList from '../IDE/components/CollectionList';
import AssetList from '../IDE/components/AssetList'; import AssetList from '../IDE/components/AssetList';
import Content from './MobileViewContent'; import Content from './MobileViewContent';
import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar'; import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
import Button from '../../common/Button'; import Button from '../../common/Button';
import useAsModal from '../../components/useAsModal';
import Dropdown from '../../components/Dropdown';
import FooterTabSwitcher from '../../components/mobile/TabSwitcher';
import FooterTab from '../../components/mobile/Tab';
const EXAMPLE_USERNAME = 'p5'; const EXAMPLE_USERNAME = 'p5';
const ContentWrapper = styled(Content)` const ContentWrapper = styled(Content)`
table { table {
table-layout: fixed; table-layout: fixed;
/* white-space: nowrap; */
} }
td ,thead button { td ,thead button {
@ -31,38 +34,47 @@ const ContentWrapper = styled(Content)`
text-align: left; text-align: left;
}; };
thead th { padding-left: 0; }
thead th:not(:first-child), tbody td {
width: ${remSize(54)};
}
tbody th { font-weight: bold; };
tbody th { tbody th {
font-size: ${remSize(12)}; font-size: ${remSize(16)};
width: 100%; width: 100%;
padding-right: ${remSize(12)} padding-right: ${remSize(12)};
font-weight: bold;
display: flex;
grid-area: name;
}; };
tbody td { tbody td, thead th {
text-align: center; justify-self: stretch;
align-self: flex-end;
color: ${prop('primaryTextColor')}
} }
.sketch-list__sort-button { padding: 0 } tbody td:nth-child(2) { grid-column-start: 2 }
tbody td:last-child { justify-self: end; text-align: end; }
/* .sketch-list__sort-button { padding: 0 } */
tbody { tbody {
height: ${remSize(48)}; height: ${remSize(48)};
} }
.sketches-table-container { padding-bottom: ${remSize(160)} } .sketches-table-container {
`; padding-bottom: ${remSize(160)};
background: ${prop('SketchList.background')};
}
.sketches-table__row {
background: ${prop('SketchList.card.background')} !important; height: auto
}
const FooterTab = styled(Link)` tr {
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')}; align-self: start;
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)}; display: grid;
padding: ${remSize(8)} ${remSize(16)}; grid-template-columns: repeat(4,1fr);
width: 100%; grid-template-areas: "name name name name" "none content content content";
display: flex;
border-radius: ${remSize(4)}; padding: ${remSize(8)};
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
};
`; `;
const Subheader = styled.div` const Subheader = styled.div`
@ -81,23 +93,17 @@ const SubheaderButton = styled(Button)`
border-radius: 0px !important; border-radius: 0px !important;
`; `;
const FooterTabSwitcher = styled.div`
display: flex;
h3 { text-align: center; width: 100%; }
`;
const Panels = { const Panels = {
sketches: SketchList, sketches: SketchList,
collections: CollectionList, collections: CollectionList,
assets: AssetList assets: AssetList
}; };
const CreatePathname = {
sketches: '/mobile', const navOptions = username => [
collections: '/mobile/:username/collections/create', { title: 'Create Sketch', href: '/mobile' },
}; { title: 'Create Collection', href: `/mobile/${username}/collections/create` }
];
const getPanel = (pathname) => { const getPanel = (pathname) => {
@ -106,7 +112,10 @@ const getPanel = (pathname) => {
return matches && matches.length > 0 && matches[0]; return matches && matches.length > 0 && matches[0];
}; };
const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').replace(':username', username); const NavItem = styled.li`
position: relative;
`;
const isOwner = (user, params) => user && params && user.username === params.username; const isOwner = (user, params) => user && params && user.username === params.username;
@ -114,27 +123,41 @@ const renderPanel = (name, props) => (Component => (Component && <Component {...
const MobileDashboard = ({ params, location }) => { const MobileDashboard = ({ params, location }) => {
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
const { username } = params; const { username: paramsUsername } = params;
const { pathname } = location; const { pathname } = location;
const Tabs = Object.keys(Panels); const Tabs = Object.keys(Panels);
const isExamples = username === EXAMPLE_USERNAME; const isExamples = paramsUsername === EXAMPLE_USERNAME;
const panel = getPanel(pathname); const panel = getPanel(pathname);
const [toggleNavDropdown, NavDropdown] = useAsModal(<Dropdown
items={navOptions(user.username)}
align="right"
/>);
return ( return (
<Screen fullscreen key={pathname}> <Screen fullscreen key={pathname}>
<Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}> <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
<NavItem>
<IconButton
onClick={toggleNavDropdown}
icon={MoreIcon}
aria-label="Options"
/>
<NavDropdown />
</NavItem>
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" /> <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
</Header> </Header>
<ContentWrapper slimheader> <ContentWrapper slimheader>
<Subheader> <Subheader>
{isOwner(user, params) && (panel !== Tabs[2]) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
{panel === Tabs[0] && <SketchSearchbar />} {panel === Tabs[0] && <SketchSearchbar />}
{panel === Tabs[1] && <CollectionSearchbar />} {panel === Tabs[1] && <CollectionSearchbar />}
</Subheader> </Subheader>
{renderPanel(panel, { username, key: pathname })} {renderPanel(panel, { username: paramsUsername, key: pathname })}
</ContentWrapper> </ContentWrapper>
<Footer> <Footer>
{!isExamples && {!isExamples &&

View file

@ -58,6 +58,7 @@ export const prop = key => (props) => {
return value; return value;
}; };
export default { export default {
[Theme.light]: { [Theme.light]: {
colors, colors,
@ -103,6 +104,14 @@ export default {
border: grays.middleLight border: grays.middleLight
}, },
Separator: grays.middleLight, Separator: grays.middleLight,
TabHighlight: colors.p5jsPink,
SketchList: {
background: grays.lighter,
card: {
background: grays.lighter
}
}
}, },
[Theme.dark]: { [Theme.dark]: {
colors, colors,
@ -148,6 +157,14 @@ export default {
border: grays.middleDark border: grays.middleDark
}, },
Separator: grays.middleDark, Separator: grays.middleDark,
TabHighlight: colors.p5jsPink,
SketchList: {
background: grays.darker,
card: {
background: grays.dark
}
}
}, },
[Theme.contrast]: { [Theme.contrast]: {
colors, colors,
@ -193,5 +210,13 @@ export default {
border: grays.middleDark border: grays.middleDark
}, },
Separator: grays.middleDark, Separator: grays.middleDark,
TabHighlight: grays.darker,
SketchList: {
background: colors.yellow,
card: {
background: grays.dark
}
}
}, },
}; };