diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 16a67475..48490f9c 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -6,119 +6,20 @@ import { remSize, prop, common } from '../theme';
import IconButton from './mobile/IconButton';
import Button from '../common/Button';
-
-//
-
-
-//
-
-// -
-//
-//
-// -
-//
-//
-// -
-//
-//
-//
-
-// 'nav__item--open'
-
-// %dropdown-open {
-// @include themify() {
-// background-color: map-get($theme-map, 'modal-background-color');
-// border: 1px solid map-get($theme-map, 'modal-border-color');
-// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
-// color: getThemifyVariable('primary-text-color');
-// }
-// text-align: left;
-// width: ${remSize(180)};
-// display: flex;
-// position: absolute;
-// flex-direction: column;
-// top: 95%;
-// 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 {
-// & button,
-// & a {
-// @include themify() {
-// color: getThemifyVariable('primary-text-color');
-// }
-// width: 100%;
-// text-align: left;
-// padding: ${remSize(8)} ${remSize(16)};
-// }
-// height: ${remSize(35)};
-// cursor: pointer;
-// display: flex;
-// align-items: center;
-// }
-// & li:hover {
-// @include themify() {
-// background-color: getThemifyVariable('button-background-hover-color');
-// color: getThemifyVariable('button-hover-color')
-// }
-// & button, & a {
-// @include themify() {
-// color: getThemifyVariable('button-hover-color');
-// }
-// }
-// }
-// }
-
-// %dropdown-open-left {
-// @extend %dropdown-open;
-// left: 0;
-// }
-
-// %dropdown-open-right {
-// @extend %dropdown-open;
-// right: 0;
-// }
-
-
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;
- position: absolute;
flex-direction: column;
- top: 95%;
height: auto;
z-index: 9999;
border-radius: ${remSize(6)};
@@ -150,14 +51,10 @@ const DropdownWrapper = styled.ul`
padding: ${remSize(8)} ${remSize(16)};
}
}
-
`;
-// { onPress
-// ? {title}}
-
-const MaybeIcon = (Element, label) => Element && ;
+// TODO: Add Icon to the left of the items in the menu
+// const MaybeIcon = (Element, label) => Element && ;
const Dropdown = ({ items }) => (
@@ -165,7 +62,7 @@ const Dropdown = ({ items }) => (
{items && items.map(({ title, icon, href }) => (
-
- {MaybeIcon(icon, `Navigate to ${title}`)}
+ {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
{title}
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..b43dee17 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,7 +34,8 @@ class App extends React.Component {
render() {
return (
- {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && }
+ {/* FIXME: Remove && false */}
+ {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && }
{this.props.children}
);
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 84aa0081..bc2866e8 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
@@ -42,6 +42,42 @@ const BottomBarContent = styled.h2`
// const overlays = {};
// const OverlayManager = name => overlays[name] || null;
+const OverlayManager = ({ ref, overlay, hideOverlay }) => {
+ useEffect(() => {
+ const handleClickOutside = ({ target }) => {
+ if (ref && ref.current && !ref.current.contains(target)) { hideOverlay(); console.log('click'); }
+ };
+
+ 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 View', href: '/mobile/preferences' }
+ ];
+
+ return (
+ { if (ref) { ref.current = r; } }}>
+ {(overlay === 'dropdown') && }
+
+ );
+};
+
+const refPropType = PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+]);
+
+OverlayManager.propTypes = {
+ ref: refPropType.isRequired,
+ overlay: PropTypes.string,
+ hideOverlay: PropTypes.func.isRequired
+};
+
+OverlayManager.defaultProps = { overlay: null };
+
const MobileIDEView = (props) => {
const {
@@ -53,18 +89,15 @@ 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
- // const overlayActive = name => (overlay === name);
+ // TODO: Move this to OverlayController (?)
+ const hideOverlay = () => setOverlay(null);
+ const overlayRef = useRef();
- const headerNavOptions = [
- { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
- { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
- { icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
- ];
return (
-
+
{
{ startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
-
- {/* TODO: Overlays */}
-
-
{
/>
- {/*
- */}
+ {/* TODO: Create Overlay Manager */}
+ {}
);
};