From accf8e25040425fb0ae412537b517bc17340cbd5 Mon Sep 17 00:00:00 2001 From: catarak Date: Thu, 14 Jul 2016 12:47:54 -0400 Subject: [PATCH] add expand/contract sidebar --- client/constants.js | 3 ++ client/images/left-arrow.svg | 12 ++++++ client/images/plus-icon.svg | 16 ++++++++ client/images/right-arrow.svg | 12 ++++++ client/modules/IDE/actions/ide.js | 12 ++++++ client/modules/IDE/components/Sidebar.js | 36 +++++++++++++---- client/modules/IDE/pages/IDEView.js | 10 ++++- client/modules/IDE/reducers/ide.js | 7 +++- client/styles/abstracts/_placeholders.scss | 1 + client/styles/components/_sidebar.scss | 46 +++++++++++++++++++++- client/styles/layout/_ide.scss | 5 ++- 11 files changed, 147 insertions(+), 13 deletions(-) create mode 100644 client/images/left-arrow.svg create mode 100644 client/images/plus-icon.svg create mode 100644 client/images/right-arrow.svg 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 @@ + + + + arrow shape copy + Created with Sketch. + + + + + + + \ 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 @@ + + + + close shape + Created with Sketch. + + + + + + + + + + + \ 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 @@ + + + + arrow shape copy + Created with Sketch. + + + + + + + \ 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 ( -
+

Sketch Files

- - + - +
+ + + + + + + + + + +
    {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; + } }