🚧 Add Console to Preview Screen
This commit is contained in:
parent
95295422a3
commit
8e137d0b68
1 changed files with 23 additions and 2 deletions
|
@ -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`
|
||||||
|
@ -39,13 +41,16 @@ const MobileSketchView = (props) => {
|
||||||
// Actions
|
// Actions
|
||||||
const {
|
const {
|
||||||
setTextOutput, setGridOutput, setSoundOutput,
|
setTextOutput, setGridOutput, setSoundOutput,
|
||||||
endSketchRefresh, stopSketch,
|
endSketchRefresh, stopSketch, console,
|
||||||
dispatchConsoleEvent, expandConsole, clearConsole,
|
dispatchConsoleEvent, expandConsole, clearConsole,
|
||||||
setBlobUrl,
|
setBlobUrl,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const { preferences, ide } = props;
|
const { preferences, ide } = props;
|
||||||
|
|
||||||
|
// FIXME:
|
||||||
|
const collapseConsole = () => {};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Screen fullscreen>
|
<Screen fullscreen>
|
||||||
<Header
|
<Header
|
||||||
|
@ -82,6 +87,17 @@ const MobileSketchView = (props) => {
|
||||||
clearConsole={clearConsole}
|
clearConsole={clearConsole}
|
||||||
/>
|
/>
|
||||||
</Content>
|
</Content>
|
||||||
|
<Footer before={<Console
|
||||||
|
fontSize={preferences.fontSize}
|
||||||
|
consoleEvents={console}
|
||||||
|
isExpanded={ide.consoleIsExpanded}
|
||||||
|
clearConsole={clearConsole}
|
||||||
|
theme={preferences.theme}
|
||||||
|
dispatchConsoleEvent={dispatchConsoleEvent}
|
||||||
|
expandConsole={expandConsole}
|
||||||
|
collapseConsole={collapseConsole}
|
||||||
|
/>}
|
||||||
|
/>
|
||||||
</Screen>);
|
</Screen>);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -146,7 +162,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,
|
||||||
|
@ -160,6 +175,11 @@ MobileSketchView.propTypes = {
|
||||||
setBlobUrl: PropTypes.func.isRequired,
|
setBlobUrl: PropTypes.func.isRequired,
|
||||||
expandConsole: PropTypes.func.isRequired,
|
expandConsole: PropTypes.func.isRequired,
|
||||||
clearConsole: PropTypes.func.isRequired,
|
clearConsole: PropTypes.func.isRequired,
|
||||||
|
|
||||||
|
console: PropTypes.arrayOf(PropTypes.shape({
|
||||||
|
method: PropTypes.string.isRequired,
|
||||||
|
args: PropTypes.arrayOf(PropTypes.string)
|
||||||
|
})).isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
|
@ -169,6 +189,7 @@ function mapStateToProps(state) {
|
||||||
files: state.files,
|
files: state.files,
|
||||||
ide: state.ide,
|
ide: state.ide,
|
||||||
preferences: state.preferences,
|
preferences: state.preferences,
|
||||||
|
console: state.console,
|
||||||
selectedFile: state.files.find(file => file.isSelectedFile) ||
|
selectedFile: state.files.find(file => file.isSelectedFile) ||
|
||||||
state.files.find(file => file.name === 'sketch.js') ||
|
state.files.find(file => file.name === 'sketch.js') ||
|
||||||
state.files.find(file => file.name !== 'root'),
|
state.files.find(file => file.name !== 'root'),
|
||||||
|
|
Loading…
Reference in a new issue