diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index 48490f9c..5ca33ab1 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -13,8 +13,9 @@ const DropdownWrapper = styled.ul` color: ${prop('primaryTextColor')}; position: absolute; - top: ${remSize(64)}; - right: ${remSize(16)}; + right: ${props => (props.right ? 0 : 'initial')}; + left: ${props => (props.left ? 0 : 'initial')}; + text-align: left; width: ${remSize(180)}; @@ -56,8 +57,8 @@ const DropdownWrapper = styled.ul` // TODO: Add Icon to the left of the items in the menu // const MaybeIcon = (Element, label) => Element && ; -const Dropdown = ({ items }) => ( - +const Dropdown = ({ items, right, left }) => ( + {/* className="nav__items-left" */} {items && items.map(({ title, icon, href }) => (
  • @@ -72,6 +73,8 @@ const Dropdown = ({ items }) => ( ); Dropdown.propTypes = { + right: PropTypes.bool, + left: PropTypes.bool, items: PropTypes.arrayOf(PropTypes.shape({ action: PropTypes.func, icon: PropTypes.func, @@ -81,6 +84,8 @@ Dropdown.propTypes = { Dropdown.defaultProps = { items: [], + right: false, + left: false, }; export default Dropdown; diff --git a/client/components/OverlayManager.jsx b/client/components/OverlayManager.jsx index 91c2b760..1b3b040c 100644 --- a/client/components/OverlayManager.jsx +++ b/client/components/OverlayManager.jsx @@ -1,29 +1,8 @@ -import React, { useRef, useEffect } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { createPortal } from 'react-dom'; -import Dropdown from './Dropdown'; - -import { PreferencesIcon } from '../common/icons'; -import { useModalBehavior } from '../utils/custom-hooks'; - - const OverlayManager = ({ overlay, hideOverlay }) => { - 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 setRef = useModalBehavior(hideOverlay); // const [visible, trigger, setRef] = useModalBehavior(); const jsx = ( diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index cf727b7c..ded0b3be 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -31,7 +31,9 @@ const HeaderDiv = styled.div` const IconContainer = styled.div` margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))}; + list-style: none; display: flex; + flex-direction: horizontal; `; diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..346ea411 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 db256264..1c83ba06 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -67,13 +67,9 @@ const MobileIDEView = (props) => { } = props; const [tmController, setTmController] = 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({}); - const [triggerNavDropdown, NavDropDown] = useAsModal(); + const [triggerNavDropdown, NavDropDown] = useAsModal(); return ( @@ -84,12 +80,17 @@ const MobileIDEView = (props) => { } > - - { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" /> +
  • + + +
  • +
  • + { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" /> +
  • @@ -107,9 +108,7 @@ const MobileIDEView = (props) => { editorOptionsVisible={ide.editorOptionsVisible} showEditorOptions={showEditorOptions} closeEditorOptions={closeEditorOptions} - showKeyboardShortcutModal={showKeyboardShortcutModal} - setUnsavedChanges={setUnsavedChanges} - isPlaying={ide.isPlaying} + showKeyboard={ide.isPlaying} theme={preferences.theme} startRefreshSketch={startRefreshSketch} stopSketch={stopSketch} @@ -133,12 +132,6 @@ const MobileIDEView = (props) => { {ide.consoleIsExpanded && } - - {/* */} ); };