mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-27 08:40:10 +02:00
Code Issues Releases Wiki Activity

refactor console position in detached mode. fixes #319

Browse Source
This commit is contained in:
Kushagra Gour
2018-09-29 18:18:54 +05:30
parent e1426b9385
commit bc8ad6d7ad
3 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ContentWrap.jsx
View File

@@ -549,6 +549,7 @@ export default class ContentWrap extends Component {
trackEvent('ui', 'updateCodeMode', mode); trackEvent('ui', 'updateCodeMode', mode);
} }
} }
detachPreview() { detachPreview() {
if (this.detachedWindow) { if (this.detachedWindow) {
this.detachedWindow.focus(); this.detachedWindow.focus();
@@ -558,7 +559,6 @@ export default class ContentWrap extends Component {
const iframeWidth = iframeBounds.width; const iframeWidth = iframeBounds.width;
const iframeHeight = iframeBounds.height; const iframeHeight = iframeBounds.height;
document.body.classList.add('is-detached-mode'); document.body.classList.add('is-detached-mode');
window.globalConsoleContainerEl.insertBefore(window.consoleEl, null);
this.detachedWindow = window.open( this.detachedWindow = window.open(
'./preview.html', './preview.html',
@@ -574,7 +574,6 @@ export default class ContentWrap extends Component {
if (this.detachedWindow && this.detachedWindow.closed) { if (this.detachedWindow && this.detachedWindow.closed) {
clearInterval(intervalID); clearInterval(intervalID);
document.body.classList.remove('is-detached-mode'); document.body.classList.remove('is-detached-mode');
$('#js-demo-side').insertBefore(window.consoleEl, null);
this.detachedWindow = null; this.detachedWindow = null;
// Update main frame preview to get latest changes (which were not // Update main frame preview to get latest changes (which were not
// getting reflected while detached window was open) // getting reflected while detached window was open)

2
src/components/app.jsx
View File

@@ -1181,7 +1181,7 @@ export default class App extends Component {
onEditorFocus={this.editorFocusHandler.bind(this)} onEditorFocus={this.editorFocusHandler.bind(this)}
onSplitUpdate={this.splitUpdateHandler.bind(this)} onSplitUpdate={this.splitUpdateHandler.bind(this)}
/> />
<div class="global-console-container" id="globalConsoleContainerEl" />
<Footer <Footer
prefs={this.state.prefs} prefs={this.state.prefs}
layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)} layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}

23
src/style.css
View File

@@ -6,6 +6,9 @@
--color-button: #d3a447; --color-button: #d3a447;
--color-focus-outline: #d3a447; --color-focus-outline: #d3a447;
--color-form-control-bg: #2c214b; --color-form-control-bg: #2c214b;
--footer-height: 37px;
--console-height: 30px;
} }
body { body {
@@ -403,7 +406,9 @@ body:not(.light-version).overlay-visible .main-container {
} }
.is-detached-mode .demo-side { .is-detached-mode .demo-side {
display: none; /* display: none; */
width: 0px !important;
height: 0px !important;
} }
.is-detached-mode .code-side { .is-detached-mode .code-side {
@@ -1418,12 +1423,6 @@ body > #demo-frame {
cursor: ns-resize; cursor: ns-resize;
} }
.global-console-container {
display: none;
position: relative;
height: 35px;
}
/* Detached mode */ /* Detached mode */
.is-detached-mode .console, .is-detached-mode .console,
@@ -1431,8 +1430,14 @@ body > #demo-frame {
z-index: 4; z-index: 4;
} }
.is-detached-mode .global-console-container { .is-detached-mode .console {
display: block; position: fixed;
bottom: var(--footer-height);
}
.is-detached-mode .content-wrap {
/* So that there is space for console */
padding-bottom: var(--console-height);
} }
.kbd-shortcut__keys { .kbd-shortcut__keys {