diff --git a/client/components/mobile/Tab.jsx b/client/components/mobile/Tab.jsx new file mode 100644 index 00000000..20a158b4 --- /dev/null +++ b/client/components/mobile/Tab.jsx @@ -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%; +`; diff --git a/client/components/mobile/TabSwitcher.jsx b/client/components/mobile/TabSwitcher.jsx new file mode 100644 index 00000000..15a3bb0e --- /dev/null +++ b/client/components/mobile/TabSwitcher.jsx @@ -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')}; +`; + diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 96013836..2c960b8b 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,9 +34,7 @@ class App extends React.Component { render() { return (
-
- {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } -
+ {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
); diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index ac4205d2..99983c86 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -2,27 +2,30 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { useSelector } from 'react-redux'; -import { withRouter, Link } from 'react-router'; +import { withRouter } from 'react-router'; import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; import IconButton from '../../components/mobile/IconButton'; -import { ExitIcon } from '../../common/icons'; +import { ExitIcon, MoreIcon } from '../../common/icons'; import Footer from '../../components/mobile/Footer'; -import { prop, remSize } from '../../theme'; +import { remSize, prop } 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, CollectionSearchbar } from '../IDE/components/Searchbar'; 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 ContentWrapper = styled(Content)` table { table-layout: fixed; - /* white-space: nowrap; */ } td ,thead button { @@ -31,38 +34,47 @@ const ContentWrapper = styled(Content)` 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 { - font-size: ${remSize(12)}; + font-size: ${remSize(16)}; width: 100%; - padding-right: ${remSize(12)} + padding-right: ${remSize(12)}; + font-weight: bold; + display: flex; + grid-area: name; }; - tbody td { - text-align: center; + tbody td, thead th { + 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 { 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)` - background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')}; - color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)}; - padding: ${remSize(8)} ${remSize(16)}; - width: 100%; - display: flex; + tr { + align-self: start; + display: grid; + grid-template-columns: repeat(4,1fr); + grid-template-areas: "name name name name" "none content content content"; + + border-radius: ${remSize(4)}; padding: ${remSize(8)}; + box-shadow: 0 0 18px 0 ${prop('shadowColor')}; + }; `; const Subheader = styled.div` @@ -81,23 +93,17 @@ const SubheaderButton = styled(Button)` border-radius: 0px !important; `; - -const FooterTabSwitcher = styled.div` - display: flex; - - h3 { text-align: center; width: 100%; } -`; - const Panels = { sketches: SketchList, collections: CollectionList, assets: AssetList }; -const CreatePathname = { - sketches: '/mobile', - collections: '/mobile/:username/collections/create', -}; + +const navOptions = username => [ + { title: 'Create Sketch', href: '/mobile' }, + { title: 'Create Collection', href: `/mobile/${username}/collections/create` } +]; const getPanel = (pathname) => { @@ -106,7 +112,10 @@ const getPanel = (pathname) => { 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; @@ -114,27 +123,41 @@ const renderPanel = (name, props) => (Component => (Component && { const user = useSelector(state => state.user); - const { username } = params; + const { username: paramsUsername } = params; const { pathname } = location; const Tabs = Object.keys(Panels); - const isExamples = username === EXAMPLE_USERNAME; + const isExamples = paramsUsername === EXAMPLE_USERNAME; const panel = getPanel(pathname); + + const [toggleNavDropdown, NavDropdown] = useAsModal(); + return (
+ + + + +
- {isOwner(user, params) && (panel !== Tabs[2]) && new} {panel === Tabs[0] && } {panel === Tabs[1] && } - {renderPanel(panel, { username, key: pathname })} + {renderPanel(panel, { username: paramsUsername, key: pathname })}