r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

♻️ make Tab and TabSwitcher mobile components

Browse source
This commit is contained in:
ghalestrilo 2020-08-10 11:29:12 -03:00
parent 88c48c300a
commit 0baf64c402
3 changed files with 37 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/components/mobile/Tab.jsx Normal file
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('colors.p5jsPink') : 'transparent')};
color: ${prop('primaryTextColor')};
padding: ${remSize(8)} ${remSize(16)};
width: 30%;
`;

15
client/components/mobile/TabSwitcher.jsx Normal file
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')};
`;

30
client/modules/Mobile/MobileDashboardView.jsx
View file

@ -2,14 +2,14 @@ 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, MoreIcon } 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 } 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';
@ -18,6 +18,8 @@ import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchba
import Button from '../../common/Button'; import Button from '../../common/Button';
import useAsModal from '../../components/useAsModal'; import useAsModal from '../../components/useAsModal';
import Dropdown from '../../components/Dropdown'; 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';
@ -59,30 +61,6 @@ const ContentWrapper = styled(Content)`
.sketches-table-container { padding-bottom: ${remSize(160)} } .sketches-table-container { padding-bottom: ${remSize(160)} }
`; `;
const FooterTabSwitcher = styled.div`
display: flex;
justify-content: space-between;
h3 { text-align: center; width: 100%; }
border-top: 1px solid ${prop('Separator')};
background: ${props => prop('backgroundColor')};
`;
const FooterTab = 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('colors.p5jsPink') : 'transparent')};
color: ${prop('primaryTextColor')};
padding: ${remSize(8)} ${remSize(16)};
width: 30%;
`;
const Subheader = styled.div` const Subheader = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;