🔀 merging from mobile-sketch-view

Author: ghalestrilo

client/common/icons.jsx

@@ -10,6 +10,8 @@ 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';
+import Preferences from '../images/preferences.svg';
+import Play from '../images/triangle-arrow-right.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -70,3 +72,5 @@ export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
 export const ExitIcon = withLabel(Exit);
 export const DropdownArrowIcon = withLabel(DropdownArrow);
+export const PreferencesIcon = withLabel(Preferences);
+export const PlayIcon = withLabel(Play);

client/components/mobile/Footer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
 
-const background = prop('Button.default.background');
+const background = prop('Panel.default.background');
 const textColor = prop('primaryTextColor');
 
 const Footer = styled.div`

client/components/mobile/Header.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
 
-const background = prop('Button.default.background');
+const background = prop('Panel.default.background');
 const textColor = prop('primaryTextColor');
 
 const Header = styled.div`
@@ -11,15 +11,20 @@ const Header = styled.div`
   background: ${background};
   color: ${textColor};
   padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
-  padding-right: ${remSize(32)};
+  padding-left: ${remSize(16)};
+  padding-right: ${remSize(16)};
   z-index: 1;
 
   display: flex;
   flex: 1;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+
+  // TODO: 
+  svg {
+    height: 2rem;
+  }
 `;
 
 export default Header;

client/components/mobile/IconButton.jsx

@@ -1,17 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { prop, remSize } from '../../theme';
+import Button from '../../common/Button';
 
-const textColor = prop('primaryTextColor');
-
-const IconButton = styled.button`
+const ButtonWrapper = styled(Button)`
 width: 3rem;
 > svg {
   width: 100%;
-  height: auto;
-  fill: ${textColor};
-  stroke: ${textColor};
+  height: 100%;
 }
 `;
 
+const IconButton = props => (<ButtonWrapper
+  iconBefore={props.children}
+  kind={Button.kinds.inline}
+  {...{ ...props, children: null }}
+/>);
+
+IconButton.propTypes = {
+  children: PropTypes.element.isRequired
+};
+
 export default IconButton;

client/modules/IDE/components/PreviewFrame.jsx

@@ -23,7 +23,6 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
   from '../../../utils/consoleUtils';
 
 
-// Kept inside class just for linter's
 const shouldRenderSketch = (props, prevProps = undefined) => {
   const { isPlaying, previewIsRefreshing, fullView } = props;
 
@@ -337,7 +336,6 @@ class PreviewFrame extends React.Component {
       if (this.props.endSketchRefresh) {
         this.props.endSketchRefresh();
       }
-      // debugger; // eslint-disable-line
     } else {
       doc.srcdoc = '';
       srcDoc.set(doc, '  ');

client/modules/IDE/pages/MobileIDEView.jsx

@@ -22,56 +22,56 @@ import { getHTMLFile } from '../reducers/files';
 import Editor from '../components/Editor';
 import { ExitIcon } from '../../../common/icons';
 
-import PreferencesIcon from '../../../images/preferences.svg';
-import PlayIcon from '../../../images/triangle-arrow-right.svg';
+import { PreferencesIcon, PlayIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
 import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
 
-const IconLinkWrapper = styled(Link)`
-  width: 3rem;
-  margin-right: 1.25rem;
-  margin-left: none;
+const IconContainer = styled.div`
+  marginLeft: 2rem;
+  display: flex;
+`;
+
+const TitleContainer = styled.div`
+
 `;
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
 const MobileIDEView = (props) => {
   const {
-    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
+    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
+    selectedFile, updateFileContent, files,
+    closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges,
+    startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
+    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
   } = props;
 
-  const [tmController, setTmController] = useState(null);
-
-  const [overlay, setOverlay] = useState(null);
+  const [tmController, setTmController] = useState(null); // eslint-disable-line
+  const [overlay, setOverlay] = useState(null); // eslint-disable-line
 
   return (
     <Screen fullscreen>
       <Header>
-        <IconLinkWrapper to="/" aria-label="Return to original editor">
-          <ExitIcon />
-        </IconLinkWrapper>
-        <div>
+        <IconButton to="/mobile" aria-label="Return to original editor">
+          <ExitIcon viewBox="0 0 16 16" />
+        </IconButton>
+        <div style={{ marginLeft: '1rem' }}>
           <h2>{project.name}</h2>
           <h3>{selectedFile.name}</h3>
         </div>
 
-        <div style={{ marginLeft: '2rem' }}>
-          <Link to="/mobile/preferences">
-            <IconButton onClick={() => setOverlay('preferences')}>
-              <PreferencesIcon focusable="false" aria-hidden="true" />
-            </IconButton>
-          </Link>
-
-          <Link to="/mobile/preview" onClick={() => startSketch()}>
-            <IconButton>
-              <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
-            </IconButton>
-          </Link>
-        </div>
+        <IconContainer>
+          <IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
+            <PreferencesIcon focusable="false" aria-hidden="true" />
+          </IconButton>
+          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
+            <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
+          </IconButton>
+        </IconContainer>
       </Header>
 
       <IDEWrapper>

client/modules/Mobile/MobileSketchView.jsx

@@ -1,11 +1,11 @@
-/* eslint-disable */
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import Header from '../../components/mobile/Header';
+import IconButton from '../../components/mobile/IconButton';
 import PreviewFrame from '../IDE/components/PreviewFrame';
 import Screen from '../../components/mobile/MobileScreen';
 import * as ProjectActions from '../IDE/actions/project';
@@ -26,12 +26,6 @@ const Content = styled.div`
   margin-top: ${remSize(68)};
 `;
 
-const IconLinkWrapper = styled(Link)`
-  width: 2rem;
-  margin-right: 1.25rem;
-  margin-left: none;
-`;
-
 const MobileSketchView = (props) => {
   // TODO: useSelector requires react-redux ^7.1.0
   // const htmlFile = useSelector(state => getHTMLFile(state.files));
@@ -53,18 +47,13 @@ const MobileSketchView = (props) => {
 
   const { preferences, ide } = props;
 
-  useEffect(() => {
-  //   console.log(params);
-  //   getProject(params.project_id, params.username);
-  });
-
   return (
     <Screen fullscreen>
       <Header>
-        <IconLinkWrapper to="/mobile" aria-label="Return to original editor">
+        <IconButton to="/mobile" aria-label="Return to original editor">
           <ExitIcon viewBox="0 0 16 16" />
-        </IconLinkWrapper>
-        <div>
+        </IconButton>
+        <div style={{ marginLeft: '1rem' }}>
           <h2>{projectName}</h2>
           <h3><br /></h3>
         </div>

client/routes.jsx

@@ -23,7 +23,7 @@ const checkAuth = (store) => {
   store.dispatch(getUser());
 };
 
-// This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
+// TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
 const onRouteChange = (store) => {
   const path = window.location.pathname;
   if (path.includes('/mobile')) return;

client/theme.js

@@ -88,6 +88,13 @@ export default {
     Icon: {
       default: grays.middleGray,
       hover: grays.darker
+    },
+    Panel: {
+      default: {
+        foreground: colors.black,
+        background: grays.light,
+        border: grays.middleLight,
+      },
     }
   },
   [Theme.dark]: {
@@ -120,6 +127,13 @@ export default {
     Icon: {
       default: grays.middleLight,
       hover: grays.lightest
+    },
+    Panel: {
+      default: {
+        foreground: grays.light,
+        background: grays.dark,
+        border: grays.middleDark,
+      },
     }
   },
   [Theme.contrast]: {
@@ -152,6 +166,13 @@ export default {
     Icon: {
       default: grays.mediumLight,
       hover: colors.yellow
+    },
+    Panel: {
+      default: {
+        foreground: grays.light,
+        background: grays.dark,
+        border: grays.middleDark,
+      },
     }
   },
 };