diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx deleted file mode 100644 index ce9c09fd..00000000 --- a/client/common/Icons.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -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 DropdownArrow from '../images/down-filled-triangle.svg'; -import Play from '../images/triangle-arrow-right.svg'; -import Preferences from '../images/preferences.svg'; -import Exit from '../images/exit.svg'; - - -// HOC that adds the right web accessibility props -// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html - -// could also give these a default size, color, etc. based on the theme -// Need to add size to these - like small icon, medium icon, large icon. etc. -function withLabel(SvgComponent) { - const Icon = (props) => { - const { 'aria-label': ariaLabel } = props; - if (ariaLabel) { - return (); - } - return (); - }; - - Icon.propTypes = { - 'aria-label': PropTypes.string - }; - - Icon.defaultProps = { - 'aria-label': null - }; - - return Icon; -} - -export const SortArrowUpIcon = withLabel(SortArrowUp); -export const SortArrowDownIcon = withLabel(SortArrowDown); -export const GithubIcon = withLabel(Github); -export const GoogleIcon = withLabel(Google); -export const PlusIcon = withLabel(Plus); -export const CloseIcon = withLabel(Close); -export const DropdownArrowIcon = withLabel(DropdownArrow); -export const PlayIcon = withLabel(Play); -export const PreferencesIcon = withLabel(Preferences); -export const ExitIcon = withLabel(Exit); diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 06f18895..5b42fa83 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { remSize, prop } from '../theme'; +import { 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'; diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index fb0f0b78..c7ca9359 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -20,7 +20,6 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; -import { prop, remSize } from '../../../theme'; import { ExitIcon } from '../../../common/icons'; import PreferencesIcon from '../../../images/preferences.svg'; @@ -32,16 +31,6 @@ import Screen from '../../../components/mobile/MobileScreen'; import Footer from '../../../components/mobile/Footer'; import IDEWrapper from '../../../components/mobile/IDEWrapper'; -const textColor = prop('primaryTextColor'); - -const Icon = styled.a` - > svg { - fill: ${textColor}; - color: ${textColor}; - margin-left: ${remSize(16)}; - } -`; - const IconLinkWrapper = styled(Link)` width: 3rem; margin-right: 1.25rem; diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 25ef9c71..af68f968 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; import { bindActionCreators } from 'redux'; @@ -9,11 +9,14 @@ import PreviewFrame from '../IDE/components/PreviewFrame'; import Screen from '../../components/mobile/MobileScreen'; import * as ProjectActions from '../IDE/actions/project'; import * as IDEActions from '../IDE/actions/ide'; +import * as PreferencesActions from '../IDE/actions/preferences'; +import * as ConsoleActions from '../IDE/actions/console'; +import * as FilesActions from '../IDE/actions/files'; -import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files'; +import { getHTMLFile } from '../IDE/reducers/files'; -import { ExitIcon } from '../../common/Icons'; +import { ExitIcon } from '../../common/icons'; import { remSize } from '../../theme'; @@ -28,12 +31,7 @@ const IconLinkWrapper = styled(Link)` margin-left: none; `; -const noop = () => {}; - const MobileSketchView = (props) => { - const [overlay, setOverlay] = useState(null); - - // TODO: useSelector requires react-redux ^7.1.0 // const htmlFile = useSelector(state => getHTMLFile(state.files)); // const jsFiles = useSelector(state => getJSFiles(state.files)); @@ -41,11 +39,18 @@ const MobileSketchView = (props) => { // const files = useSelector(state => state.files); const { - htmlFile, jsFiles, cssFiles, files, params + htmlFile, files, selectedFile } = props; // Actions - const { getProject, startSketch } = props; + const { + setTextOutput, setGridOutput, setSoundOutput, + endSketchRefresh, stopSketch, + dispatchConsoleEvent, expandConsole, clearConsole, + setBlobUrl, + } = props; + + const { preferences, ide } = props; // useEffect(() => { // console.log(params); @@ -65,30 +70,35 @@ const MobileSketchView = (props) => {

Hello

-
+
} - isAccessibleOutputPlaying={false} - textOutput={false} - gridOutput={false} - soundOutput={false} - previewIsRefreshing={false} + fullView - dispatchConsoleEvent={noop} - endSketchRefresh={noop} - setBlobUrl={noop} - stopSketch={noop} - expandConsole={noop} - clearConsole={noop} + content={selectedFile.content} + + isPlaying={ide.isPlaying} + isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} + previewIsRefreshing={ide.previewIsRefreshing} + + textOutput={preferences.textOutput} + gridOutput={preferences.gridOutput} + soundOutput={preferences.soundOutput} + autorefresh={preferences.autorefresh} + + setTextOutput={setTextOutput} + setGridOutput={setGridOutput} + setSoundOutput={setSoundOutput} + dispatchConsoleEvent={dispatchConsoleEvent} + endSketchRefresh={endSketchRefresh} + stopSketch={stopSketch} + setBlobUrl={setBlobUrl} + expandConsole={expandConsole} + clearConsole={clearConsole} /> -
+ ); }; @@ -98,42 +108,93 @@ MobileSketchView.propTypes = { project_id: PropTypes.string, username: PropTypes.string }).isRequired, + htmlFile: PropTypes.shape({ id: PropTypes.string.isRequired, content: PropTypes.string.isRequired, name: PropTypes.string.isRequired }).isRequired, - jsFiles: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - content: PropTypes.string.isRequired, - name: PropTypes.string.isRequired - })).isRequired, - cssFiles: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - content: PropTypes.string.isRequired, - name: PropTypes.string.isRequired - })).isRequired, files: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired, content: PropTypes.string.isRequired, name: PropTypes.string.isRequired })).isRequired, - getProject: PropTypes.func.isRequired, - startSketch: PropTypes.func.isRequired, + + selectedFile: PropTypes.shape({ + id: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + }).isRequired, + + preferences: PropTypes.shape({ + 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, + + setTextOutput: PropTypes.func.isRequired, + setGridOutput: PropTypes.func.isRequired, + setSoundOutput: PropTypes.func.isRequired, + dispatchConsoleEvent: PropTypes.func.isRequired, + endSketchRefresh: PropTypes.func.isRequired, + stopSketch: PropTypes.func.isRequired, + setBlobUrl: PropTypes.func.isRequired, + expandConsole: PropTypes.func.isRequired, + clearConsole: PropTypes.func.isRequired, }; function mapStateToProps(state) { return { htmlFile: getHTMLFile(state.files), - jsFiles: getJSFiles(state.files), - cssFiles: getCSSFiles(state.files), project: state.project, - files: state.files + files: state.files, + ide: state.ide, + preferences: state.preferences, + selectedFile: state.files.find(file => file.isSelectedFile) || + state.files.find(file => file.name === 'sketch.js') || + state.files.find(file => file.name !== 'root'), }; } function mapDispatchToProps(dispatch) { - return bindActionCreators({ ...ProjectActions, ...IDEActions }, dispatch); + return bindActionCreators({ + ...ProjectActions, ...IDEActions, ...PreferencesActions, ...ConsoleActions, ...FilesActions + }, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView); diff --git a/client/routes.jsx b/client/routes.jsx index e7789943..a98bc04d 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -1,4 +1,4 @@ -import { Route, IndexRoute, Router, Switch, useRouteMatch } from 'react-router'; +import { Route, IndexRoute } from 'react-router'; import React from 'react'; import App from './modules/App/App'; import IDEView from './modules/IDE/pages/IDEView'; @@ -23,6 +23,9 @@ const checkAuth = (store) => { }; const onRouteChange = (store) => { + // FIXME: This seems unnecessary - using the mobile navigator should prevent this from being called + const path = window.location.pathname; + if (path.includes('/mobile')) return; store.dispatch(stopSketch()); };