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

🚧 update mobile nav dropdown option list structure

Browse source
This commit is contained in:
ghalestrilo 2020-08-05 15:08:23 -03:00
parent 9771f8fd87
commit dd431a07df
1 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
@ -46,6 +46,21 @@ const NavItem = styled.li`
position: relative; position: relative;
`; `;
const getNatOptions = (username = undefined) =>
(username
? [
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
{ icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
{ icon: PreferencesIcon, title: 'Original Editor', href: '/', },
]
: [
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
{ icon: PreferencesIcon, title: 'Original Editor', href: '/', },
]
);
const MobileIDEView = (props) => { const MobileIDEView = (props) => {
const { const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@ -58,25 +73,23 @@ const MobileIDEView = (props) => {
const [tmController, setTmController] = useState(null); // eslint-disable-line const [tmController, setTmController] = useState(null); // eslint-disable-line
const { username } = user; const { username } = user;
const navOptionsLoggedIn = [
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
{ icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
{ icon: PreferencesIcon, title: 'Original Editor', href: '/', },
];
const navOptionsLoggedOut = [
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
{ icon: PreferencesIcon, title: 'Original Editor', href: '/', },
];
const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown
items={username ? navOptionsLoggedIn : navOptionsLoggedOut} items={getNatOptions(username)}
align="right" align="right"
/>); />);
// Load Project
useEffect(() => {
// const { project_id } = params;
// const oldproject_id = '';
// if (nextProps.params.project_id && !oldproject_id)
// if (nextProps.params.project_id !== nextProps.project.id)
// getProject(nextProps.params.project_id);
}, []);
return ( return (
<Screen fullscreen> <Screen fullscreen>
<Header <Header