From 7604e27c4014ff99302b77718e861a4ad8e3c16a Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:30:34 -0300 Subject: [PATCH 01/11] :ok_hand: mark comment on routes.jsx as TODO --- client/routes.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/routes.jsx b/client/routes.jsx index 43c1918d..3a6a4b77 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -22,7 +22,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; From ec8566feeede9088d82e0cbcfcc48796078b3647 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:32:37 -0300 Subject: [PATCH 02/11] :ok_hand: remove empty useEffect --- client/modules/Mobile/MobileSketchView.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index e6d522f1..903177ea 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -53,11 +53,6 @@ const MobileSketchView = (props) => { const { preferences, ide } = props; - useEffect(() => { - // console.log(params); - // getProject(params.project_id, params.username); - }); - return (
From ebb952527c81c6a07a0215d43940a5abe6b005b7 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:40:54 -0300 Subject: [PATCH 03/11] :ok_hand: move icons to common/icons --- client/common/icons.jsx | 4 ++++ client/modules/IDE/pages/IDEViewMobile.jsx | 3 +-- 2 files changed, 5 insertions(+), 2 deletions(-) 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/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 8c12f1f8..eb742484 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -23,8 +23,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'; From 75bd5a3920e1a46da8ac53fb180d97fb01333bed Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:45:17 -0300 Subject: [PATCH 04/11] :ok_hand: remove eslint-disable --- client/modules/IDE/pages/IDEViewMobile.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index eb742484..6c9b6af6 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,4 +1,3 @@ -/* eslint-disable */ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -41,12 +40,15 @@ const isUserOwner = ({ project, user }) => (project.owner && project.owner.id == 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, 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 ( From 1eb1bff7760f8283e56853dd1fb36c106550a0e7 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:46:35 -0300 Subject: [PATCH 05/11] :ok_hand: remove debugger comment --- client/modules/IDE/components/PreviewFrame.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 66f45ee8..54283bb4 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -337,7 +337,6 @@ class PreviewFrame extends React.Component { if (this.props.endSketchRefresh) { this.props.endSketchRefresh(); } - // debugger; // eslint-disable-line } else { doc.srcdoc = ''; srcDoc.set(doc, ' '); From c39211d4722f548896a76aa8ad2cdeeefc509dd8 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:49:15 -0300 Subject: [PATCH 06/11] :ok_hand: remove linter comment --- client/modules/IDE/components/PreviewFrame.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 54283bb4..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; From 78ec304e1572819874ee4631ef8560539b138eec Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 14:51:40 -0300 Subject: [PATCH 07/11] :ok_hand: remove eslint-disable --- client/modules/Mobile/MobileSketchView.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 903177ea..366c68bf 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,5 +1,4 @@ -/* 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'; From 9ca0995461da854e6c7c52f95e6ad6bcb549fe38 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 18:13:42 -0300 Subject: [PATCH 08/11] :ok_hand: create Panel color object in theme --- client/components/mobile/Footer.jsx | 2 +- client/components/mobile/Header.jsx | 2 +- client/theme.js | 21 +++++++++++++++++++++ 3 files changed, 23 insertions(+), 2 deletions(-) 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..35ccf538 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` 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, + }, } }, }; From 7d24c07fcccec000c295daab08435d9ce3176abd Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 18:35:00 -0300 Subject: [PATCH 09/11] :ok_hand: use common/Button component for IconButton --- client/components/mobile/IconButton.jsx | 19 +++++++++++++------ client/modules/IDE/pages/IDEViewMobile.jsx | 2 +- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index ce758376..1057d952 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}; } `; +const IconButton = ({ children }) => (); + +IconButton.propTypes = { + children: PropTypes.element.isRequired +}; + export default IconButton; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 6c9b6af6..a16a27f1 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -61,7 +61,7 @@ const IDEViewMobile = (props) => {

{selectedFile.name}

-
+
setOverlay('preferences')}> From 8a0b09d4168404253ab38aa40aade7654e807a7d Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 19:54:48 -0300 Subject: [PATCH 10/11] :ok_hand: use common/Button component for IconButton on screens --- client/components/mobile/Header.jsx | 9 ++++-- client/components/mobile/IconButton.jsx | 8 ++--- client/modules/IDE/pages/IDEViewMobile.jsx | 37 ++++++++++------------ client/modules/Mobile/MobileSketchView.jsx | 11 ++----- 4 files changed, 30 insertions(+), 35 deletions(-) diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 35ccf538..559f2efa 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -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 1057d952..0aeed2b7 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -7,14 +7,14 @@ const ButtonWrapper = styled(Button)` width: 3rem; > svg { width: 100%; - height: auto; + height: 100%; } `; -const IconButton = ({ children }) => ( (); IconButton.propTypes = { diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index a16a27f1..58845f1d 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -30,10 +30,13 @@ 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); @@ -53,30 +56,22 @@ const IDEViewMobile = (props) => { return (
- - - -
+ + + +

{project.name}

{selectedFile.name}

-
+ setOverlay('preferences')}> - { - // alert('starting sketch'); - startSketch(); - }} - > - - - -
+ { startSketch(); }}> + +
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 366c68bf..e48ec8b1 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -5,6 +5,7 @@ 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'; @@ -25,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)); @@ -55,9 +50,9 @@ const MobileSketchView = (props) => { return (
- + - +

{projectName}


From 7805accf95d13ecee87e09ae0df47d59abed2b1b Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 29 Jun 2020 19:57:39 -0300 Subject: [PATCH 11/11] :bug: fix margin on header title --- client/modules/Mobile/MobileSketchView.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index e48ec8b1..fb50ffe2 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -53,7 +53,7 @@ const MobileSketchView = (props) => { -
+

{projectName}