r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

start console styling

This commit is contained in:
catarak 2016-07-21 00:05:47 -04:00
parent 051e3771ee
commit afe7e07188
6 changed files with 90 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/modules/IDE/components/Console.js
View File

@ -4,7 +4,7 @@ import React, { PropTypes } from 'react';
* How many console messages to store * How many console messages to store
* @type {Number} * @type {Number}
*/ */
const consoleMax = 5; const consoleMax = 100;
class Console extends React.Component { class Console extends React.Component {
@ -37,12 +37,19 @@ class Console extends React.Component {
return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying); return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying);
} }
componentDidUpdate() {
this.refs.console_messages.scrollTop = this.refs.console_messages.scrollHeight;
}
render() { render() {
const childrenToDisplay = this.children.slice(-consoleMax); const childrenToDisplay = this.children.slice(-consoleMax);
return ( return (
<div ref="console" className="preview-console"> <div ref="console" className="preview-console">
{childrenToDisplay} <h2 className="preview-console__header">console</h2>
<div ref="console_messages" className="preview-console__messages">
{childrenToDisplay}
</div>
</div> </div>
); );
} }

3
client/modules/IDE/components/PreviewFrame.js
View File

@ -94,7 +94,8 @@ class PreviewFrame extends React.Component {
const jsFiles = []; const jsFiles = [];
this.props.jsFiles.forEach(jsFile => { this.props.jsFiles.forEach(jsFile => {
const newJSFile = { ...jsFile }; const newJSFile = { ...jsFile };
const jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm); let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
jsFileStrings = jsFileStrings || [];
jsFileStrings.forEach(jsFileString => { jsFileStrings.forEach(jsFileString => {
if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp)('|")$/)) { if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp)('|")$/)) {
const filePath = jsFileString.substr(1, jsFileString.length - 2); const filePath = jsFileString.substr(1, jsFileString.length - 2);

70
client/modules/IDE/pages/IDEView.js
View File

@ -59,39 +59,43 @@ class IDEView extends React.Component {
indentWithSpace={this.props.indentWithSpace} indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab} indentWithTab={this.props.indentWithTab}
/> />
<Sidebar <div className="editor-preview-container">
files={this.props.files} <Sidebar
selectedFile={this.props.selectedFile} files={this.props.files}
setSelectedFile={this.props.setSelectedFile} selectedFile={this.props.selectedFile}
newFile={this.props.newFile} setSelectedFile={this.props.setSelectedFile}
isExpanded={this.props.ide.sidebarIsExpanded} newFile={this.props.newFile}
expandSidebar={this.props.expandSidebar} isExpanded={this.props.ide.sidebarIsExpanded}
collapseSidebar={this.props.collapseSidebar} expandSidebar={this.props.expandSidebar}
/> collapseSidebar={this.props.collapseSidebar}
<Editor />
file={this.props.selectedFile} <div className="editor-console-container">
updateFileContent={this.props.updateFileContent} <Editor
fontSize={this.props.preferences.fontSize} file={this.props.selectedFile}
indentationAmount={this.props.preferences.indentationAmount} updateFileContent={this.props.updateFileContent}
isTabIndent={this.props.preferences.isTabIndent} fontSize={this.props.preferences.fontSize}
files={this.props.files} indentationAmount={this.props.preferences.indentationAmount}
/> isTabIndent={this.props.preferences.isTabIndent}
<PreviewFrame files={this.props.files}
htmlFile={this.props.htmlFile} />
jsFiles={this.props.jsFiles} <Console
cssFiles={this.props.cssFiles} consoleEvent={this.props.ide.consoleEvent}
files={this.props.files} isPlaying={this.props.ide.isPlaying}
content={this.props.selectedFile.content} />
head={ </div>
<link type="text/css" rel="stylesheet" href="/preview-styles.css" /> <PreviewFrame
} htmlFile={this.props.htmlFile}
isPlaying={this.props.ide.isPlaying} jsFiles={this.props.jsFiles}
dispatchConsoleEvent={this.props.dispatchConsoleEvent} cssFiles={this.props.cssFiles}
/> files={this.props.files}
<Console content={this.props.selectedFile.content}
consoleEvent={this.props.ide.consoleEvent} head={
isPlaying={this.props.ide.isPlaying} <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
/> }
isPlaying={this.props.ide.isPlaying}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
/>
</div>
{(() => { {(() => {
if (this.props.ide.modalIsVisible) { if (this.props.ide.modalIsVisible) {
return ( return (

3
client/styles/abstracts/_variables.scss
View File

@ -40,5 +40,8 @@ $ide-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3; $editor-selected-line-color: #f3f3f3;
$input-border-color: #979797; $input-border-color: #979797;
$console-light-background-color: #eee;
$console-header-background-color: #d6d6d6;
$console-header-color: #b1b1b1;
$console-warn-color: #ffbe05; $console-warn-color: #ffbe05;
$console-error-color: #ff5f52; $console-error-color: #ff5f52;

32
client/styles/components/_console.scss
View File

@ -1,11 +1,13 @@
.preview-console { .preview-console {
position: fixed; position: absolute;
width:100%; width: 100%;
height:60px; height: #{150 / $base-font-size}rem;
right:0px; right: 0;
bottom: 0px; bottom: 0;
background:$dark-background-color; left: 0;
z-index:1000; background: $console-light-background-color;
z-index: 1000;
overflow: hidden;
& > { & > {
position:relative; position:relative;
@ -24,4 +26,20 @@
.preview-console__warn { .preview-console__warn {
color: $console-warn-color; color: $console-warn-color;
} }
}
.preview-console__header {
background-color: $console-header-background-color;
color: $console-header-color;
font-size: #{16 / $base-font-size}rem;
font-weight: normal;
padding: #{5 / $base-font-size}rem;
}
.preview-console__messages {
display: flex;
flex-direction: column;
overflow-y: auto;
height: #{121 / $base-font-size}rem;
} }

17
client/styles/layout/_ide.scss
View File

@ -1,13 +1,24 @@
.ide { .ide {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
height: 100%; height: 100%;
flex-wrap: wrap; flex-wrap: wrap;
} }
.editor-holder { .editor-preview-container {
flex: 1 0 0; width: 100%;
flex: 1 0 0;
display: flex;
}
.editor-console-container {
flex: 1 0 0;
max-width: 45%; max-width: 45%;
height: 100%;
position: relative;
}
.editor-holder {
height: 100%; height: 100%;
} }