diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx index 5d82d3c7..a90079cc 100644 --- a/client/components/mobile/Footer.jsx +++ b/client/components/mobile/Footer.jsx @@ -1,20 +1,42 @@ 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 Footer = styled.div` +const FooterWrapper = styled.div` position: fixed; width: 100%; + bottom: 0; +`; + +const FooterContent = styled.div` background: ${background}; color: ${textColor}; padding: ${remSize(12)}; padding-left: ${remSize(32)}; - z-index: 1; - - bottom: 0; `; +const Footer = ({ before, children }) => ( + + {before} + + {children} + + +); + +Footer.propTypes = { + before: PropTypes.element, + children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]), +}; + +Footer.defaultProps = { + before: <>, + children: <> +}; + export default Footer; diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx index 37711d27..cdc28cd3 100644 --- a/client/modules/IDE/components/Console.jsx +++ b/client/modules/IDE/components/Console.jsx @@ -1,5 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { bindActionCreators } from 'redux'; + +import { useSelector, useDispatch } from 'react-redux'; import classNames from 'classnames'; import { Console as ConsoleFeed } from 'console-feed'; import { @@ -22,7 +25,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 +138,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 +152,46 @@ Console.propTypes = { fontSize: PropTypes.number.isRequired }; -Console.defaultProps = { +ConsoleComponent.defaultProps = { consoleEvents: [] }; +const Console = () => { + const consoleEvents = useSelector(state => state.console); + const { consoleIsExpanded } = useSelector(state => state.ide); + const { theme, fontSize } = useSelector(state => state.preferences); + + const { + collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent + } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch()); + + return ( + + ); +}; + +// 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..917415e2 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,6 +26,8 @@ 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); @@ -94,7 +97,9 @@ const MobileIDEView = (props) => { provideController={setTmController} /> -

Bottom Bar

+
} > +

Bottom Bar

+
); }; diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index 297d60a4..7625aacd 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -89,27 +89,4 @@ const MobilePreferences = () => { ); }; - -MobilePreferences.propTypes = { - fontSize: PropTypes.number.isRequired, - lineNumbers: PropTypes.bool.isRequired, - autosave: PropTypes.bool.isRequired, - linewrap: PropTypes.bool.isRequired, - textOutput: PropTypes.bool.isRequired, - gridOutput: PropTypes.bool.isRequired, - soundOutput: PropTypes.bool.isRequired, - lintWarning: PropTypes.bool.isRequired, - theme: PropTypes.string.isRequired, - - setLinewrap: PropTypes.func.isRequired, - setLintWarning: PropTypes.func.isRequired, - setTheme: PropTypes.func.isRequired, - setFontSize: PropTypes.func.isRequired, - setLineNumbers: PropTypes.func.isRequired, - setAutosave: PropTypes.func.isRequired, - setTextOutput: PropTypes.func.isRequired, - setGridOutput: PropTypes.func.isRequired, - setSoundOutput: PropTypes.func.isRequired, -}; - export default withRouter(MobilePreferences); diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index ad814e10..e5b01996 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'; @@ -17,6 +18,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` z-index: 0; @@ -73,6 +75,7 @@ const MobileSketchView = (props) => { clearConsole={clearConsole} /> +