diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 215083a6..cc979d3d 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -14,6 +14,7 @@ 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 Save from '../images/save.svg'; import Terminal from '../images/terminal.svg'; @@ -81,3 +82,4 @@ export const PlayIcon = withLabel(Play); export const MoreIcon = withLabel(More); export const TerminalIcon = withLabel(Terminal); export const CodeIcon = withLabel(Code); +export const SaveIcon = withLabel(Save); diff --git a/client/components/mobile/ActionStrip.jsx b/client/components/mobile/ActionStrip.jsx index 0d75a579..a93a6607 100644 --- a/client/components/mobile/ActionStrip.jsx +++ b/client/components/mobile/ActionStrip.jsx @@ -1,13 +1,12 @@ import React from 'react'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { bindActionCreators } from 'redux'; -import { useDispatch, useSelector } from 'react-redux'; import { remSize } from '../../theme'; import IconButton from './IconButton'; -import { TerminalIcon } from '../../common/icons'; -import * as IDEActions from '../../modules/IDE/actions/ide'; -const BottomBarContent = styled.h2` +const BottomBarContent = styled.div` + display: grid; + grid-template-columns: repeat(8,1fr); padding: ${remSize(8)}; svg { @@ -15,21 +14,23 @@ const BottomBarContent = styled.h2` } `; -export default () => { - const { expandConsole, collapseConsole } = bindActionCreators(IDEActions, useDispatch()); - const { consoleIsExpanded } = useSelector(state => state.ide); +const ActionStrip = ({ actions }) => ( + + {actions.map(({ icon, aria, action }) => + ( action()} + />))} + ); - const actions = [{ icon: TerminalIcon, aria: 'Say Something', action: consoleIsExpanded ? collapseConsole : expandConsole }]; - - return ( - - {actions.map(({ icon, aria, action }) => - ( action()} - />))} - - ); +ActionStrip.propTypes = { + actions: PropTypes.arrayOf(PropTypes.shape({ + icon: PropTypes.element.isRequired, + aria: PropTypes.string.isRequired, + action: PropTypes.func.isRequired + })).isRequired }; + +export default ActionStrip; diff --git a/client/images/save.svg b/client/images/save.svg new file mode 100644 index 00000000..b32e097c --- /dev/null +++ b/client/images/save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 95328c6a..f924db16 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -29,9 +29,10 @@ 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 { PreferencesIcon, TerminalIcon, SaveIcon } from '../../../common/icons'; import Dropdown from '../../../components/Dropdown'; + import { useEffectWithComparison, useEventListener } from '../../../utils/custom-hooks'; import * as device from '../../../utils/device'; @@ -147,10 +148,6 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) = const doAutosave = () => autosaveProject(true); - console.log(user); - - console.log(isUserOwner(props), project); - if (isUserOwner(props) && project.id) { if (preferences.autosave && ide.unsavedChanges && !ide.justOpenedProject) { if (file.name === oldFile.name && file.content !== oldFile.content) { @@ -172,8 +169,8 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) = const MobileIDEView = (props) => { const { - ide, preferences, project, selectedFile, user, params, unsavedChanges, collapseConsole, - stopSketch, startSketch, getProject, clearPersistedState, autosaveProject + ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole, + stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject } = props; @@ -216,6 +213,10 @@ const MobileIDEView = (props) => { useEventListener('keydown', handleGlobalKeydown(props, cmController), false, [props]); + const projectActions = + [{ icon: TerminalIcon, aria: 'Toggle console open/closed', action: consoleIsExpanded ? collapseConsole : expandConsole }, + { icon: SaveIcon, aria: 'Save project', action: () => saveProject(cmController.getContent(), false, true) } + ]; return ( @@ -246,7 +247,7 @@ const MobileIDEView = (props) => { )} - + );