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 React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { prop, remSize } from '../../theme';
|
import { prop } from '../../theme';
|
||||||
|
|
||||||
|
|
||||||
const background = prop('MobilePanel.default.background');
|
const background = prop('MobilePanel.default.background');
|
||||||
const textColor = prop('primaryTextColor');
|
const textColor = prop('primaryTextColor');
|
||||||
|
|
||||||
const Footer = styled.div`
|
export default styled.div`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
background: ${background};
|
background: ${background};
|
||||||
color: ${textColor};
|
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 PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useSelector, useDispatch, connect } from 'react-redux';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { Console as ConsoleFeed } from 'console-feed';
|
import { Console as ConsoleFeed } from 'console-feed';
|
||||||
import {
|
import {
|
||||||
|
@ -22,7 +23,10 @@ import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
|
||||||
import UpArrowIcon from '../../../images/up-arrow.svg';
|
import UpArrowIcon from '../../../images/up-arrow.svg';
|
||||||
import DownArrowIcon from '../../../images/down-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) {
|
componentDidUpdate(prevProps) {
|
||||||
this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
|
this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
|
||||||
if (this.props.theme !== prevProps.theme) {
|
if (this.props.theme !== prevProps.theme) {
|
||||||
|
@ -132,7 +136,7 @@ class Console extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Console.propTypes = {
|
ConsoleComponent.propTypes = {
|
||||||
consoleEvents: PropTypes.arrayOf(PropTypes.shape({
|
consoleEvents: PropTypes.arrayOf(PropTypes.shape({
|
||||||
method: PropTypes.string.isRequired,
|
method: PropTypes.string.isRequired,
|
||||||
args: PropTypes.arrayOf(PropTypes.string)
|
args: PropTypes.arrayOf(PropTypes.string)
|
||||||
|
@ -146,8 +150,47 @@ Console.propTypes = {
|
||||||
fontSize: PropTypes.number.isRequired
|
fontSize: PropTypes.number.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
Console.defaultProps = {
|
ConsoleComponent.defaultProps = {
|
||||||
consoleEvents: []
|
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;
|
export default Console;
|
||||||
|
|
|
@ -324,16 +324,7 @@ class IDEView extends React.Component {
|
||||||
runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
|
runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
|
||||||
provideController={(ctl) => { this.cmController = ctl; }}
|
provideController={(ctl) => { this.cmController = ctl; }}
|
||||||
/>
|
/>
|
||||||
<Console
|
<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}
|
|
||||||
/>
|
|
||||||
</SplitPane>
|
</SplitPane>
|
||||||
<section className="preview-frame-holder">
|
<section className="preview-frame-holder">
|
||||||
<header className="preview-frame__header">
|
<header className="preview-frame__header">
|
||||||
|
@ -649,6 +640,4 @@ function mapDispatchToProps(dispatch) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));
|
export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { withRouter } from 'react-router';
|
import { withRouter } from 'react-router';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
// Imports to be Refactored
|
// Imports to be Refactored
|
||||||
import { bindActionCreators } from 'redux';
|
import { bindActionCreators } from 'redux';
|
||||||
|
@ -25,9 +26,16 @@ import Header from '../../../components/mobile/Header';
|
||||||
import Screen from '../../../components/mobile/MobileScreen';
|
import Screen from '../../../components/mobile/MobileScreen';
|
||||||
import Footer from '../../../components/mobile/Footer';
|
import Footer from '../../../components/mobile/Footer';
|
||||||
import IDEWrapper from '../../../components/mobile/IDEWrapper';
|
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 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 MobileIDEView = (props) => {
|
||||||
const {
|
const {
|
||||||
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
|
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
|
||||||
|
@ -94,7 +102,10 @@ const MobileIDEView = (props) => {
|
||||||
provideController={setTmController}
|
provideController={setTmController}
|
||||||
/>
|
/>
|
||||||
</IDEWrapper>
|
</IDEWrapper>
|
||||||
<Footer><h2>Bottom Bar</h2></Footer>
|
<Footer>
|
||||||
|
<Console />
|
||||||
|
<BottomBarContent>Bottom Bar</BottomBarContent>
|
||||||
|
</Footer>
|
||||||
</Screen>
|
</Screen>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,6 +7,7 @@ import Header from '../../components/mobile/Header';
|
||||||
import IconButton from '../../components/mobile/IconButton';
|
import IconButton from '../../components/mobile/IconButton';
|
||||||
import PreviewFrame from '../IDE/components/PreviewFrame';
|
import PreviewFrame from '../IDE/components/PreviewFrame';
|
||||||
import Screen from '../../components/mobile/MobileScreen';
|
import Screen from '../../components/mobile/MobileScreen';
|
||||||
|
import Console from '../IDE/components/Console';
|
||||||
import * as ProjectActions from '../IDE/actions/project';
|
import * as ProjectActions from '../IDE/actions/project';
|
||||||
import * as IDEActions from '../IDE/actions/ide';
|
import * as IDEActions from '../IDE/actions/ide';
|
||||||
import * as PreferencesActions from '../IDE/actions/preferences';
|
import * as PreferencesActions from '../IDE/actions/preferences';
|
||||||
|
@ -18,6 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files';
|
||||||
|
|
||||||
import { ExitIcon } from '../../common/icons';
|
import { ExitIcon } from '../../common/icons';
|
||||||
import { remSize } from '../../theme';
|
import { remSize } from '../../theme';
|
||||||
|
import Footer from '../../components/mobile/Footer';
|
||||||
|
|
||||||
|
|
||||||
const Content = styled.div`
|
const Content = styled.div`
|
||||||
|
@ -82,6 +84,9 @@ const MobileSketchView = (props) => {
|
||||||
clearConsole={clearConsole}
|
clearConsole={clearConsole}
|
||||||
/>
|
/>
|
||||||
</Content>
|
</Content>
|
||||||
|
<Footer>
|
||||||
|
<Console />
|
||||||
|
</Footer>
|
||||||
</Screen>);
|
</Screen>);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -146,7 +151,6 @@ MobileSketchView.propTypes = {
|
||||||
justOpenedProject: PropTypes.bool.isRequired,
|
justOpenedProject: PropTypes.bool.isRequired,
|
||||||
errorType: PropTypes.string,
|
errorType: PropTypes.string,
|
||||||
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
|
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
|
||||||
uploadFileModalVisible: PropTypes.bool.isRequired
|
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
|
|
||||||
projectName: PropTypes.string.isRequired,
|
projectName: PropTypes.string.isRequired,
|
||||||
|
|
6
package-lock.json
generated
6
package-lock.json
generated
|
@ -11017,7 +11017,8 @@
|
||||||
},
|
},
|
||||||
"kind-of": {
|
"kind-of": {
|
||||||
"version": "6.0.2",
|
"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": {
|
"kind-of": {
|
||||||
"version": "6.0.2",
|
"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