diff --git a/client/constants.js b/client/constants.js
index 6f5833fd..ed64f2b0 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -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';
diff --git a/client/images/left-arrow.svg b/client/images/left-arrow.svg
new file mode 100644
index 00000000..22f17dcb
--- /dev/null
+++ b/client/images/left-arrow.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/client/images/plus-icon.svg b/client/images/plus-icon.svg
new file mode 100644
index 00000000..0b9347f2
--- /dev/null
+++ b/client/images/plus-icon.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/client/images/right-arrow.svg b/client/images/right-arrow.svg
new file mode 100644
index 00000000..6d62c369
--- /dev/null
+++ b/client/images/right-arrow.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index 70363669..a0b48434 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/client/modules/IDE/actions/ide.js
@@ -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
+ };
+}
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index ffeea432..f1ccf179 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -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 (
-
+
{props.files.map(file => {
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index edc9043b..7a94a16d 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -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}
/>
{
@@ -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;
}
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 4b89cf7c..f27caed9 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -41,6 +41,7 @@
&:hover {
color: $light-icon-hover-color;
& g {
+ opacity: 1;
fill: $light-icon-hover-color;
}
}
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index b5f3d8e2..7919678f 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -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;
+}
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index 7f78e871..a37c636d 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -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;
+ }
}