diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 5b42fa83..bbc2a662 100644 --- a/client/common/icons.jsx +++ b/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); diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index 84e50d1b..45a3d87d 100644 --- a/client/components/mobile/Footer.jsx +++ b/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` diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index d638c1ac..559f2efa 100644 --- a/client/components/mobile/Header.jsx +++ b/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,8 +11,8 @@ 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; @@ -20,6 +20,11 @@ const Header = styled.div` flex-direction: row; justify-content: flex-start; align-items: center; + + // TODO: + svg { + height: 2rem; + } `; export default Header; diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index ce758376..0aeed2b7 100644 --- a/client/components/mobile/IconButton.jsx +++ b/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 => (); + +IconButton.propTypes = { + children: PropTypes.element.isRequired +}; + export default IconButton; diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 66f45ee8..b1867622 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/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, ' '); diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 7f11777b..1fb95139 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -22,8 +22,7 @@ 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'; @@ -31,47 +30,48 @@ 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 (
- - - -
+ + + +

{project.name}

{selectedFile.name}

-
- - setOverlay('preferences')}> - - - - startSketch()}> - - - -
+ + setOverlay('preferences')}> + + { startSketch(); }}> + +
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 4d101d45..49af2c2e 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/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 (
- + - -
+ +

{projectName}


diff --git a/client/routes.jsx b/client/routes.jsx index 92c3f2b3..308877e5 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -23,7 +23,7 @@ const checkAuth = (store) => { store.dispatch(getUser()); }; -// This short-circuit seems unnecessary - using the mobile navigator (future) should prevent this from being called +// TODO: This short-circuit seems unnecessary - using the mobile navigator (future) should prevent this from being called const onRouteChange = (store) => { const path = window.location.pathname; if (path.includes('/mobile')) return; diff --git a/client/theme.js b/client/theme.js index 561fd835..cc9cb48f 100644 --- a/client/theme.js +++ b/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, + }, } }, };