Merge pull request #1597 from ghalestrilo/feature/mobile-save-toast

✨ add toast to MobileIDEView

Author: ghalestrilo

client/components/mobile/MobileScreen.jsx

@@ -1,19 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
 
-const Screen = ({ children, fullscreen }) => (
-  <div className={fullscreen && 'fullscreen-preview'}>
+const ScreenWrapper = styled.div`
+  .toast {
+    font-size: ${remSize(12)};
+    padding: ${remSize(8)};
+
+    border-radius: ${remSize(4)};
+    width: 92%;
+    top: unset;
+    min-width: unset;
+    bottom: ${remSize(64)}
+  }
+`;
+
+const Screen = ({ children, fullscreen, slimheader }) => (
+  <ScreenWrapper className={fullscreen && 'fullscreen-preview'} slimheader={slimheader}>
     {children}
-  </div>
+  </ScreenWrapper>
 );
 
 Screen.defaultProps = {
-  fullscreen: false
+  fullscreen: false,
+  slimheader: false,
 };
 
 Screen.propTypes = {
   children: PropTypes.node.isRequired,
-  fullscreen: PropTypes.bool
+  fullscreen: PropTypes.bool,
+  slimheader: PropTypes.bool
 };
 
 export default Screen;

client/modules/App/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/pages/MobileIDEView.jsx

@@ -22,6 +22,7 @@ import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
+import Toast from '../components/Toast';
 import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
@@ -188,7 +189,7 @@ const MobileIDEView = (props) => {
   const {
     ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
     stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject, files,
-    toggleForceDesktop, logoutUser
+    toggleForceDesktop, logoutUser, toast
   } = props;
 
 
@@ -266,6 +267,7 @@ const MobileIDEView = (props) => {
           <IconButton to="/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
         </li>
       </Header>
+      {toast.isVisible && <Toast />}
 
       <IDEWrapper>
         <Editor provideController={setCmController} />
@@ -337,6 +339,10 @@ MobileIDEView.propTypes = {
     username: PropTypes.string,
   }).isRequired,
 
+  toast: PropTypes.shape({
+    isVisible: PropTypes.bool
+  }).isRequired,
+
   logoutUser: PropTypes.func.isRequired,
 
   getProject: PropTypes.func.isRequired,