From 93d6d8777f57431752407d0b5691c229a1f32a27 Mon Sep 17 00:00:00 2001 From: catarak Date: Thu, 11 Aug 2016 15:41:13 -0400 Subject: [PATCH 1/4] add resizers --- client/modules/IDE/pages/IDEView.js | 96 +++++++++++++++----------- client/styles/components/_console.scss | 8 +-- client/styles/components/_resizer.scss | 43 ++++++++++++ client/styles/layout/_ide.scss | 28 +++++--- client/styles/main.scss | 1 + package.json | 1 + 6 files changed, 122 insertions(+), 55 deletions(-) create mode 100644 client/styles/components/_resizer.scss diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index a975b02e..312bbc8f 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -14,6 +14,7 @@ import * as IDEActions from '../actions/ide'; import * as ProjectActions from '../actions/project'; import * as PreferencesActions from '../actions/preferences'; import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files'; +import SplitPane from 'react-split-pane'; class IDEView extends React.Component { componentDidMount() { @@ -87,49 +88,62 @@ class IDEView extends React.Component { setAutosave={this.props.setAutosave} />
- -
- + - -
- - } - isPlaying={this.props.ide.isPlaying} - dispatchConsoleEvent={this.props.dispatchConsoleEvent} - /> + (this.refs.overlay.style.display = 'block')} + onDragFinished={() => (this.refs.overlay.style.display = 'none')} + > + + + + +
+
+
+ + } + isPlaying={this.props.ide.isPlaying} + dispatchConsoleEvent={this.props.dispatchConsoleEvent} + /> +
+ +
{(() => { if (this.props.ide.modalIsVisible) { diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index 2b7b2151..ae55d107 100644 --- a/client/styles/components/_console.scss +++ b/client/styles/components/_console.scss @@ -1,10 +1,6 @@ .preview-console { - position: absolute; width: 100%; - height: #{150 / $base-font-size}rem; - right: 0; - bottom: 0; - left: 0; + height: 100%; background: $console-light-background-color; z-index: 1000; overflow: hidden; @@ -28,7 +24,7 @@ } &.preview-console--collapsed { - height: #{29 / $base-font-size}rem; + // height: #{29 / $base-font-size}rem; } } diff --git a/client/styles/components/_resizer.scss b/client/styles/components/_resizer.scss new file mode 100644 index 00000000..2e30edfb --- /dev/null +++ b/client/styles/components/_resizer.scss @@ -0,0 +1,43 @@ +.Resizer { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background: $ide-border-color; + opacity: .2; + z-index: 1; + -moz-background-clip: padding; + -webkit-background-clip: padding; + background-clip: padding-box; +} + +// .Resizer:hover { +// -webkit-transition: all 2s ease; +// transition: all 2s ease; +// } + +.Resizer.horizontal { + height: 11px; + margin: -5px 0; + border-top: 5px solid rgba(255, 255, 255, 0); + border-bottom: 5px solid rgba(255, 255, 255, 0); + cursor: row-resize; + width: 100%; +} + +.Resizer.horizontal:hover { + // border-top: 5px solid rgba(0, 0, 0, 0.5); + // border-bottom: 5px solid rgba(0, 0, 0, 0.5); +} + +.Resizer.vertical { + width: 11px; + margin: 0 -5px; + border-left: 5px solid rgba(255, 255, 255, 0); + border-right: 5px solid rgba(255, 255, 255, 0); + cursor: col-resize; +} + +.Resizer.vertical:hover { + // border-left: 5px solid rgba(0, 0, 0, 0.5); + // border-right: 5px solid rgba(0, 0, 0, 0.5); +} \ No newline at end of file diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss index 52fc5e97..5d14075d 100644 --- a/client/styles/layout/_ide.scss +++ b/client/styles/layout/_ide.scss @@ -9,11 +9,13 @@ width: 100%; flex: 1 0 0px; display: flex; + position: relative; } .editor-console-container { - flex: 1 0 0px; - max-width: 45%; + // flex: 1 0 0px; + // max-width: 45%; + width: 100%; height: 100%; position: relative; @@ -28,8 +30,16 @@ } .preview-frame { - flex: 1 0 0px; - min-height: 100%; + height: 100%; + width: 100%; + position: absolute; +} + +.preview-frame-overlay { + height: 100%; + width: 100%; + position: absolute; + z-index: 10; } .toolbar { @@ -37,8 +47,10 @@ } .sidebar { - width: #{180 / $base-font-size}rem; - &.sidebar--contracted { - width: #{20 / $base-font-size}rem; - } + // width: #{180 / $base-font-size}rem; + // &.sidebar--contracted { + // width: #{20 / $base-font-size}rem; + // } + width: 100%; + height: 100%; } diff --git a/client/styles/main.scss b/client/styles/main.scss index 170d84fb..7a565c25 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -19,6 +19,7 @@ @import 'components/sidebar'; @import 'components/modal'; @import 'components/console'; +@import 'components/resizer'; @import 'layout/ide'; @import 'layout/sketch-list'; diff --git a/package.json b/package.json index 4140cf0b..98e9ab23 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "react-inlinesvg": "^0.4.2", "react-redux": "^4.4.5", "react-router": "^2.4.1", + "react-split-pane": "^0.1.44", "redux": "^3.5.2", "redux-form": "^5.2.5", "redux-thunk": "^2.1.0", From 7cca65c56685f1c8f818afbf8b4a48cf24d2e2d7 Mon Sep 17 00:00:00 2001 From: catarak Date: Thu, 11 Aug 2016 16:50:31 -0400 Subject: [PATCH 2/4] fix https://github.com/catarak/p5.js-web-editor/issues/31, https://github.com/catarak/p5.js-web-editor/issues/22, and https://github.com/catarak/p5.js-web-editor/issues/37 --- client/modules/IDE/pages/IDEView.js | 53 +++++++++++++++++++++++++- client/styles/components/_sidebar.scss | 2 + client/styles/layout/_ide.scss | 4 -- 3 files changed, 53 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 312bbc8f..a6c4b7c9 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -17,6 +17,12 @@ import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from ' import SplitPane from 'react-split-pane'; class IDEView extends React.Component { + constructor(props) { + super(props); + this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this); + this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this); + } + componentDidMount() { if (this.props.params.project_id) { const id = this.props.params.project_id; @@ -29,6 +35,19 @@ class IDEView extends React.Component { this.autosaveInterval = setInterval(this.props.saveProject, 30000); } } + + this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29; + this.sidebarSize = this.props.ide.sidebarIsExpanded ? 180 : 20; + } + + componentWillUpdate(nextProps) { + if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) { + this.consoleSize = nextProps.ide.consoleIsExpanded ? 180 : 29; + } + + if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) { + this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20; + } } componentDidUpdate(prevProps) { @@ -53,6 +72,22 @@ class IDEView extends React.Component { this.autosaveInterval = null; } + _handleConsolePaneOnDragFinished() { + this.consoleSize = this.refs.consolePane.state.draggedSize; + this.refs.consolePane.setState({ + resized: false, + draggedSize: undefined, + }); + } + + _handleSidebarPaneOnDragFinished() { + this.sidebarSize = this.refs.sidebarPane.state.draggedSize; + this.refs.sidebarPane.setState({ + resized: false, + draggedSize: undefined + }); + } + render() { return (
@@ -88,7 +123,13 @@ class IDEView extends React.Component { setAutosave={this.props.setAutosave} />
- + (this.refs.overlay.style.display = 'block')} onDragFinished={() => (this.refs.overlay.style.display = 'none')} > - + Date: Thu, 11 Aug 2016 16:58:47 -0400 Subject: [PATCH 3/4] removed commented out code --- client/styles/components/_console.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss index ae55d107..e1fd9658 100644 --- a/client/styles/components/_console.scss +++ b/client/styles/components/_console.scss @@ -22,10 +22,6 @@ .preview-console__warn { color: $console-warn-color; } - - &.preview-console--collapsed { - // height: #{29 / $base-font-size}rem; - } } .preview-console__header { From 91e03a6d8971f190bb0a1cac8df2382ba5b6f5ac Mon Sep 17 00:00:00 2001 From: catarak Date: Thu, 11 Aug 2016 17:41:35 -0400 Subject: [PATCH 4/4] fix preference z index issue that --- client/styles/abstracts/_placeholders.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 74bb1d70..34262d65 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -113,4 +113,5 @@ border: 1px solid $light-modal-border-color; border-radius: 2px; box-shadow: 0 12px 12px $light-shadow-color; + z-index: 20; }