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

make console expandable and contractable

Browse source
This commit is contained in:
catarak 2016-07-21 00:33:41 -04:00
parent afe7e07188
commit 9201cb247c
8 changed files with 106 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/constants.js
View file

@ -39,6 +39,8 @@ export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
export const CONSOLE_EVENT = 'CONSOLE_EVENT';
export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';

14
client/images/down-arrow.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>arrow shape copy 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
<g id="Icons" transform="translate(16.000000, 1063.000000)">
<polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,007 B

14
client/images/up-arrow.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<title>arrow shape copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
<g id="Icons" transform="translate(16.000000, 1063.000000)">
<polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 900 B

14
client/modules/IDE/actions/ide.js
View file

@ -55,3 +55,17 @@ export function collapseSidebar() {
type: ActionTypes.COLLAPSE_SIDEBAR
};
}
export function expandConsole() {
console.log('expand console!');
return {
type: ActionTypes.EXPAND_CONSOLE
};
}
export function collapseConsole() {
return {
type: ActionTypes.COLLAPSE_CONSOLE
};
}

29
client/modules/IDE/components/Console.js
View file

@ -1,4 +1,8 @@
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
const upArrowUrl = require('../../../images/up-arrow.svg');
const downArrowUrl = require('../../../images/down-arrow.svg');
import classNames from 'classnames';
/**
* How many console messages to store
@ -34,7 +38,9 @@ class Console extends React.Component {
}
shouldComponentUpdate(nextProps) {
return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying);
return (nextProps.consoleEvent !== this.props.consoleEvent)
|| (nextProps.isPlaying && !this.props.isPlaying)
|| (this.props.isExpanded !== nextProps.isExpanded);
}
componentDidUpdate() {
@ -43,10 +49,22 @@ class Console extends React.Component {
render() {
const childrenToDisplay = this.children.slice(-consoleMax);
const consoleClass = classNames({
'preview-console': true,
'preview-console--collapsed': !this.props.isExpanded
});
return (
<div ref="console" className="preview-console">
<h2 className="preview-console__header">console</h2>
<div ref="console" className={consoleClass}>
<div className="preview-console__header">
<h2 className="preview-console__header-title">console</h2>
<a className="preview-console__collapse" onClick={this.props.collapseConsole} >
<InlineSVG src={downArrowUrl} />
</a>
<a className="preview-console__expand" onClick={this.props.expandConsole} >
<InlineSVG src={upArrowUrl} />
</a>
</div>
<div ref="console_messages" className="preview-console__messages">
{childrenToDisplay}
</div>
@ -58,7 +76,10 @@ class Console extends React.Component {
Console.propTypes = {
consoleEvent: PropTypes.object,
isPlaying: PropTypes.bool.isRequired
isPlaying: PropTypes.bool.isRequired,
isExpanded: PropTypes.bool.isRequired,
collapseConsole: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired
};
export default Console;

10
client/modules/IDE/pages/IDEView.js
View file

@ -81,6 +81,9 @@ class IDEView extends React.Component {
<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
@ -127,7 +130,8 @@ IDEView.propTypes = {
isPlaying: PropTypes.bool.isRequired,
consoleEvent: PropTypes.object,
modalIsVisible: PropTypes.bool.isRequired,
sidebarIsExpanded: PropTypes.bool.isRequired
sidebarIsExpanded: PropTypes.bool.isRequired,
consoleIsExpanded: PropTypes.bool.isRequired
}).isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
@ -170,7 +174,9 @@ IDEView.propTypes = {
expandSidebar: PropTypes.func.isRequired,
collapseSidebar: PropTypes.func.isRequired,
exportProjectAsZip: PropTypes.func.isRequired,
cloneProject: PropTypes.func.isRequired
cloneProject: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired,
collapseConsole: PropTypes.func.isRequired,
};
function mapStateToProps(state) {

7
client/modules/IDE/reducers/ide.js
View file

@ -8,7 +8,8 @@ const initialState = {
arguments: []
},
modalIsVisible: false,
sidebarIsExpanded: true
sidebarIsExpanded: true,
consoleIsExpanded: false
};
const ide = (state = initialState, action) => {
@ -33,6 +34,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { sidebarIsExpanded: false });
case ActionTypes.EXPAND_SIDEBAR:
return Object.assign({}, state, { sidebarIsExpanded: true });
case ActionTypes.COLLAPSE_CONSOLE:
return Object.assign({}, state, { consoleIsExpanded: false });
case ActionTypes.EXPAND_CONSOLE:
return Object.assign({}, state, { consoleIsExpanded: true });
default:
return state;
}

24
client/styles/components/_console.scss
View file

@ -26,14 +26,23 @@
.preview-console__warn {
color: $console-warn-color;
}
&.preview-console--collapsed {
height: #{29 / $base-font-size}rem;
}
}
.preview-console__header {
background-color: $console-header-background-color;
color: $console-header-color;
padding: #{5 / $base-font-size}rem;
display: flex;
justify-content: space-between;
}
.preview-console__header-title {
font-size: #{16 / $base-font-size}rem;
font-weight: normal;
padding: #{5 / $base-font-size}rem;
}
.preview-console__messages {
@ -42,4 +51,17 @@
overflow-y: auto;
height: #{121 / $base-font-size}rem;
}
.preview-console__collapse {
.preview-console--collapsed & {
display: none;
}
}
.preview-console__expand {
display: none;
.preview-console--collapsed & {
display: inline-block;
}
}