Merge pull request #1502 from ghalestrilo/feature/error-output
Add <Console /> to Mobile Views
This commit is contained in:
commit
ee02a3e9d6
6 changed files with 72 additions and 28 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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)));
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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
6
package-lock.json
generated
|
@ -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=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue