diff --git a/app/static/app/js/Console.jsx b/app/static/app/js/Console.jsx index 99aadde3..c3911c93 100644 --- a/app/static/app/js/Console.jsx +++ b/app/static/app/js/Console.jsx @@ -20,12 +20,15 @@ class Console extends React.Component { } this.autoscroll = props.autoscroll === true; + this.showFullscreenButton = props.showFullscreenButton === true; this.setRef = this.setRef.bind(this); this.handleMouseOver = this.handleMouseOver.bind(this); this.handleMouseOut = this.handleMouseOut.bind(this); this.downloadTxt = this.downloadTxt.bind(this); this.copyTxt = this.copyTxt.bind(this); + this.enterFullscreen = this.enterFullscreen.bind(this); + this.exitFullscreen = this.exitFullscreen.bind(this); } componentDidMount(){ @@ -79,6 +82,19 @@ class Console extends React.Component { console.log("Output copied to clipboard"); } + enterFullscreen(){ + const consoleElem = this.$console.get(0); + if (consoleElem.requestFullscreen) { + consoleElem.requestFullscreen(); + } + } + + exitFullscreen(){ + if (document.exitFullscreen){ + document.exitFullscreen(); + } + } + tearDownDynamicSource(){ if (this.sourceTimeout) clearTimeout(this.sourceTimeout); if (this.sourceRequest) this.sourceRequest.abort(); @@ -138,11 +154,17 @@ class Console extends React.Component { onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} ref={this.setRef} - >{lines.map(line => { + > + Exit Fullscreen + + {lines.map(line => { if (this.props.lang) return (
); else return line + "\n"; })} {"\n"} + + Exit Fullscreen + ]; if (this.props.showConsoleButtons){ @@ -153,6 +175,9 @@ class Console extends React.Component { + + + ); } diff --git a/app/static/app/js/css/Console.scss b/app/static/app/js/css/Console.scss index 27906952..1b262a5b 100644 --- a/app/static/app/js/css/Console.scss +++ b/app/static/app/js/css/Console.scss @@ -6,4 +6,17 @@ a{ margin-left: 4px; } +} + +.console{ + .exit-fullscreen{ + display: none; + } +} + +.console:fullscreen{ + .exit-fullscreen{ + display: block; + margin-bottom: 12px; + } } \ No newline at end of file