From 74cfa9e3272688dde4ae9c31c07d82a003621b45 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 29 Sep 2018 13:15:03 +0530 Subject: [PATCH 1/3] Move Console to separate component. --- src/components/Console.jsx | 70 +++++++++++++++++++++++++++++ src/components/ContentWrap.jsx | 80 +++++++++------------------------- 2 files changed, 90 insertions(+), 60 deletions(-) create mode 100644 src/components/Console.jsx diff --git a/src/components/Console.jsx b/src/components/Console.jsx new file mode 100644 index 0000000..eda09bd --- /dev/null +++ b/src/components/Console.jsx @@ -0,0 +1,70 @@ +import { h } from 'preact'; +import CodeMirrorBox from './CodeMirrorBox'; + +export function Console({ + isConsoleOpen, + onConsoleHeaderDblClick, + onClearConsoleBtnClick, + toggleConsole, + onEvalInputKeyup, + onReady +}) { + return ( +
+
+
+ + Console (0) + +
+ + + + + + +
+
+ onReady(el)} + /> +
+
+ + + + +
+
+ ); +} diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx index 363a456..d7fb727 100644 --- a/src/components/ContentWrap.jsx +++ b/src/components/ContentWrap.jsx @@ -6,7 +6,7 @@ import { log, writeFile, loadJS, getCompleteHtml } from '../utils'; import { SplitPane } from './SplitPane.jsx'; import { trackEvent } from '../analytics'; import CodeMirror from '../CodeMirror'; -import CodeMirrorBox from './CodeMirrorBox'; +import { Console } from './Console'; import { deferred } from '../deferred'; import CssSettingsModal from './CssSettingsModal'; const minCodeWrapSize = 33; @@ -52,7 +52,7 @@ export default class ContentWrap extends Component { } componentDidUpdate() { // HACK: becuase its a DOM manipulation - window.logCountEl.textContent = this.logCount; + this.updateLogCount(); // log('🚀', 'didupdate', this.props.currentItem); // if (this.isValidItem(this.props.currentItem)) { @@ -583,6 +583,12 @@ export default class ContentWrap extends Component { }, 500); } + updateLogCount() { + if (window.logCountEl) { + logCountEl.textContent = this.logCount; + } + } + onMessageFromConsole() { /* eslint-disable no-param-reassign */ [...arguments].forEach(arg => { @@ -614,7 +620,7 @@ export default class ContentWrap extends Component { this.consoleCm.scrollTo(0, Infinity); this.logCount++; }); - logCountEl.textContent = this.logCount; + this.updateLogCount(); /* eslint-enable no-param-reassign */ } @@ -638,7 +644,7 @@ export default class ContentWrap extends Component { clearConsole() { this.consoleCm.setValue(''); this.logCount = 0; - window.logCountEl.textContent = this.logCount; + this.updateLogCount(); } clearConsoleBtnClickHandler() { this.clearConsole(); @@ -884,62 +890,16 @@ export default class ContentWrap extends Component { id="demo-frame" allowfullscreen /> -
-
-
- - Console (0) - -
- - - - - - -
-
- (this.consoleCm = el)} - /> -
-
- - - - -
-
+ (this.consoleCm = el)} + /> From e1426b9385adbb4ec3734a16c4ca372391788488 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 29 Sep 2018 17:48:11 +0530 Subject: [PATCH 2/3] style: fix selected style of mode-btns --- src/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/style.css b/src/style.css index 4f81223..0cf9c64 100644 --- a/src/style.css +++ b/src/style.css @@ -721,12 +721,12 @@ body > #demo-frame { .footer a > svg, .footer button > svg { transition: 0.3s ease; - fill: rgba(255, 255, 255, 0.5); + fill: rgba(255, 255, 255, 0.35); } .footer a:hover svg, .footer button:hover svg { - fill: rgba(255, 255, 255, 0.45); + fill: rgba(255, 255, 255, 0.6); } .mode-btn svg { @@ -735,7 +735,7 @@ body > #demo-frame { } .mode-btn.selected svg { - fill: rgba(255, 255, 255, 0.45); + fill: rgba(255, 255, 255, 0.6); } .gutter { From bc8ad6d7ada895f6c821b228745b4919f219d209 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 29 Sep 2018 18:18:54 +0530 Subject: [PATCH 3/3] refactor console position in detached mode. fixes #319 --- src/components/ContentWrap.jsx | 3 +-- src/components/app.jsx | 2 +- src/style.css | 23 ++++++++++++++--------- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx index d7fb727..da9327b 100644 --- a/src/components/ContentWrap.jsx +++ b/src/components/ContentWrap.jsx @@ -549,6 +549,7 @@ export default class ContentWrap extends Component { trackEvent('ui', 'updateCodeMode', mode); } } + detachPreview() { if (this.detachedWindow) { this.detachedWindow.focus(); @@ -558,7 +559,6 @@ export default class ContentWrap extends Component { const iframeWidth = iframeBounds.width; const iframeHeight = iframeBounds.height; document.body.classList.add('is-detached-mode'); - window.globalConsoleContainerEl.insertBefore(window.consoleEl, null); this.detachedWindow = window.open( './preview.html', @@ -574,7 +574,6 @@ export default class ContentWrap extends Component { if (this.detachedWindow && this.detachedWindow.closed) { clearInterval(intervalID); document.body.classList.remove('is-detached-mode'); - $('#js-demo-side').insertBefore(window.consoleEl, null); this.detachedWindow = null; // Update main frame preview to get latest changes (which were not // getting reflected while detached window was open) diff --git a/src/components/app.jsx b/src/components/app.jsx index fa55c19..8b4a9a5 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -1181,7 +1181,7 @@ export default class App extends Component { onEditorFocus={this.editorFocusHandler.bind(this)} onSplitUpdate={this.splitUpdateHandler.bind(this)} /> -
+