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

add expand/contract sidebar

Browse source
This commit is contained in:
catarak 2016-07-14 12:47:54 -04:00
parent d9a11cea4c
commit accf8e2504
11 changed files with 147 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/constants.js
View file

@ -34,5 +34,8 @@ export const SHOW_MODAL = 'SHOW_MODAL';
export const HIDE_MODAL = 'HIDE_MODAL';
export const CREATE_FILE = 'CREATE_FILE';
export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';

12
client/images/left-arrow.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - 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(-529.000000, -1165.000000)" fill="#333333">
<polygon id="arrow-shape-copy" transform="translate(534.000000, 1172.198314) rotate(-90.000000) translate(-534.000000, -1172.198314) " points="535.4 1169.39663 541 1174.99663 539.6 1176.39663 534 1170.79663 528.4 1176.39663 527 1174.99663 532.6 1169.39663 533.996628 1168"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 916 B

16
client/images/plus-icon.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>close shape</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(-558.000000, -1166.000000)" fill="#333333">
<g id="Icons" transform="translate(16.000000, 1063.000000)">
<g id="close-copy-3" transform="translate(499.500000, 110.000000) scale(1, -1) translate(-499.500000, -110.000000) translate(438.000000, 98.000000)">
<polygon id="close-shape" transform="translate(113.000000, 10.000000) rotate(45.000000) translate(-113.000000, -10.000000) " points="120 15.6 118.6 17 113 11.4 107.4 17 106 15.6 111.6 10 106 4.4 107.4 3 113 8.6 118.6 3 120 4.4 114.4 10"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
client/images/right-arrow.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - 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(-496.000000, -1165.000000)" fill="#333333">
<polygon id="arrow-shape-copy" transform="translate(501.000000, 1172.198314) rotate(90.000000) translate(-501.000000, -1172.198314) " points="502.4 1169.39663 508 1174.99663 506.6 1176.39663 501 1170.79663 495.4 1176.39663 494 1174.99663 499.6 1169.39663 500.996628 1168"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 915 B

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

@ -36,3 +36,15 @@ export function closeNewFileModal() {
type: ActionTypes.HIDE_MODAL
};
}
export function expandSidebar() {
return {
type: ActionTypes.EXPAND_SIDEBAR
};
}
export function collapseSidebar() {
return {
type: ActionTypes.COLLAPSE_SIDEBAR
};
}

36
client/modules/IDE/components/Sidebar.js
View file

@ -1,17 +1,39 @@
import React, { PropTypes } from 'react';
import classNames from 'classnames';
import InlineSVG from 'react-inlinesvg';
const rightArrowUrl = require('../../../images/right-arrow.svg');
const leftArrowUrl = require('../../../images/left-arrow.svg');
function Sidebar(props) {
const sidebarClass = classNames({
sidebar: true,
'sidebar--contracted': !props.isExpanded
});
return (
<section className="sidebar">
<section className={sidebarClass}>
<div className="sidebar__header">
<h3 className="sidebar__title">Sketch Files</h3>
<a
className="sidebar__add"
onClick={props.newFile}
>
+
</a>
<div className="sidebar__icons">
<a
className="sidebar__add"
onClick={props.newFile}
>
+
</a>
<a
className="sidebar__contract"
onClick={props.collapseSidebar}
>
<InlineSVG src={leftArrowUrl} />
</a>
<a
className="sidebar__expand"
onClick={props.expandSidebar}
>
<InlineSVG src={rightArrowUrl} />
</a>
</div>
</div>
<ul className="sidebar__file-list">
{props.files.map(file => {

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

@ -60,6 +60,9 @@ class IDEView extends React.Component {
selectedFile={this.props.selectedFile}
setSelectedFile={this.props.setSelectedFile}
newFile={this.props.newFile}
isExpanded={this.props.ide.sidebarIsExpanded}
expandSidebar={this.props.expandSidebar}
collapseSidebar={this.props.collapseSidebar}
/>
<Editor
file={this.props.selectedFile}
@ -99,7 +102,8 @@ IDEView.propTypes = {
saveProject: PropTypes.func.isRequired,
ide: PropTypes.shape({
isPlaying: PropTypes.bool.isRequired,
modalIsVisible: PropTypes.bool.isRequired
modalIsVisible: PropTypes.bool.isRequired,
sidebarIsExpanded: PropTypes.bool.isRequired
}).isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
@ -134,7 +138,9 @@ IDEView.propTypes = {
jsFiles: PropTypes.array.isRequired,
cssFiles: PropTypes.array.isRequired,
newFile: PropTypes.func.isRequired,
closeNewFileModal: PropTypes.func.isRequired
closeNewFileModal: PropTypes.func.isRequired,
expandSidebar: PropTypes.func.isRequired,
collapseSidebar: PropTypes.func.isRequired
};
function mapStateToProps(state) {

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

@ -3,7 +3,8 @@ import * as ActionTypes from '../../../constants';
const initialState = {
isPlaying: false,
selectedFile: '1',
modalIsVisible: false
modalIsVisible: false,
sidebarIsExpanded: true
};
const ide = (state = initialState, action) => {
@ -22,6 +23,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { modalIsVisible: true });
case ActionTypes.HIDE_MODAL:
return Object.assign({}, state, { modalIsVisible: false });
case ActionTypes.COLLAPSE_SIDEBAR:
return Object.assign({}, state, { sidebarIsExpanded: false });
case ActionTypes.EXPAND_SIDEBAR:
return Object.assign({}, state, { sidebarIsExpanded: true });
default:
return state;
}

1
client/styles/abstracts/_placeholders.scss
View file

@ -41,6 +41,7 @@
&:hover {
color: $light-icon-hover-color;
& g {
opacity: 1;
fill: $light-icon-hover-color;
}
}

46
client/styles/components/_sidebar.scss
View file

@ -3,23 +3,37 @@
display: flex;
justify-content: space-between;
border-top: 1px solid $ide-border-color;
align-items: center;
height: #{47 / $base-font-size}rem;
}
.sidebar__title {
font-size: #{12 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem;
display: inline-block;
.sidebar--contracted & {
display: none;
}
}
.sidebar__add {
cursor: pointer;
height: #{26 / $base-font-size}rem;
margin-right: #{16 / $base-font-size}rem;
font-size: #{24 / $base-font-size}rem;
.sidebar--contracted & {
display: none;
}
}
.sidebar__file-list {
border-top: 1px solid $ide-border-color;
.sidebar--contracted & {
display: none;
}
}
.sidebar__file-item {
font-size: #{12 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem;
padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
color: $light-inactive-text-color;
cursor: pointer;
@ -27,3 +41,31 @@
background-color: $ide-border-color;
}
}
.sidebar__contract {
@extend %icon;
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;
}
.sidebar--contracted & {
display: none;
}
}
.sidebar__expand {
@extend %icon;
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;
}
display: none;
.sidebar--contracted & {
display: inline-block;
}
}
.sidebar__icons {
display: flex;
align-items: center;
}

5
client/styles/layout/_ide.scss
View file

@ -20,5 +20,8 @@
}
.sidebar {
width: #{140 / $base-font-size}rem;
width: #{180 / $base-font-size}rem;
&.sidebar--contracted {
width: #{20 / $base-font-size}rem;
}
}