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

🚧 put an invisible <Dropdown /> on MobileIDEView

Browse source
This commit is contained in:
ghalestrilo 2020-07-21 19:03:22 -03:00
parent 24e6b3639f
commit ca88c4e68c
2 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/Dropdown.jsx
View file

@ -39,6 +39,8 @@ import { Link } from 'react-router';
// </li> // </li>
// </ul> // </ul>
// 'nav__item--open'
const Dropdown = ({ items }) => ( const Dropdown = ({ items }) => (
<ul className="nav__dropdown"> <ul className="nav__dropdown">
{items && items.map(item => ( {items && items.map(item => (

22
client/modules/IDE/pages/MobileIDEView.jsx
View file

@ -28,6 +28,7 @@ import Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper'; import IDEWrapper from '../../../components/mobile/IDEWrapper';
import Console from '../components/Console'; import Console from '../components/Console';
import { remSize } from '../../../theme'; import { remSize } from '../../../theme';
import Dropdown from '../../../components/Dropdown';
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
@ -36,6 +37,16 @@ const BottomBarContent = styled.h2`
padding-left: ${remSize(32)}; padding-left: ${remSize(32)};
`; `;
// TODO: Move to new file?
// const overlays = {};
// const OverlayManager = name => overlays[name] || null;
const headerNavOptions = [
{ icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
];
const MobileIDEView = (props) => { const MobileIDEView = (props) => {
const { const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@ -48,6 +59,8 @@ const MobileIDEView = (props) => {
const [tmController, setTmController] = useState(null); // eslint-disable-line const [tmController, setTmController] = useState(null); // eslint-disable-line
const [overlay, setOverlay] = useState(null); // eslint-disable-line const [overlay, setOverlay] = useState(null); // eslint-disable-line
// const overlayActive = name => (overlay === name);
return ( return (
<Screen fullscreen> <Screen fullscreen>
<Header <Header
@ -58,10 +71,10 @@ const MobileIDEView = (props) => {
} }
> >
<IconButton <IconButton
to="/mobile/preferences" // to="/mobile/preferences"
onClick={() => setOverlay('preferences')} onClick={() => setOverlay('dropdown')}
icon={MoreIcon} icon={MoreIcon}
aria-label="Open preferences menu" aria-label="Options"
/> />
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" /> <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</Header> </Header>
@ -106,6 +119,9 @@ const MobileIDEView = (props) => {
<Console /> <Console />
<BottomBarContent>Bottom Bar</BottomBarContent> <BottomBarContent>Bottom Bar</BottomBarContent>
</Footer> </Footer>
{/* Overlays */}
<Dropdown hidden={overlay !== 'dropdown'} items={headerNavOptions} />
</Screen> </Screen>
); );
}; };