From 4272111ce7da4293bff7d11cf08e172651e7b3b1 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Thu, 21 Sep 2017 17:34:19 +0200
Subject: Make sidebars collapsible

---
 src/components/sidebars/Sidebar.js                 | 40 +++++++++++++++++-----
 src/components/sidebars/Sidebar.sass               | 31 +++++++++++++++++
 .../sidebars/simulation/TaskComponent.js           | 10 ++++--
 3 files changed, 70 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/sidebars/Sidebar.js b/src/components/sidebars/Sidebar.js
index ce743b17..00e3607a 100644
--- a/src/components/sidebars/Sidebar.js
+++ b/src/components/sidebars/Sidebar.js
@@ -2,13 +2,37 @@ import classNames from "classnames";
 import React from "react";
 import "./Sidebar.css";
 
-const Sidebar = ({isRight, children}) => (
-    <div
-        className={classNames("sidebar p-3 h-100", {"sidebar-right": isRight})}
-        onWheel={e => e.stopPropagation()}
-    >
-        {children}
-    </div>
-);
+class Sidebar extends React.Component {
+    state = {
+        collapsed: false
+    };
+
+    render() {
+        const collapseButton = (
+            <div
+                className={classNames("sidebar-collapse-button", {"sidebar-collapse-button-right": this.props.isRight})}
+                onClick={() => this.setState({collapsed: !this.state.collapsed})}
+            >
+                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ?
+                    <span className="fa fa-angle-left" title={this.props.isRight ? "Expand" : "Collapse"}/> :
+                    <span className="fa fa-angle-right" title={this.props.isRight ? "Collapse" : "Expand"}/>
+                }
+            </div>
+        );
+
+        if (this.state.collapsed) {
+            return collapseButton;
+        }
+        return (
+            <div
+                className={classNames("sidebar p-3 h-100", {"sidebar-right": this.props.isRight})}
+                onWheel={e => e.stopPropagation()}
+            >
+                {this.props.children}
+                {collapseButton}
+            </div>
+        );
+    }
+}
 
 export default Sidebar;
diff --git a/src/components/sidebars/Sidebar.sass b/src/components/sidebars/Sidebar.sass
index c3796d59..b987ef07 100644
--- a/src/components/sidebars/Sidebar.sass
+++ b/src/components/sidebars/Sidebar.sass
@@ -1,4 +1,27 @@
 @import ../../style-globals/_variables.sass
+@import ../../style-globals/_mixins.sass
+
+.sidebar-collapse-button
+  position: absolute
+  left: 5px
+  top: 5px
+  padding: 5px 7px
+
+  background: white
+  border: solid 1px $gray-semi-light
+  z-index: 99
+
+  +clickable
+  +border-radius(5px)
+  +transition(background, 200ms)
+
+  &.sidebar-collapse-button-right
+    left: auto
+    right: 5px
+    top: 5px
+
+  &:hover
+    background: #eeeeee
 
 .sidebar
   position: absolute
@@ -11,9 +34,17 @@
 
   border-right: $gray-semi-dark 1px solid
 
+  .sidebar-collapse-button
+    left: auto
+    right: -25px
+
 .sidebar-right
   left: auto
   right: 0
 
   border-left: $gray-semi-dark 1px solid
   border-right: none
+
+  .sidebar-collapse-button-right
+    left: -25px
+    right: auto
diff --git a/src/components/sidebars/simulation/TaskComponent.js b/src/components/sidebars/simulation/TaskComponent.js
index c02d0a4b..09608b99 100644
--- a/src/components/sidebars/simulation/TaskComponent.js
+++ b/src/components/sidebars/simulation/TaskComponent.js
@@ -5,7 +5,9 @@ const TaskComponent = ({task, flopsLeft}) => {
     let stateInfo;
 
     if (flopsLeft === task.totalFlopCount) {
-        stateInfo = <p><span className="fa fa-hourglass-half mr-2"/>Waiting</p>;
+        stateInfo = (
+            <p><span className="fa fa-hourglass-half mr-2"/>Waiting</p>
+        );
     } else if (flopsLeft > 0) {
         stateInfo = (
             <p>
@@ -14,14 +16,16 @@ const TaskComponent = ({task, flopsLeft}) => {
             </p>
         );
     } else {
-        stateInfo = <p><span className="fa fa-check mr-2"/>Completed</p>;
+        stateInfo = (
+            <p><span className="fa fa-check mr-2"/>Completed</p>
+        );
     }
 
     return (
         <li className="list-group-item flex-column align-items-start">
             <div className="d-flex w-100 justify-content-between">
                 <h5 className="mb-1">{task.totalFlopCount} FLOPS</h5>
-                <small>Starts: {convertSecondsToFormattedTime(task.startTick)}</small>
+                <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
             </div>
             {stateInfo}
         </li>
-- 
cgit v1.2.3