diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index 5d82d3c7..25f10c1d 100644 --- a/client/components/mobile/Footer.jsx +++ b/client/components/mobile/Footer.jsx @@ -1,20 +1,15 @@ import React from 'react'; import styled from 'styled-components'; -import { prop, remSize } from '../../theme'; +import { prop } from '../../theme'; + const background = prop('MobilePanel.default.background'); const textColor = prop('primaryTextColor'); -const Footer = styled.div` +export default styled.div` position: fixed; width: 100%; + bottom: 0; background: ${background}; color: ${textColor}; - padding: ${remSize(12)}; - padding-left: ${remSize(32)}; - z-index: 1; - - bottom: 0; `; - -export default Footer; diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx index 37711d27..2bd3af7e 100644 --- a/client/modules/IDE/components/Console.jsx +++ b/client/modules/IDE/components/Console.jsx @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { useSelector, useDispatch, connect } from 'react-redux'; import classNames from 'classnames'; import { Console as ConsoleFeed } from 'console-feed'; import { @@ -22,7 +23,10 @@ import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl'; import UpArrowIcon from '../../../images/up-arrow.svg'; import DownArrowIcon from '../../../images/down-arrow.svg'; -class Console extends React.Component { +import * as IDEActions from '../../IDE/actions/ide'; +import * as ConsoleActions from '../../IDE/actions/console'; + +class ConsoleComponent extends React.Component { componentDidUpdate(prevProps) { this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight; if (this.props.theme !== prevProps.theme) { @@ -132,7 +136,7 @@ class Console extends React.Component { } } -Console.propTypes = { +ConsoleComponent.propTypes = { consoleEvents: PropTypes.arrayOf(PropTypes.shape({ method: PropTypes.string.isRequired, args: PropTypes.arrayOf(PropTypes.string) @@ -146,8 +150,47 @@ Console.propTypes = { fontSize: PropTypes.number.isRequired }; -Console.defaultProps = { +ConsoleComponent.defaultProps = { consoleEvents: [] }; +// TODO: Use Hooks implementation. Requires react-redux 7.1.0 +/* +const Console = () => { + const consoleEvents = useSelector(state => state.console); + const { consoleIsExpanded } = useSelector(state => state.ide); + const { theme, fontSize } = useSelector(state => state.preferences); + + const dispatch = useDispatch(); + + return ( + dispatch({})} + expandConsole={() => dispatch({})} + clearConsole={() => dispatch({})} + dispatchConsoleEvent={() => dispatch({})} + /> + ); +}; + */ + +const Console = connect( + state => ({ + consoleEvents: state.console, + isExpanded: state.ide.consoleIsExpanded, + theme: state.preferences.theme, + fontSize: state.preferences.fontSize + }), + dispatch => ({ + collapseConsole: () => dispatch(IDEActions.collapseConsole()), + expandConsole: () => dispatch(IDEActions.expandConsole()), + clearConsole: () => dispatch(ConsoleActions.clearConsole()), + dispatchConsoleEvent: msgs => dispatch(ConsoleActions.dispatchConsoleEvent(msgs)), + }) +)(ConsoleComponent); + export default Console; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index bc05ef2a..fbcecf1b 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -324,16 +324,7 @@ class IDEView extends React.Component { runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible} provideController={(ctl) => { this.cmController = ctl; }} /> - +
@@ -649,6 +640,4 @@ function mapDispatchToProps(dispatch) { ); } - export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView))); - diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 180cbb2e..943c980e 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { useState } from 'react'; +import styled from 'styled-components'; // Imports to be Refactored import { bindActionCreators } from 'redux'; @@ -25,9 +26,16 @@ 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 Console from '../components/Console'; +import { remSize } from '../../../theme'; const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); +const BottomBarContent = styled.h2` + padding: ${remSize(12)}; + padding-left: ${remSize(32)}; +`; + const MobileIDEView = (props) => { const { preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, @@ -94,7 +102,10 @@ const MobileIDEView = (props) => { provideController={setTmController} /> -

Bottom Bar

+
+ + Bottom Bar +
); }; diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 64eabb5e..9c80c88d 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -7,6 +7,7 @@ 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 Console from '../IDE/components/Console'; import * as ProjectActions from '../IDE/actions/project'; import * as IDEActions from '../IDE/actions/ide'; import * as PreferencesActions from '../IDE/actions/preferences'; @@ -18,6 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files'; import { ExitIcon } from '../../common/icons'; import { remSize } from '../../theme'; +import Footer from '../../components/mobile/Footer'; const Content = styled.div` @@ -82,6 +84,9 @@ const MobileSketchView = (props) => { clearConsole={clearConsole} /> + ); }; @@ -146,7 +151,6 @@ MobileSketchView.propTypes = { justOpenedProject: PropTypes.bool.isRequired, errorType: PropTypes.string, runtimeErrorWarningVisible: PropTypes.bool.isRequired, - uploadFileModalVisible: PropTypes.bool.isRequired }).isRequired, projectName: PropTypes.string.isRequired, diff --git a/package-lock.json b/package-lock.json index 87b0f751..04592b99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11017,7 +11017,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -34872,7 +34873,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } },