Merge pull request #1502 from ghalestrilo/feature/error-output

Add <Console /> to Mobile Views
This commit is contained in:
ghalestrilo 2020-07-21 17:49:26 -03:00 committed by GitHub
commit ee02a3e9d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 28 deletions

View file

@ -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;

View file

@ -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 (
<ConsoleComponent
consoleEvents={consoleEvents}
isExpanded={consoleIsExpanded}
theme={theme}
fontSize={fontSize}
collapseConsole={() => 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;

View file

@ -324,16 +324,7 @@ class IDEView extends React.Component {
runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
provideController={(ctl) => { this.cmController = ctl; }}
/>
<Console
fontSize={this.props.preferences.fontSize}
consoleEvents={this.props.console}
isExpanded={this.props.ide.consoleIsExpanded}
expandConsole={this.props.expandConsole}
collapseConsole={this.props.collapseConsole}
clearConsole={this.props.clearConsole}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
theme={this.props.preferences.theme}
/>
<Console />
</SplitPane>
<section className="preview-frame-holder">
<header className="preview-frame__header">
@ -649,6 +640,4 @@ function mapDispatchToProps(dispatch) {
);
}
export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));

View file

@ -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}
/>
</IDEWrapper>
<Footer><h2>Bottom Bar</h2></Footer>
<Footer>
<Console />
<BottomBarContent>Bottom Bar</BottomBarContent>
</Footer>
</Screen>
);
};

View file

@ -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}
/>
</Content>
<Footer>
<Console />
</Footer>
</Screen>);
};
@ -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,

6
package-lock.json generated
View file

@ -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=="
}
}
},