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

add expanding/contracting styles

Browse source
This commit is contained in:
catarak 2016-08-30 21:08:50 -04:00
parent e82270a709
commit 550347e6fc
4 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/images/triangle-arrow-down.svg
View file

@ -1,7 +1,5 @@
<?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>
<title>Down Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 836 B

After

Width:  |  Height:  |  Size: 698 B

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

@ -1,7 +1,5 @@
<?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>
<title>Right Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 835 B

After

Width:  |  Height:  |  Size: 698 B

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

@ -83,23 +83,22 @@ 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>
<div>
<span
className="sidebar__file-item-closed"
onClick={() => this.props.showFolderChildren(this.props.id)}
>
<InlineSVG className="folder-right" src={folderRightUrl} />
</span>
<span
className="sidebar__file-item-open"
onClick={() => this.props.hideFolderChildren(this.props.id)}
>
<InlineSVG className="folder-down" src={folderDownUrl} />
</span>
</div>
);
})()}
<a className="sidebar__file-item-name">{this.props.name}</a>

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

@ -166,6 +166,21 @@
margin-right: #{5 / $base-font-size}rem;
}
.sidebar__file-item-closed {
@extend .sidebar__file-item-icon;
display: none;
.sidebar__file-item--closed & {
display: inline-block;
}
}
.sidebar__file-item-open {
@extend .sidebar__file-item-icon;
.sidebar__file-item--closed & {
display: none;
}
}
.sidebar__project-options {
@extend %modal;
display: none;