2020-07-31 13:21:26 +00:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2020-07-24 21:43:07 +00:00
|
|
|
import styled from 'styled-components';
|
2020-07-31 13:21:26 +00:00
|
|
|
import { useSelector } from 'react-redux';
|
2020-08-10 14:29:12 +00:00
|
|
|
import { withRouter } from 'react-router';
|
2020-07-30 18:40:43 +00:00
|
|
|
|
2020-07-24 21:11:10 +00:00
|
|
|
import Screen from '../../components/mobile/MobileScreen';
|
|
|
|
import Header from '../../components/mobile/Header';
|
|
|
|
import IconButton from '../../components/mobile/IconButton';
|
2020-08-07 22:05:46 +00:00
|
|
|
import { ExitIcon, MoreIcon } from '../../common/icons';
|
2020-07-24 21:43:07 +00:00
|
|
|
import Footer from '../../components/mobile/Footer';
|
2020-08-10 17:40:56 +00:00
|
|
|
import { remSize, prop } from '../../theme';
|
2020-07-28 14:33:38 +00:00
|
|
|
import SketchList from '../IDE/components/SketchList';
|
|
|
|
import CollectionList from '../IDE/components/CollectionList';
|
|
|
|
import AssetList from '../IDE/components/AssetList';
|
|
|
|
import Content from './MobileViewContent';
|
2020-07-31 12:09:35 +00:00
|
|
|
import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
|
2020-07-31 13:21:26 +00:00
|
|
|
import Button from '../../common/Button';
|
2020-08-07 22:05:46 +00:00
|
|
|
import useAsModal from '../../components/useAsModal';
|
|
|
|
import Dropdown from '../../components/Dropdown';
|
2020-08-10 14:29:12 +00:00
|
|
|
import FooterTabSwitcher from '../../components/mobile/TabSwitcher';
|
|
|
|
import FooterTab from '../../components/mobile/Tab';
|
2020-08-11 19:56:56 +00:00
|
|
|
import Loader from '../App/components/loader';
|
2020-07-28 20:46:22 +00:00
|
|
|
|
|
|
|
const EXAMPLE_USERNAME = 'p5';
|
2020-07-24 21:11:10 +00:00
|
|
|
|
2020-08-04 15:01:33 +00:00
|
|
|
const ContentWrapper = styled(Content)`
|
2020-08-04 19:57:24 +00:00
|
|
|
table {
|
|
|
|
table-layout: fixed;
|
|
|
|
}
|
|
|
|
|
|
|
|
td ,thead button {
|
2020-08-04 15:01:33 +00:00
|
|
|
font-size: ${remSize(10)};
|
|
|
|
text-align: left;
|
|
|
|
};
|
|
|
|
|
2020-08-04 20:41:41 +00:00
|
|
|
tbody th {
|
2020-08-10 17:40:56 +00:00
|
|
|
font-size: ${remSize(16)};
|
2020-08-04 15:01:33 +00:00
|
|
|
width: 100%;
|
2020-08-10 17:40:56 +00:00
|
|
|
padding-right: ${remSize(12)};
|
|
|
|
font-weight: bold;
|
|
|
|
display: flex;
|
|
|
|
grid-area: name;
|
2020-08-04 15:01:33 +00:00
|
|
|
};
|
|
|
|
|
2020-08-10 17:40:56 +00:00
|
|
|
tbody td, thead th {
|
2020-08-11 21:19:15 +00:00
|
|
|
justify-self: center;
|
2020-08-10 17:40:56 +00:00
|
|
|
align-self: flex-end;
|
2020-08-10 17:55:02 +00:00
|
|
|
color: ${prop('primaryTextColor')}
|
2020-08-04 19:57:24 +00:00
|
|
|
}
|
|
|
|
|
2020-08-11 21:38:52 +00:00
|
|
|
|
2020-08-11 19:30:48 +00:00
|
|
|
thead th svg { margin-left: ${remSize(8)} }
|
|
|
|
|
2020-08-11 21:38:52 +00:00
|
|
|
|
|
|
|
tbody td { justify-self: start; text-align: start; padding: 0 }
|
|
|
|
tbody td:nth-child(2) { justify-self: start; text-align: start; padding-left: ${remSize(12)}};
|
|
|
|
tbody td:last-child { justify-self: end; text-align: end; };
|
2020-08-11 21:19:15 +00:00
|
|
|
|
2020-08-11 21:38:52 +00:00
|
|
|
.sketch-list__dropdown-column { width: auto; };
|
2020-08-10 17:40:56 +00:00
|
|
|
|
2020-08-11 19:15:17 +00:00
|
|
|
tbody { height: ${remSize(48)}; }
|
2020-08-04 15:01:33 +00:00
|
|
|
|
2020-08-10 17:55:02 +00:00
|
|
|
.sketches-table-container {
|
|
|
|
padding-bottom: ${remSize(160)};
|
2020-08-10 18:04:41 +00:00
|
|
|
background: ${prop('SketchList.background')};
|
2020-08-10 17:55:02 +00:00
|
|
|
}
|
|
|
|
.sketches-table__row {
|
2020-08-11 21:38:52 +00:00
|
|
|
background: ${prop('SketchList.card.background')} !important;
|
|
|
|
height: auto
|
2020-08-10 17:55:02 +00:00
|
|
|
}
|
2020-08-11 21:38:52 +00:00
|
|
|
|
|
|
|
|
2020-08-10 17:40:56 +00:00
|
|
|
|
|
|
|
tr {
|
|
|
|
align-self: start;
|
|
|
|
display: grid;
|
|
|
|
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
|
|
|
|
};
|
2020-08-11 19:37:26 +00:00
|
|
|
|
2020-08-11 19:56:56 +00:00
|
|
|
thead tr {
|
2020-08-11 21:19:15 +00:00
|
|
|
grid-template-columns: 1fr 1fr 1fr 0fr;
|
2020-08-11 19:56:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
tbody tr {
|
|
|
|
padding: ${remSize(8)};
|
|
|
|
border-radius: ${remSize(4)};
|
2020-08-11 21:38:52 +00:00
|
|
|
grid-template-columns: 5fr 5fr 1fr;
|
2020-08-11 19:56:56 +00:00
|
|
|
grid-template-areas: "name name name" "content content content";
|
|
|
|
}
|
2020-08-11 19:37:26 +00:00
|
|
|
|
2020-08-11 19:56:56 +00:00
|
|
|
.loader-container { position: fixed ; padding-bottom: 32% }
|
2020-08-11 21:19:15 +00:00
|
|
|
|
2020-08-04 15:01:33 +00:00
|
|
|
`;
|
|
|
|
|
2020-07-28 20:46:22 +00:00
|
|
|
const Subheader = styled.div`
|
2020-07-31 13:21:26 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
* { border-radius: 0px; }
|
2020-07-28 20:46:22 +00:00
|
|
|
|
|
|
|
.searchbar {
|
|
|
|
display: flex;
|
2020-07-31 13:21:26 +00:00
|
|
|
width: 100%;
|
2020-07-28 20:46:22 +00:00
|
|
|
}
|
2020-07-28 21:10:20 +00:00
|
|
|
.searchbar__input { width: 100%; }
|
2020-07-28 20:46:22 +00:00
|
|
|
`;
|
|
|
|
|
2020-07-31 13:21:26 +00:00
|
|
|
const SubheaderButton = styled(Button)`
|
|
|
|
border-radius: 0px !important;
|
|
|
|
`;
|
|
|
|
|
2020-07-28 14:33:38 +00:00
|
|
|
const Panels = {
|
2020-07-31 12:04:48 +00:00
|
|
|
sketches: SketchList,
|
|
|
|
collections: CollectionList,
|
|
|
|
assets: AssetList
|
2020-07-28 14:33:38 +00:00
|
|
|
};
|
2020-07-24 21:43:07 +00:00
|
|
|
|
2020-08-07 22:05:46 +00:00
|
|
|
|
|
|
|
const navOptions = username => [
|
|
|
|
{ title: 'Create Sketch', href: '/mobile' },
|
|
|
|
{ title: 'Create Collection', href: `/mobile/${username}/collections/create` }
|
|
|
|
];
|
2020-07-31 13:21:26 +00:00
|
|
|
|
2020-07-30 18:40:43 +00:00
|
|
|
|
2020-07-31 12:04:48 +00:00
|
|
|
const getPanel = (pathname) => {
|
|
|
|
const pathparts = pathname ? pathname.split('/') : [];
|
|
|
|
const matches = Object.keys(Panels).map(part => part.toLowerCase()).filter(part => pathparts.includes(part));
|
|
|
|
return matches && matches.length > 0 && matches[0];
|
|
|
|
};
|
|
|
|
|
2020-08-07 22:05:46 +00:00
|
|
|
const NavItem = styled.li`
|
|
|
|
position: relative;
|
|
|
|
`;
|
|
|
|
|
2020-07-30 18:40:43 +00:00
|
|
|
|
2020-07-31 13:21:26 +00:00
|
|
|
const isOwner = (user, params) => user && params && user.username === params.username;
|
|
|
|
|
2020-08-04 13:55:16 +00:00
|
|
|
const renderPanel = (name, props) => (Component => (Component && <Component {...props} mobile />))(Panels[name]);
|
2020-07-28 20:13:55 +00:00
|
|
|
|
2020-07-31 13:21:26 +00:00
|
|
|
const MobileDashboard = ({ params, location }) => {
|
|
|
|
const user = useSelector(state => state.user);
|
2020-08-07 22:05:46 +00:00
|
|
|
const { username: paramsUsername } = params;
|
2020-07-31 12:04:48 +00:00
|
|
|
const { pathname } = location;
|
|
|
|
|
2020-07-31 13:21:26 +00:00
|
|
|
const Tabs = Object.keys(Panels);
|
2020-08-07 22:05:46 +00:00
|
|
|
const isExamples = paramsUsername === EXAMPLE_USERNAME;
|
2020-07-31 12:04:48 +00:00
|
|
|
const panel = getPanel(pathname);
|
|
|
|
|
2020-08-07 22:05:46 +00:00
|
|
|
|
|
|
|
const [toggleNavDropdown, NavDropdown] = useAsModal(<Dropdown
|
|
|
|
items={navOptions(user.username)}
|
|
|
|
align="right"
|
|
|
|
/>);
|
|
|
|
|
2020-07-24 21:43:07 +00:00
|
|
|
return (
|
2020-07-31 12:04:48 +00:00
|
|
|
<Screen fullscreen key={pathname}>
|
2020-07-28 20:13:55 +00:00
|
|
|
<Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
|
2020-08-07 22:05:46 +00:00
|
|
|
<NavItem>
|
|
|
|
<IconButton
|
|
|
|
onClick={toggleNavDropdown}
|
|
|
|
icon={MoreIcon}
|
|
|
|
aria-label="Options"
|
|
|
|
/>
|
|
|
|
<NavDropdown />
|
|
|
|
|
|
|
|
</NavItem>
|
2020-07-24 21:43:07 +00:00
|
|
|
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
|
|
|
|
</Header>
|
|
|
|
|
2020-07-28 14:33:38 +00:00
|
|
|
|
2020-08-04 15:01:33 +00:00
|
|
|
<ContentWrapper slimheader>
|
2020-07-28 20:46:22 +00:00
|
|
|
<Subheader>
|
2020-07-31 12:09:35 +00:00
|
|
|
{panel === Tabs[0] && <SketchSearchbar />}
|
|
|
|
{panel === Tabs[1] && <CollectionSearchbar />}
|
2020-07-28 20:46:22 +00:00
|
|
|
</Subheader>
|
2020-08-10 14:33:43 +00:00
|
|
|
{renderPanel(panel, { username: paramsUsername, key: pathname })}
|
2020-08-04 15:01:33 +00:00
|
|
|
</ContentWrapper>
|
2020-07-24 21:43:07 +00:00
|
|
|
<Footer>
|
2020-07-28 20:13:55 +00:00
|
|
|
{!isExamples &&
|
2020-07-28 20:46:22 +00:00
|
|
|
<FooterTabSwitcher>
|
2020-07-28 20:13:55 +00:00
|
|
|
{Tabs.map(tab => (
|
|
|
|
<FooterTab
|
|
|
|
key={`tab-${tab}`}
|
2020-07-31 12:04:48 +00:00
|
|
|
selected={tab === panel}
|
|
|
|
to={pathname.replace(panel, tab)}
|
2020-07-28 20:13:55 +00:00
|
|
|
>
|
2020-07-31 12:04:48 +00:00
|
|
|
<h3>{(isExamples && tab === 'Sketches') ? 'Examples' : tab}</h3>
|
2020-07-28 20:13:55 +00:00
|
|
|
</FooterTab>))
|
|
|
|
}
|
2020-07-28 20:46:22 +00:00
|
|
|
</FooterTabSwitcher>
|
2020-07-28 20:13:55 +00:00
|
|
|
}
|
2020-07-24 21:43:07 +00:00
|
|
|
</Footer>
|
|
|
|
</Screen>);
|
|
|
|
};
|
2020-07-24 21:11:10 +00:00
|
|
|
|
2020-07-31 13:21:26 +00:00
|
|
|
|
2020-07-30 18:40:43 +00:00
|
|
|
MobileDashboard.propTypes = {
|
2020-07-31 12:04:48 +00:00
|
|
|
location: PropTypes.shape({
|
|
|
|
pathname: PropTypes.string.isRequired
|
|
|
|
}).isRequired,
|
2020-07-30 18:40:43 +00:00
|
|
|
params: PropTypes.shape({
|
|
|
|
username: PropTypes.string.isRequired
|
|
|
|
})
|
|
|
|
};
|
|
|
|
MobileDashboard.defaultProps = { params: {} };
|
2020-07-28 20:13:55 +00:00
|
|
|
|
|
|
|
|
2020-07-30 18:40:43 +00:00
|
|
|
export default withRouter(MobileDashboard);
|