merge master
This commit is contained in:
MathuraMG
commit
c8dbb8bef7
8 changed files with 177 additions and 67 deletions
|
|
@ -16,8 +16,15 @@ import * as ProjectActions from '../actions/project';
|
|||
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
|
||||
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 {
|
||||
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;
|
||||
|
|
@ -30,6 +37,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) {
|
||||
|
|
@ -54,6 +74,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 (
|
||||
<div className="ide">
|
||||
|
|
@ -91,58 +127,84 @@ class IDEView extends React.Component {
|
|||
setLintWarning={this.props.setLintWarning}
|
||||
/>
|
||||
<div className="editor-preview-container">
|
||||
<Sidebar
|
||||
files={this.props.files}
|
||||
setSelectedFile={this.props.setSelectedFile}
|
||||
newFile={this.props.newFile}
|
||||
isExpanded={this.props.ide.sidebarIsExpanded}
|
||||
expandSidebar={this.props.expandSidebar}
|
||||
collapseSidebar={this.props.collapseSidebar}
|
||||
showFileOptions={this.props.showFileOptions}
|
||||
hideFileOptions={this.props.hideFileOptions}
|
||||
deleteFile={this.props.deleteFile}
|
||||
showEditFileName={this.props.showEditFileName}
|
||||
hideEditFileName={this.props.hideEditFileName}
|
||||
updateFileName={this.props.updateFileName}
|
||||
/>
|
||||
<div className="editor-console-container">
|
||||
<Editor
|
||||
lintWarning={this.props.preferences.lintWarning}
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
updateLineNumber={this.props.updateLineNumber}
|
||||
updateLintMessage={this.props.updateLintMessage}
|
||||
clearLintMessage={this.props.clearLintMessage}
|
||||
file={this.props.selectedFile}
|
||||
updateFileContent={this.props.updateFileContent}
|
||||
fontSize={this.props.preferences.fontSize}
|
||||
indentationAmount={this.props.preferences.indentationAmount}
|
||||
isTabIndent={this.props.preferences.isTabIndent}
|
||||
<SplitPane
|
||||
split="vertical"
|
||||
defaultSize={this.sidebarSize}
|
||||
ref="sidebarPane"
|
||||
onDragFinished={this._handleSidebarPaneOnDragFinished}
|
||||
allowResize={this.props.ide.sidebarIsExpanded}
|
||||
>
|
||||
<Sidebar
|
||||
files={this.props.files}
|
||||
setSelectedFile={this.props.setSelectedFile}
|
||||
newFile={this.props.newFile}
|
||||
isExpanded={this.props.ide.sidebarIsExpanded}
|
||||
expandSidebar={this.props.expandSidebar}
|
||||
collapseSidebar={this.props.collapseSidebar}
|
||||
showFileOptions={this.props.showFileOptions}
|
||||
hideFileOptions={this.props.hideFileOptions}
|
||||
deleteFile={this.props.deleteFile}
|
||||
showEditFileName={this.props.showEditFileName}
|
||||
hideEditFileName={this.props.hideEditFileName}
|
||||
updateFileName={this.props.updateFileName}
|
||||
/>
|
||||
<EditorAccessibility
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
lineNo={this.props.editorAccessibility.lineNo}
|
||||
/>
|
||||
<Console
|
||||
consoleEvent={this.props.ide.consoleEvent}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
isExpanded={this.props.ide.consoleIsExpanded}
|
||||
expandConsole={this.props.expandConsole}
|
||||
collapseConsole={this.props.collapseConsole}
|
||||
/>
|
||||
</div>
|
||||
<PreviewFrame
|
||||
htmlFile={this.props.htmlFile}
|
||||
jsFiles={this.props.jsFiles}
|
||||
cssFiles={this.props.cssFiles}
|
||||
files={this.props.files}
|
||||
content={this.props.selectedFile.content}
|
||||
head={
|
||||
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
|
||||
}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
|
||||
/>
|
||||
<SplitPane
|
||||
split="vertical"
|
||||
defaultSize={'50%'}
|
||||
onChange={() => (this.refs.overlay.style.display = 'block')}
|
||||
onDragFinished={() => (this.refs.overlay.style.display = 'none')}
|
||||
>
|
||||
<SplitPane
|
||||
split="horizontal"
|
||||
primary="second"
|
||||
defaultSize={this.consoleSize}
|
||||
minSize={29}
|
||||
ref="consolePane"
|
||||
onDragFinished={this._handleConsolePaneOnDragFinished}
|
||||
allowResize={this.props.ide.consoleIsExpanded}
|
||||
>
|
||||
<Editor
|
||||
lintWarning={this.props.preferences.lintWarning}
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
updateLineNumber={this.props.updateLineNumber}
|
||||
updateLintMessage={this.props.updateLintMessage}
|
||||
clearLintMessage={this.props.clearLintMessage}
|
||||
file={this.props.selectedFile}
|
||||
updateFileContent={this.props.updateFileContent}
|
||||
fontSize={this.props.preferences.fontSize}
|
||||
indentationAmount={this.props.preferences.indentationAmount}
|
||||
isTabIndent={this.props.preferences.isTabIndent}
|
||||
/>
|
||||
<EditorAccessibility
|
||||
lintMessages={this.props.editorAccessibility.lintMessages}
|
||||
lineNo={this.props.editorAccessibility.lineNo}
|
||||
/>
|
||||
<Console
|
||||
consoleEvent={this.props.ide.consoleEvent}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
isExpanded={this.props.ide.consoleIsExpanded}
|
||||
expandConsole={this.props.expandConsole}
|
||||
collapseConsole={this.props.collapseConsole}
|
||||
/>
|
||||
</SplitPane>
|
||||
<div>
|
||||
<div className="preview-frame-overlay" ref="overlay">
|
||||
</div>
|
||||
<PreviewFrame
|
||||
htmlFile={this.props.htmlFile}
|
||||
jsFiles={this.props.jsFiles}
|
||||
cssFiles={this.props.cssFiles}
|
||||
files={this.props.files}
|
||||
content={this.props.selectedFile.content}
|
||||
head={
|
||||
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
|
||||
}
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
|
||||
/>
|
||||
</div>
|
||||
</SplitPane>
|
||||
</SplitPane>
|
||||
</div>
|
||||
{(() => {
|
||||
if (this.props.ide.modalIsVisible) {
|
||||
|
|
|
|||
|
|
@ -113,6 +113,7 @@
|
|||
border: 1px solid $light-modal-border-color;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 12px 12px $light-shadow-color;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
%hidden-element {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -26,10 +22,6 @@
|
|||
.preview-console__warn {
|
||||
color: $console-warn-color;
|
||||
}
|
||||
|
||||
&.preview-console--collapsed {
|
||||
height: #{29 / $base-font-size}rem;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-console__header {
|
||||
|
|
|
|||
43
client/styles/components/_resizer.scss
Normal file
43
client/styles/components/_resizer.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
.sidebar--contracted & {
|
||||
display: none;
|
||||
}
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar__add {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -32,8 +34,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 {
|
||||
|
|
@ -41,8 +51,6 @@
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
width: #{180 / $base-font-size}rem;
|
||||
&.sidebar--contracted {
|
||||
width: #{20 / $base-font-size}rem;
|
||||
}
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
@import 'components/sidebar';
|
||||
@import 'components/modal';
|
||||
@import 'components/console';
|
||||
@import 'components/resizer';
|
||||
|
||||
@import 'layout/ide';
|
||||
@import 'layout/sketch-list';
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue