Mobile Preferences Screen Prototype

client/components/mobile/Header.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
 const background = prop('MobilePanel.default.background');
 const textColor = prop('primaryTextColor');
 
-const Header = styled.div`
+
+const HeaderDiv = styled.div`
   position: fixed;
   width: 100%;
-  background: ${background};
+  background: ${props => (props.transparent ? 'transparent' : background)};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(16)};
@@ -23,8 +25,56 @@ const Header = styled.div`
 
   // TODO: 
   svg {
-    height: 2rem;
+    max-height: ${remSize(32)};
+    padding: ${remSize(4)}
   }
 `;
 
+const IconContainer = styled.div`
+  margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))};
+  display: flex;
+`;
+
+
+const TitleContainer = styled.div`
+  margin-left: ${remSize(4)};
+  margin-right: auto;
+
+  ${props => props.padded && `h2{
+    padding-top: ${remSize(10)};
+    padding-bottom: ${remSize(10)};
+  }`}
+`;
+
+const Header = ({
+  title, subtitle, leftButton, children, transparent
+}) => (
+  <HeaderDiv transparent={transparent}>
+    {leftButton}
+    <TitleContainer padded={subtitle === null}>
+      {title && <h2>{title}</h2>}
+      {subtitle && <h3>{subtitle}</h3>}
+    </TitleContainer>
+    <IconContainer>
+      {children}
+    </IconContainer>
+  </HeaderDiv>
+);
+
+Header.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  leftButton: PropTypes.element,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  transparent: PropTypes.bool
+};
+
+Header.defaultProps = {
+  title: null,
+  subtitle: null,
+  leftButton: null,
+  children: [],
+  transparent: false
+};
+
 export default Header;

client/components/mobile/IconButton.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Button from '../../common/Button';
+import { remSize } from '../../theme';
 
 const ButtonWrapper = styled(Button)`
-width: 3rem;
+width: ${remSize(48)};
 > svg {
   width: 100%;
   height: 100%;

client/components/mobile/MobileScreen.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Screen = ({ children }) => (
-  <div className="fullscreen-preview">
+const Screen = ({ children, fullscreen }) => (
+  <div className={fullscreen && 'fullscreen-preview'}>
     {children}
   </div>
 );
+
+Screen.defaultProps = {
+  fullscreen: false
+};
+
 Screen.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  fullscreen: PropTypes.bool
 };
 
 export default Screen;

client/components/mobile/PreferencePicker.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+
+
+const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))`
+  color: ${prop('primaryTextColor')};
+`;
+
+const Preference = styled.div.attrs(props => ({ ...props, className: 'preference' }))`
+  flex-wrap: nowrap !important;
+  align-items: baseline !important;
+  justify-items: space-between;
+`;
+
+const OptionLabel = styled.label.attrs({ className: 'preference__option' })`
+  font-size: ${remSize(14)} !important;
+`;
+
+const PreferencePicker = ({
+  title, value, onSelect, options,
+}) => (
+  <Preference>
+    <PreferenceTitle>{title}</PreferenceTitle>
+    <div className="preference__options">
+      {options.map(option => (
+        <React.Fragment key={`${option.name}-${option.id}`} >
+          <input
+            type="radio"
+            onChange={() => onSelect(option.value)}
+            aria-label={option.ariaLabel}
+            name={option.name}
+            key={`${option.name}-${option.id}-input`}
+            id={option.id}
+            className="preference__radio-button"
+            value={option.value}
+            checked={value === option.value}
+          />
+          <OptionLabel
+            key={`${option.name}-${option.id}-label`}
+            htmlFor={option.id}
+          >
+            {option.label}
+          </OptionLabel>
+        </React.Fragment>))}
+    </div>
+  </Preference>
+);
+
+PreferencePicker.defaultProps = {
+  options: []
+};
+
+PreferencePicker.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    ariaLabel: PropTypes.string,
+  })),
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default PreferencePicker;

client/modules/IDE/pages/IDEViewMobile.jsx → client/modules/IDE/pages/MobileIDEView.jsx

@@ -1,7 +1,5 @@
 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';
@@ -27,16 +25,10 @@ import Header from '../../../components/mobile/Header';
 import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
-import { remSize } from '../../../theme';
-
-const IconContainer = styled.div`
-  margin-left: ${remSize(32)};
-  display: flex;
-`;
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
-const IDEViewMobile = (props) => {
+const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
     selectedFile, updateFileContent, files,
@@ -49,22 +41,21 @@ const IDEViewMobile = (props) => {
   const [overlay, setOverlay] = useState(null); // eslint-disable-line
 
   return (
-    <Screen>
-      <Header>
-        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
-        <div style={{ marginLeft: '1rem' }}>
-          <h2>{project.name}</h2>
-          <h3>{selectedFile.name}</h3>
-        </div>
-
-        <IconContainer>
-          <IconButton
-            onClick={() => setOverlay('preferences')}
-            icon={PreferencesIcon}
-            aria-label="Open preferences menu"
-          />
-          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
-        </IconContainer>
+    <Screen fullscreen>
+      <Header
+        title={project.name}
+        subtitle={selectedFile.name}
+        leftButton={
+          <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
+        }
+      >
+        <IconButton
+          to="/mobile/preferences"
+          onClick={() => setOverlay('preferences')}
+          icon={PreferencesIcon}
+          aria-label="Open preferences menu"
+        />
+        <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
       </Header>
 
       <IDEWrapper>
@@ -109,7 +100,7 @@ const IDEViewMobile = (props) => {
 };
 
 
-IDEViewMobile.propTypes = {
+MobileIDEView.propTypes = {
 
   preferences: PropTypes.shape({
     fontSize: PropTypes.number.isRequired,
@@ -256,4 +247,4 @@ function mapDispatchToProps(dispatch) {
 }
 
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEViewMobile));
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobileIDEView));