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

add hide/showing files, carrot doesn't work

Browse source
This commit is contained in:
catarak 2016-08-30 18:46:59 -04:00
parent c671d0c9f2
commit e82270a709
7 changed files with 75 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/constants.js
View file

@ -69,6 +69,8 @@ export const OPEN_PROJECT_OPTIONS = 'OPEN_PROJECT_OPTIONS';
export const CLOSE_PROJECT_OPTIONS = 'CLOSE_PROJECT_OPTIONS';
export const SHOW_NEW_FOLDER_MODAL = 'SHOW_NEW_FOLDER_MODAL';
export const CLOSE_NEW_FOLDER_MODAL = 'CLOSE_NEW_FOLDER_MODAL';
export const SHOW_FOLDER_CHILDREN = 'SHOW_FOLDER_CHILDREN';
export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN';
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';

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

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Triangle 3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 836 B

4
client/images/folder-triangle.svg → client/images/triangle-arrow-right.svg
View file

@ -1,11 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="6px" height="7px" viewBox="0 0 6 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Triangle 3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-25.000000, -41.000000)" stroke="#B5B5B5" fill="#B5B5B5">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 850 B

After

Width:  |  Height:  |  Size: 835 B

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

@ -247,3 +247,17 @@ export function deleteFile(id, parentId) {
}
};
}
export function showFolderChildren(id) {
return {
type: ActionTypes.SHOW_FOLDER_CHILDREN,
id
};
}
export function hideFolderChildren(id) {
return {
type: ActionTypes.HIDE_FOLDER_CHILDREN,
id
};
}

27
client/modules/IDE/components/FileNode.js
View file

@ -5,6 +5,8 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import InlineSVG from 'react-inlinesvg';
const downArrowUrl = require('../../../images/down-arrow.svg');
const folderRightUrl = require('../../../images/triangle-arrow-right.svg');
const folderDownUrl = require('../../../images/triangle-arrow-down.svg');
const fileUrl = require('../../../images/file.svg');
import classNames from 'classnames';
@ -60,7 +62,8 @@ export class FileNode extends React.Component {
'sidebar__file-item': this.props.name !== 'root',
'sidebar__file-item--selected': this.props.isSelected,
'sidebar__file-item--open': this.props.isOptionsOpen,
'sidebar__file-item--editing': this.props.isEditingName
'sidebar__file-item--editing': this.props.isEditingName,
'sidebar__file-item--closed': this.props.isFolderClosed
});
return (
<div
@ -80,7 +83,24 @@ export class FileNode extends React.Component {
<InlineSVG src={fileUrl} />
</span>
);
} else if (this.props.isFolderClosed) {
return (
<span
className="sidebar__file-item-icon"
onClick={() => this.props.showFolderChildren(this.props.id)}
>
<InlineSVG src={folderRightUrl} />
</span>
);
}
return (
<span
className="sidebar__file-item-icon"
onClick={() => this.props.hideFolderChildren(this.props.id)}
>
<InlineSVG src={folderDownUrl} />
</span>
);
})()}
<a className="sidebar__file-item-name">{this.props.name}</a>
<input
@ -179,6 +199,7 @@ FileNode.propTypes = {
isSelected: PropTypes.bool,
isOptionsOpen: PropTypes.bool,
isEditingName: PropTypes.bool,
isFolderClosed: PropTypes.bool,
setSelectedFile: PropTypes.func.isRequired,
showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired,
@ -188,7 +209,9 @@ FileNode.propTypes = {
updateFileName: PropTypes.func.isRequired,
resetSelectedFile: PropTypes.func.isRequired,
newFile: PropTypes.func.isRequired,
newFolder: PropTypes.func.isRequired
newFolder: PropTypes.func.isRequired,
showFolderChildren: PropTypes.func.isRequired,
hideFolderChildren: PropTypes.func.isRequired
};
function mapStateToProps(state, ownProps) {

14
client/modules/IDE/reducers/files.js
View file

@ -172,6 +172,20 @@ const files = (state, action) => {
}
return Object.assign({}, file, { isSelected: false });
});
case ActionTypes.SHOW_FOLDER_CHILDREN:
return state.map(file => {
if (file.id === action.id) {
return Object.assign({}, file, { isFolderClosed: false });
}
return file;
});
case ActionTypes.HIDE_FOLDER_CHILDREN:
return state.map(file => {
if (file.id === action.id) {
return Object.assign({}, file, { isFolderClosed: true });
}
return file;
});
default:
return state;
}

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

@ -177,3 +177,7 @@
padding: #{8 / $base-font-size}rem;
width: #{110 / $base-font-size}rem;
}
.sidebar__file-item--closed .file-item__children {
display: none;
}