From 81ad78ba79c45331de154310d1d1ae1eec4f7039 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 7 Aug 2020 15:03:18 -0300 Subject: [PATCH] :sparkles: add floating button to open files tab --- client/common/icons.jsx | 8 +++++ client/components/mobile/FloatingNav.jsx | 40 ++++++++++++++++++++++ client/images/circle-folder.svg | 5 +++ client/images/circle-info.svg | 4 +++ client/images/circle-terminal.svg | 6 ++++ client/modules/App/App.jsx | 4 ++- client/modules/IDE/pages/MobileIDEView.jsx | 22 ++++++------ 7 files changed, 77 insertions(+), 12 deletions(-) create mode 100644 client/components/mobile/FloatingNav.jsx create mode 100644 client/images/circle-folder.svg create mode 100644 client/images/circle-info.svg create mode 100644 client/images/circle-terminal.svg diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 215083a6..b03c3c0f 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -16,6 +16,10 @@ import More from '../images/more.svg'; import Code from '../images/code.svg'; import Terminal from '../images/terminal.svg'; +import CircleTerminal from '../images/circle-terminal.svg'; +import CircleFolder from '../images/circle-folder.svg'; +import CircleInfo from '../images/circle-info.svg'; + // HOC that adds the right web accessibility props // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html @@ -81,3 +85,7 @@ export const PlayIcon = withLabel(Play); export const MoreIcon = withLabel(More); export const TerminalIcon = withLabel(Terminal); export const CodeIcon = withLabel(Code); + +export const CircleTerminalIcon = withLabel(CircleTerminal); +export const CircleFolderIcon = withLabel(CircleFolder); +export const CircleInfoIcon = withLabel(CircleInfo); diff --git a/client/components/mobile/FloatingNav.jsx b/client/components/mobile/FloatingNav.jsx new file mode 100644 index 00000000..ca8220f7 --- /dev/null +++ b/client/components/mobile/FloatingNav.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { remSize } from '../../theme'; +import Button from '../../common/Button'; +import IconButton from './IconButton'; + +const FloatingContainer = styled.div` + position: absolute; + right: ${remSize(16)}; + top: ${remSize(80)}; + + text-align: right; + z-index: 3; +`; + +const FloatingNav = ({ items }) => ( + + { items.map(({ icon, onPress }) => + ( + + ))} + +); + +FloatingNav.propTypes = { + items: PropTypes.arrayOf(PropTypes.shape({ + icon: PropTypes.element, + onPress: PropTypes.func + })) +}; + +FloatingNav.defaultProps = { + items: [] +}; + +export default FloatingNav; diff --git a/client/images/circle-folder.svg b/client/images/circle-folder.svg new file mode 100644 index 00000000..ab2076b9 --- /dev/null +++ b/client/images/circle-folder.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/images/circle-info.svg b/client/images/circle-info.svg new file mode 100644 index 00000000..ed75766b --- /dev/null +++ b/client/images/circle-info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/images/circle-terminal.svg b/client/images/circle-terminal.svg new file mode 100644 index 00000000..168efd85 --- /dev/null +++ b/client/images/circle-terminal.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..96013836 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,9 @@ class App extends React.Component { render() { return (
- {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } +
+ {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 9bad5903..2d6fb526 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -20,7 +20,7 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; -import { PlayIcon, MoreIcon } from '../../../common/icons'; +import { PlayIcon, MoreIcon, CircleFolderIcon } from '../../../common/icons'; import IconButton from '../../../components/mobile/IconButton'; import Header from '../../../components/mobile/Header'; @@ -30,12 +30,12 @@ import IDEWrapper from '../../../components/mobile/IDEWrapper'; import MobileExplorer from '../../../components/mobile/Explorer'; import Console from '../components/Console'; import { remSize } from '../../../theme'; -// import OverlayManager from '../../../components/OverlayManager'; + import ActionStrip from '../../../components/mobile/ActionStrip'; import useAsModal from '../../../components/useAsModal'; import { PreferencesIcon } from '../../../common/icons'; import Dropdown from '../../../components/Dropdown'; -import Sidebar from '../../../components/mobile/Sidebar'; +import FloatingNav from '../../../components/mobile/FloatingNav'; const getRootFile = files => files && files.filter(file => file.name === 'root')[0]; @@ -65,7 +65,7 @@ const NavItem = styled.li` position: relative; `; -const getNatOptions = (username = undefined) => +const getNavOptions = (username = undefined) => (username ? [ { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, @@ -112,14 +112,18 @@ const MobileIDEView = (props) => { // Screen Modals const [toggleNavDropdown, NavDropDown] = useAsModal(); + const [toggleExplorer, Explorer] = useAsModal(, true); // toggle sidebar starting opened - useEffect(toggleExplorer, []); + // useEffect(toggleExplorer, []); + + const floatingNavOptions = + [{ icon: CircleFolderIcon, onPress: toggleExplorer }]; return ( @@ -129,11 +133,6 @@ const MobileIDEView = (props) => { subtitle={selectedFile.name} > - { provideController={setTmController} setUnsavedChanges={setUnsavedChanges} /> +