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) => {
)}
-
+
);