Merge pull request #1459 from ghalestrilo/feature/mobile-ide

Add Editor component to the Mobile IDE View

client/common/Icons.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize, prop } from '../theme';
 import SortArrowUp from '../images/sort-arrow-up.svg';
 import SortArrowDown from '../images/sort-arrow-down.svg';
 import Github from '../images/github.svg';
 import Google from '../images/google.svg';
 import Plus from '../images/plus-icon.svg';
 import Close from '../images/close.svg';
+import Exit from '../images/exit.svg';
 import DropdownArrow from '../images/down-filled-triangle.svg';
 
 // HOC that adds the right web accessibility props
@@ -15,16 +18,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
   const Icon = (props) => {
+    const StyledIcon = styled(SvgComponent)`
+      &&& {
+        color: ${prop('Icon.default')};
+        & g, & path, & polygon {
+          opacity: 1;
+          fill: ${prop('Icon.default')};
+        }
+        &:hover {
+          color: ${prop('Icon.hover')};
+          & g, & path, & polygon {
+            opacity: 1;
+            fill: ${prop('Icon.hover')};
+          }
+        }
+      }
+    `;
+
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
-      return (<SvgComponent
+      return (<StyledIcon
         {...props}
         aria-label={ariaLabel}
         role="img"
         focusable="false"
       />);
     }
-    return (<SvgComponent
+    return (<StyledIcon
       {...props}
       aria-hidden
       focusable="false"
@@ -48,4 +68,5 @@ export const GithubIcon = withLabel(Github);
 export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
+export const ExitIcon = withLabel(Exit);
 export const DropdownArrowIcon = withLabel(DropdownArrow);

client/common/icons.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize, prop } from '../theme';
 import SortArrowUp from '../images/sort-arrow-up.svg';
 import SortArrowDown from '../images/sort-arrow-down.svg';
 import Github from '../images/github.svg';
 import Google from '../images/google.svg';
 import Plus from '../images/plus-icon.svg';
 import Close from '../images/close.svg';
+import Exit from '../images/exit.svg';
 import DropdownArrow from '../images/down-filled-triangle.svg';
 
 // HOC that adds the right web accessibility props
@@ -15,16 +18,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
   const Icon = (props) => {
+    const StyledIcon = styled(SvgComponent)`
+      &&& {
+        color: ${prop('Icon.default')};
+        & g, & path, & polygon {
+          opacity: 1;
+          fill: ${prop('Icon.default')};
+        }
+        &:hover {
+          color: ${prop('Icon.hover')};
+          & g, & path, & polygon {
+            opacity: 1;
+            fill: ${prop('Icon.hover')};
+          }
+        }
+      }
+    `;
+
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
-      return (<SvgComponent
+      return (<StyledIcon
         {...props}
         aria-label={ariaLabel}
         role="img"
         focusable="false"
       />);
     }
-    return (<SvgComponent
+    return (<StyledIcon
       {...props}
       aria-hidden
       focusable="false"
@@ -48,4 +68,5 @@ export const GithubIcon = withLabel(Github);
 export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
+export const ExitIcon = withLabel(Exit);
 export const DropdownArrowIcon = withLabel(DropdownArrow);

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -2,28 +2,80 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link } from 'react-router';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { useState } from 'react';
 
+// Imports to be Refactored
+import { bindActionCreators } from 'redux';
+import * as FileActions from '../actions/files';
+import * as IDEActions from '../actions/ide';
+import * as ProjectActions from '../actions/project';
+import * as EditorAccessibilityActions from '../actions/editorAccessibility';
+import * as PreferencesActions from '../actions/preferences';
+import * as UserActions from '../../User/actions';
+import * as ToastActions from '../actions/toast';
+import * as ConsoleActions from '../actions/console';
+import { getHTMLFile } from '../reducers/files';
+
+// Local Imports
+import Editor from '../components/Editor';
 import { prop, remSize } from '../../../theme';
+import { ExitIcon } from '../../../common/icons';
 
 const background = prop('Button.default.background');
 const textColor = prop('primaryTextColor');
 
+
 const Header = styled.div`
+  position: fixed;
   width: 100%;
-  background-color: ${background};
+  background: ${background};
   color: ${textColor};
+  padding: ${remSize(12)};
   padding-left: ${remSize(32)};
+  padding-right: ${remSize(32)};
+  z-index: 1;
+  
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
 `;
 
 const Footer = styled.div`
+  position: fixed;
   width: 100%;
-  position: absolute;
-  bottom: 0;
   background: ${background};
   color: ${textColor};
+  padding: ${remSize(12)};
   padding-left: ${remSize(32)};
+  z-index: 1;
+
+  bottom: 0;
 `;
 
+const Content = styled.div`
+  z-index: 0;
+  margin-top: ${remSize(16)};
+`;
+
+const Icon = styled.a`
+  > svg {
+    fill: ${textColor};
+    color: ${textColor};
+    margin-left: ${remSize(16)};
+  }
+`;
+
+const IconLinkWrapper = styled(Link)`
+  width: 3rem;
+  margin-right: 1.25rem;
+  margin-left: none;
+`;
+
+
 const Screen = ({ children }) => (
   <div className="fullscreen-preview">
     {children}
@@ -33,16 +85,212 @@ Screen.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-export default () => (
+const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
-  <Screen>
+
-    <Header><h1>Mobile View</h1></Header>
+const IDEViewMobile = (props) => {
+  const {
+    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning
+  } = props;
+
+  const [tmController, setTmController] = useState(null);
+
+  return (
+    <Screen>
+      <Header>
+        <IconLinkWrapper to="/" aria-label="Return to original editor">
+          <ExitIcon />
+        </IconLinkWrapper>
+        <div>
+          <h2>{project.name}</h2>
+          <h3>{selectedFile.name}</h3>
+        </div>
+      </Header>
+
+      <Content>
+        <Editor
+          lintWarning={preferences.lintWarning}
+          linewrap={preferences.linewrap}
+          lintMessages={editorAccessibility.lintMessages}
+          updateLintMessage={updateLintMessage}
+          clearLintMessage={clearLintMessage}
+          file={selectedFile}
+          updateFileContent={updateFileContent}
+          fontSize={preferences.fontSize}
+          lineNumbers={preferences.lineNumbers}
+          files={files}
+          editorOptionsVisible={ide.editorOptionsVisible}
+          showEditorOptions={showEditorOptions}
+          closeEditorOptions={closeEditorOptions}
+          showKeyboardShortcutModal={showKeyboardShortcutModal}
+          setUnsavedChanges={setUnsavedChanges}
+          isPlaying={ide.isPlaying}
+          theme={preferences.theme}
+          startRefreshSketch={startRefreshSketch}
+          stopSketch={stopSketch}
+          autorefresh={preferences.autorefresh}
+          unsavedChanges={ide.unsavedChanges}
+          projectSavedTime={project.updatedAt}
+          isExpanded={ide.sidebarIsExpanded}
+          expandSidebar={expandSidebar}
+          collapseSidebar={collapseSidebar}
+          isUserOwner={isUserOwner(props)}
+          clearConsole={clearConsole}
+          consoleEvents={console}
+          showRuntimeErrorWarning={showRuntimeErrorWarning}
+          hideRuntimeErrorWarning={hideRuntimeErrorWarning}
+          runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
+          provideController={setTmController}
+        />
+      </Content>
+      <Footer><h2>Bottom Bar</h2></Footer>
+    </Screen>
+  );
+};
 
 
-    <h3>
+IDEViewMobile.propTypes = {
-      <br />This page is under construction.
-      <br /><Link to="/">Click here</Link> to return to the regular editor
-    </h3>
 
-    <Footer><h1>Bottom Bar</h1></Footer>
+  preferences: PropTypes.shape({
-  </Screen>
+    fontSize: PropTypes.number.isRequired,
-);
+    autosave: PropTypes.bool.isRequired,
+    linewrap: PropTypes.bool.isRequired,
+    lineNumbers: PropTypes.bool.isRequired,
+    lintWarning: PropTypes.bool.isRequired,
+    textOutput: PropTypes.bool.isRequired,
+    gridOutput: PropTypes.bool.isRequired,
+    soundOutput: PropTypes.bool.isRequired,
+    theme: PropTypes.string.isRequired,
+    autorefresh: PropTypes.bool.isRequired
+  }).isRequired,
+
+  ide: PropTypes.shape({
+    isPlaying: PropTypes.bool.isRequired,
+    isAccessibleOutputPlaying: PropTypes.bool.isRequired,
+    consoleEvent: PropTypes.array,
+    modalIsVisible: PropTypes.bool.isRequired,
+    sidebarIsExpanded: PropTypes.bool.isRequired,
+    consoleIsExpanded: PropTypes.bool.isRequired,
+    preferencesIsVisible: PropTypes.bool.isRequired,
+    projectOptionsVisible: PropTypes.bool.isRequired,
+    newFolderModalVisible: PropTypes.bool.isRequired,
+    shareModalVisible: PropTypes.bool.isRequired,
+    shareModalProjectId: PropTypes.string.isRequired,
+    shareModalProjectName: PropTypes.string.isRequired,
+    shareModalProjectUsername: PropTypes.string.isRequired,
+    editorOptionsVisible: PropTypes.bool.isRequired,
+    keyboardShortcutVisible: PropTypes.bool.isRequired,
+    unsavedChanges: PropTypes.bool.isRequired,
+    infiniteLoop: PropTypes.bool.isRequired,
+    previewIsRefreshing: PropTypes.bool.isRequired,
+    infiniteLoopMessage: PropTypes.string.isRequired,
+    projectSavedTime: PropTypes.string,
+    previousPath: PropTypes.string.isRequired,
+    justOpenedProject: PropTypes.bool.isRequired,
+    errorType: PropTypes.string,
+    runtimeErrorWarningVisible: PropTypes.bool.isRequired,
+    uploadFileModalVisible: PropTypes.bool.isRequired
+  }).isRequired,
+
+  editorAccessibility: PropTypes.shape({
+    lintMessages: PropTypes.array.isRequired,
+  }).isRequired,
+
+  project: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    owner: PropTypes.shape({
+      username: PropTypes.string,
+      id: PropTypes.string
+    }),
+    updatedAt: PropTypes.string
+  }).isRequired,
+
+  updateLintMessage: PropTypes.func.isRequired,
+
+  clearLintMessage: PropTypes.func.isRequired,
+
+  selectedFile: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+
+  updateFileContent: PropTypes.func.isRequired,
+
+  files: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired
+  })).isRequired,
+
+  closeEditorOptions: PropTypes.func.isRequired,
+
+  showEditorOptions: PropTypes.func.isRequired,
+
+  showKeyboardShortcutModal: PropTypes.func.isRequired,
+
+  setUnsavedChanges: PropTypes.func.isRequired,
+
+  startRefreshSketch: PropTypes.func.isRequired,
+
+  stopSketch: PropTypes.func.isRequired,
+
+  expandSidebar: PropTypes.func.isRequired,
+
+  collapseSidebar: PropTypes.func.isRequired,
+
+  clearConsole: PropTypes.func.isRequired,
+
+  console: PropTypes.arrayOf(PropTypes.shape({
+    method: PropTypes.string.isRequired,
+    args: PropTypes.arrayOf(PropTypes.string)
+  })).isRequired,
+
+  showRuntimeErrorWarning: PropTypes.func.isRequired,
+
+  hideRuntimeErrorWarning: PropTypes.func.isRequired,
+
+  user: PropTypes.shape({
+    authenticated: PropTypes.bool.isRequired,
+    id: PropTypes.string,
+    username: PropTypes.string
+  }).isRequired,
+};
+
+
+function mapStateToProps(state) {
+  return {
+    files: state.files,
+    selectedFile: state.files.find(file => file.isSelectedFile) ||
+      state.files.find(file => file.name === 'sketch.js') ||
+      state.files.find(file => file.name !== 'root'),
+    htmlFile: getHTMLFile(state.files),
+    ide: state.ide,
+    preferences: state.preferences,
+    editorAccessibility: state.editorAccessibility,
+    user: state.user,
+    project: state.project,
+    toast: state.toast,
+    console: state.console
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    Object.assign(
+      {},
+      EditorAccessibilityActions,
+      FileActions,
+      ProjectActions,
+      IDEActions,
+      PreferencesActions,
+      UserActions,
+      ToastActions,
+      ConsoleActions
+    ),
+    dispatch
+  );
+}
+
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEViewMobile));

client/theme.js

@@ -85,6 +85,10 @@ export default {
         border: grays.middleLight,
       },
     },
+    Icon: {
+      default: grays.middleGray,
+      hover: grays.darker
+    }
   },
   [Theme.dark]: {
     colors,
@@ -113,6 +117,10 @@ export default {
         border: grays.middleDark,
       },
     },
+    Icon: {
+      default: grays.middleLight,
+      hover: grays.lightest
+    }
   },
   [Theme.contrast]: {
     colors,
@@ -141,5 +149,9 @@ export default {
         border: grays.middleDark,
       },
     },
+    Icon: {
+      default: grays.mediumLight,
+      hover: colors.yellow
+    }
   },
 };