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

🔀 merge from feature/mobile-header-dropdown-menu

Browse source
This commit is contained in:
ghalestrilo 2020-07-28 11:17:49 -03:00
commit 96b0ed4471
10 changed files with 189 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/common/icons.jsx
View file

@ -12,6 +12,7 @@ import Exit from '../images/exit.svg';
import DropdownArrow from '../images/down-filled-triangle.svg';
import Preferences from '../images/preferences.svg';
import Play from '../images/triangle-arrow-right.svg';
import More from '../images/more.svg';
import Code from '../images/code.svg';
import Terminal from '../images/terminal.svg';
@ -77,4 +78,6 @@ export const ExitIcon = withLabel(Exit);
export const DropdownArrowIcon = withLabel(DropdownArrow);
export const PreferencesIcon = withLabel(Preferences);
export const PlayIcon = withLabel(Play);
export const MoreIcon = withLabel(More);
export const TerminalIcon = withLabel(Terminal);
export const CodeIcon = withLabel(Code);

86
client/components/Dropdown.jsx Normal file
View file

@ -0,0 +1,86 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import styled from 'styled-components';
import { remSize, prop, common } from '../theme';
import IconButton from './mobile/IconButton';
import Button from '../common/Button';
const DropdownWrapper = styled.ul`
background-color: ${prop('Modal.background')};
border: 1px solid ${prop('Modal.border')};
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
color: ${prop('primaryTextColor')};
position: absolute;
top: ${remSize(64)};
right: ${remSize(16)};
text-align: left;
width: ${remSize(180)};
display: flex;
flex-direction: column;
height: auto;
z-index: 9999;
border-radius: ${remSize(6)};
& li:first-child { border-radius: ${remSize(5)} ${remSize(5)} 0 0; }
& li:last-child { border-radius: 0 0 ${remSize(5)} ${remSize(5)}; }
& li:hover {
background-color: ${prop('Button.hover.background')};
color: ${prop('Button.hover.foreground')};
& button, & a {
color: ${prop('Button.hover.foreground')};
}
}
li {
height: ${remSize(36)};
cursor: pointer;
display: flex;
align-items: center;
& button,
& a {
color: ${prop('primaryTextColor')};
width: 100%;
text-align: left;
padding: ${remSize(8)} ${remSize(16)};
}
}
`;
// TODO: Add Icon to the left of the items in the menu
// const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
const Dropdown = ({ items }) => (
<DropdownWrapper>
{/* className="nav__items-left" */}
{items && items.map(({ title, icon, href }) => (
<li key={`nav-${title && title.toLowerCase()}`}>
<Link to={href}>
{/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
{title}
</Link>
</li>
))
}
</DropdownWrapper>
);
Dropdown.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
action: PropTypes.func,
icon: PropTypes.func,
href: PropTypes.string
})),
};
Dropdown.defaultProps = {
items: [],
};
export default Dropdown;

57
client/components/OverlayManager.jsx Normal file
View file

@ -0,0 +1,57 @@
import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { createPortal } from 'react-dom';
import Dropdown from './Dropdown';
import { PreferencesIcon } from '../common/icons';
const OverlayManager = ({ overlay, hideOverlay }) => {
const ref = useRef({});
const handleClickOutside = ({ target }) => {
if (ref && ref.current && !ref.current.contains(target)) {
hideOverlay();
}
};
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [ref]);
const headerNavOptions = [
{
icon: PreferencesIcon,
title: 'Preferences',
href: '/mobile/preferences',
},
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
{
icon: PreferencesIcon,
title: 'Original Editor',
href: '/mobile/preferences',
},
];
const jsx = (
<React.Fragment>
<div ref={(r) => { ref.current = r; }} >
{overlay === 'dropdown' && <Dropdown items={headerNavOptions} />}
</div>
</React.Fragment>
);
return jsx && createPortal(jsx, document.body);
};
OverlayManager.propTypes = {
overlay: PropTypes.string,
hideOverlay: PropTypes.func.isRequired,
};
OverlayManager.defaultProps = { overlay: null };
export default OverlayManager;

5
client/images/more.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.28004 13.76C10.5207 13.76 11.52 14.7324 11.52 16.0174C11.52 17.2676 10.5207 18.24 9.28004 18.24C8.03942 18.24 7.04004 17.2676 7.04004 16.0174C7.04004 14.7324 8.03942 13.76 9.28004 13.76Z" fill="#333333"/>
<path d="M18.24 16C18.24 14.7629 17.2371 13.76 16 13.76C14.7629 13.76 13.76 14.7629 13.76 16C13.76 17.2371 14.7629 18.24 16 18.24C17.2371 18.24 18.24 17.2371 18.24 16Z" fill="#333333"/>
<path d="M22.72 13.76C23.9606 13.76 24.96 14.705 24.96 15.965C24.96 17.295 23.9606 18.24 22.72 18.24C21.4794 18.24 20.48 17.295 20.48 15.965C20.48 14.74 21.4794 13.76 22.72 13.76Z" fill="#333333"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 704 B

2
client/modules/IDE/components/Console.jsx
View file

@ -88,8 +88,6 @@ const Console = () => {
const cm = useRef({});
useDidUpdate(() => { cm.current.scrollTop = cm.current.scrollHeight; });
const consoleClass = classNames({
'preview-console': true,
'preview-console--collapsed': !isExpanded

2
client/modules/IDE/components/NewFileForm.jsx
View file

@ -54,7 +54,7 @@ class NewFileForm extends React.Component {
NewFileForm.propTypes = {
fields: PropTypes.shape({
name: PropTypes.object.isRequired, // eslint-disable-line
name: PropTypes.object.isRequired
}).isRequired,
handleSubmit: PropTypes.func.isRequired,
createFile: PropTypes.func.isRequired,

2
client/modules/IDE/components/NewFolderForm.jsx
View file

@ -53,7 +53,7 @@ class NewFolderForm extends React.Component {
NewFolderForm.propTypes = {
fields: PropTypes.shape({
name: PropTypes.object.isRequired, // eslint-disable-line
name: PropTypes.object.isRequired
}).isRequired,
handleSubmit: PropTypes.func.isRequired,
createFolder: PropTypes.func.isRequired,

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

@ -7,6 +7,7 @@ import styled from 'styled-components';
// Imports to be Refactored
import { bindActionCreators } from 'redux';
import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as ProjectActions from '../actions/project';
@ -19,7 +20,7 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports
import Editor from '../components/Editor';
import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
import { PlayIcon, ExitIcon, MoreIcon } from '../../../common/icons';
import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header';
@ -28,6 +29,7 @@ import Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper';
import Console from '../components/Console';
import { remSize } from '../../../theme';
import OverlayManager from '../../../components/OverlayManager';
import ActionStrip from '../../../components/mobile/ActionStrip';
const isUserOwner = ({ project, user }) =>
@ -37,6 +39,7 @@ const Expander = styled.div`
height: ${props => (props.expanded ? remSize(160) : remSize(27))};
`;
const MobileIDEView = (props) => {
const {
preferences,
@ -64,7 +67,11 @@ const MobileIDEView = (props) => {
} = props;
const [tmController, setTmController] = useState(null); // eslint-disable-line
const [overlay, setOverlay] = useState(null); // eslint-disable-line
const [overlayName, setOverlay] = useState(null); // eslint-disable-line
// TODO: Move this to OverlayController (?)
const hideOverlay = () => setOverlay(null);
// const overlayRef = useRef({});
return (
<Screen fullscreen>
@ -80,10 +87,9 @@ const MobileIDEView = (props) => {
}
>
<IconButton
to="/mobile/preferences"
onClick={() => setOverlay('preferences')}
icon={PreferencesIcon}
aria-label="Open preferences menu"
onClick={() => setOverlay('dropdown')}
icon={MoreIcon}
aria-label="Options"
/>
<IconButton
to="/mobile/preview"
@ -131,6 +137,7 @@ const MobileIDEView = (props) => {
provideController={setTmController}
/>
</IDEWrapper>
<Footer>
{ide.consoleIsExpanded && (
<Expander expanded>
@ -139,6 +146,12 @@ const MobileIDEView = (props) => {
)}
<ActionStrip />
</Footer>
<OverlayManager
// ref={overlayRef}
overlay={overlayName}
hideOverlay={hideOverlay}
/>
</Screen>
);
};
@ -160,7 +173,7 @@ MobileIDEView.propTypes = {
ide: PropTypes.shape({
isPlaying: PropTypes.bool.isRequired,
isAccessibleOutputPlaying: PropTypes.bool.isRequired,
consoleEvent: PropTypes.array, // eslint-disable-line
consoleEvent: PropTypes.array,
modalIsVisible: PropTypes.bool.isRequired,
sidebarIsExpanded: PropTypes.bool.isRequired,
consoleIsExpanded: PropTypes.bool.isRequired,
@ -186,7 +199,7 @@ MobileIDEView.propTypes = {
}).isRequired,
editorAccessibility: PropTypes.shape({
lintMessages: PropTypes.array.isRequired, // eslint-disable-line
lintMessages: PropTypes.array.isRequired,
}).isRequired,
project: PropTypes.shape({

2
client/modules/User/components/ResetPasswordForm.jsx
View file

@ -46,7 +46,7 @@ function ResetPasswordForm(props) {
ResetPasswordForm.propTypes = {
fields: PropTypes.shape({
email: PropTypes.object.isRequired, // eslint-disable-line
email: PropTypes.object.isRequired
}).isRequired,
handleSubmit: PropTypes.func.isRequired,
initiateResetPassword: PropTypes.func.isRequired,

15
client/theme.js
View file

@ -41,7 +41,8 @@ export const grays = {
};
export const common = {
baseFontSize: 12
baseFontSize: 12,
shadowColor: 'rgba(0, 0, 0, 0.16)'
};
export const remSize = size => `${size / common.baseFontSize}rem`;
@ -97,6 +98,10 @@ export default {
border: grays.middleLight,
},
},
Modal: {
background: grays.light,
border: grays.middleLight
},
Separator: grays.middleLight,
},
[Theme.dark]: {
@ -138,6 +143,10 @@ export default {
border: grays.middleDark,
},
},
Modal: {
background: grays.dark,
border: grays.middleDark
},
Separator: grays.middleDark,
},
[Theme.contrast]: {
@ -179,6 +188,10 @@ export default {
border: grays.middleDark,
},
},
Modal: {
background: grays.dark,
border: grays.middleDark
},
Separator: grays.middleDark,
},
};