From a1d95b3685cffb6a9344d0d1e5505dd391193f16 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 15 Sep 2017 12:53:26 +0200
Subject: Implement experiment list and add

---
 src/components/simulations/FilterButton.js         |  7 +--
 src/components/simulations/FilterButton.sass       | 18 ------
 src/components/simulations/FilterPanel.js          | 10 ++-
 src/components/simulations/FilterPanel.sass        | 23 ++-----
 src/components/simulations/NewSimulationButton.js  | 16 -----
 .../simulations/NewSimulationButton.sass           | 31 ----------
 .../simulations/NewSimulationButtonComponent.js    | 17 +++++
 src/components/simulations/NoSimulationsAlert.js   | 11 ----
 src/components/simulations/NoSimulationsAlert.sass | 10 ---
 .../simulations/SimulationActionButtons.js         |  4 +-
 src/components/simulations/SimulationAuth.js       | 24 --------
 src/components/simulations/SimulationAuthList.js   | 40 +++++++-----
 src/components/simulations/SimulationAuthList.sass | 72 ++--------------------
 src/components/simulations/SimulationAuthRow.js    | 24 ++++++++
 14 files changed, 83 insertions(+), 224 deletions(-)
 delete mode 100644 src/components/simulations/FilterButton.sass
 delete mode 100644 src/components/simulations/NewSimulationButton.js
 delete mode 100644 src/components/simulations/NewSimulationButton.sass
 create mode 100644 src/components/simulations/NewSimulationButtonComponent.js
 delete mode 100644 src/components/simulations/NoSimulationsAlert.js
 delete mode 100644 src/components/simulations/NoSimulationsAlert.sass
 delete mode 100644 src/components/simulations/SimulationAuth.js
 create mode 100644 src/components/simulations/SimulationAuthRow.js

(limited to 'src/components/simulations')

diff --git a/src/components/simulations/FilterButton.js b/src/components/simulations/FilterButton.js
index 2105d281..f95c35fa 100644
--- a/src/components/simulations/FilterButton.js
+++ b/src/components/simulations/FilterButton.js
@@ -1,17 +1,16 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import "./FilterButton.css";
 
 const FilterButton = ({active, children, onClick}) => (
-    <div className={classNames("simulation-filter-button", {"active": active})}
-         onClick={() => {
+    <button className={classNames("btn btn-secondary", {"active": active})}
+            onClick={() => {
              if (!active) {
                  onClick();
              }
          }}>
         {children}
-    </div>
+    </button>
 );
 
 FilterButton.propTypes = {
diff --git a/src/components/simulations/FilterButton.sass b/src/components/simulations/FilterButton.sass
deleted file mode 100644
index 698bc9a4..00000000
--- a/src/components/simulations/FilterButton.sass
+++ /dev/null
@@ -1,18 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.simulation-filter-button
-  display: inline-block
-  width: 33.3%
-  padding: 10px $global-padding
-
-  font-size: 12pt
-
-  +clickable
-  +transition(background, $transition-length)
-
-.simulation-filter-button:hover
-  background: #0c60bf
-
-.simulation-filter-button:active, .simulation-filter-button.active
-  background: #073d7d
diff --git a/src/components/simulations/FilterPanel.js b/src/components/simulations/FilterPanel.js
index 811da005..504e24e4 100644
--- a/src/components/simulations/FilterPanel.js
+++ b/src/components/simulations/FilterPanel.js
@@ -3,12 +3,10 @@ import FilterLink from "../../containers/simulations/FilterLink";
 import "./FilterPanel.css";
 
 const FilterPanel = () => (
-    <div className="filter-menu">
-        <div className="simulation-filters">
-            <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
-            <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
-            <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
-        </div>
+    <div className="btn-group filter-panel mb-2">
+        <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
+        <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
+        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
     </div>
 );
 
diff --git a/src/components/simulations/FilterPanel.sass b/src/components/simulations/FilterPanel.sass
index 70401dcb..e10e4746 100644
--- a/src/components/simulations/FilterPanel.sass
+++ b/src/components/simulations/FilterPanel.sass
@@ -1,20 +1,5 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
+.filter-panel
+  display: flex
 
-.filter-menu
-  display: block
-
-  background: #0761b1
-  color: #eee
-
-  text-align: center
-
-  +border-radius(25px)
-  overflow: hidden
-
-  margin-bottom: 20px
-
-  .simulation-filters
-    display: block
-    overflow: hidden
-    margin: 0 -1px
+  button
+    flex: 1 !important
diff --git a/src/components/simulations/NewSimulationButton.js b/src/components/simulations/NewSimulationButton.js
deleted file mode 100644
index 468f7678..00000000
--- a/src/components/simulations/NewSimulationButton.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import './NewSimulationButton.css';
-
-const NewSimulationButton = ({onClick}) => (
-    <div className="new-simulation-btn" onClick={onClick}>
-        <span className="fa fa-plus"/>
-        New Simulation
-    </div>
-);
-
-NewSimulationButton.propTypes = {
-    onClick: PropTypes.func.isRequired,
-};
-
-export default NewSimulationButton;
diff --git a/src/components/simulations/NewSimulationButton.sass b/src/components/simulations/NewSimulationButton.sass
deleted file mode 100644
index 9bf82c49..00000000
--- a/src/components/simulations/NewSimulationButton.sass
+++ /dev/null
@@ -1,31 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.new-simulation-btn
-  $button-height: 35px
-
-  display: inline-block
-  position: absolute
-  bottom: $navbar-height + 40px
-  right: 40px
-  padding: 0 10px
-  height: $button-height
-  line-height: $button-height
-  font-size: 14pt
-
-  background: #679436
-  color: #eee
-  border: 1px solid #507830
-
-  +border-radius($standard-border-radius)
-  +clickable
-  +transition(all, $transition-length)
-
-  span
-    margin-right: 10px
-
-.new-simulation-btn:hover
-  background: #73ac45
-
-.new-simulation-btn:active
-  background: #5c8835
diff --git a/src/components/simulations/NewSimulationButtonComponent.js b/src/components/simulations/NewSimulationButtonComponent.js
new file mode 100644
index 00000000..74036c1b
--- /dev/null
+++ b/src/components/simulations/NewSimulationButtonComponent.js
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const NewSimulationButtonComponent = ({onClick}) => (
+    <div className="bottom-btn-container">
+        <div className="btn btn-primary float-right" onClick={onClick}>
+            <span className="fa fa-plus mr-2"/>
+            New Simulation
+        </div>
+    </div>
+);
+
+NewSimulationButtonComponent.propTypes = {
+    onClick: PropTypes.func.isRequired,
+};
+
+export default NewSimulationButtonComponent;
diff --git a/src/components/simulations/NoSimulationsAlert.js b/src/components/simulations/NoSimulationsAlert.js
deleted file mode 100644
index d688ae56..00000000
--- a/src/components/simulations/NoSimulationsAlert.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import "./NoSimulationsAlert.css";
-
-const NoSimulationsAlert = () => (
-    <div className="no-simulations-alert alert alert-info">
-        <span className="info-icon fa fa-2x fa-question-circle"/>
-        <strong>No simulations here yet...</strong> Add some with the 'New Simulation' button!
-    </div>
-);
-
-export default NoSimulationsAlert;
diff --git a/src/components/simulations/NoSimulationsAlert.sass b/src/components/simulations/NoSimulationsAlert.sass
deleted file mode 100644
index 10e89e51..00000000
--- a/src/components/simulations/NoSimulationsAlert.sass
+++ /dev/null
@@ -1,10 +0,0 @@
-.no-simulations-alert
-  position: relative
-  padding-left: 50px
-
-  .info-icon
-    position: absolute
-    top: 11px
-    left: 15px
-    bottom: 10px
-    font-size: 20pt
diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js
index 29872fcb..1cb80c94 100644
--- a/src/components/simulations/SimulationActionButtons.js
+++ b/src/components/simulations/SimulationActionButtons.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {Link} from "react-router-dom";
 
 const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
-    <div className="simulation-icons">
+    <td className="simulation-icons">
         <Link to={"/simulations/" + simulationId} className="open" title="Open this simulation">
             <span className="fa fa-play"/>
         </Link>
@@ -14,7 +14,7 @@ const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
         <div className="delete" title="Delete this simulation" onClick={() => onDelete(simulationId)}>
             <span className="fa fa-trash"/>
         </div>
-    </div>
+    </td>
 );
 
 SimulationActionButtons.propTypes = {
diff --git a/src/components/simulations/SimulationAuth.js b/src/components/simulations/SimulationAuth.js
deleted file mode 100644
index 9b887991..00000000
--- a/src/components/simulations/SimulationAuth.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import SimulationActions from "../../containers/simulations/SimulationActions";
-import Shapes from "../../shapes/index";
-import {AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP} from "../../util/authorizations";
-import {parseAndFormatDateTime} from "../../util/date-time";
-
-const SimulationAuth = ({simulationAuth}) => (
-    <div className="simulation-row">
-        <div>{simulationAuth.simulation.name}</div>
-        <div>{parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}</div>
-        <div>
-            <span className={classNames("fa", "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel])}/>
-            {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]}
-        </div>
-        <SimulationActions simulationId={simulationAuth.simulation.id}/>
-    </div>
-);
-
-SimulationAuth.propTypes = {
-    simulationAuth: Shapes.Authorization.isRequired,
-};
-
-export default SimulationAuth;
diff --git a/src/components/simulations/SimulationAuthList.js b/src/components/simulations/SimulationAuthList.js
index 7653f178..fd5173a8 100644
--- a/src/components/simulations/SimulationAuthList.js
+++ b/src/components/simulations/SimulationAuthList.js
@@ -1,27 +1,33 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Shapes from "../../shapes/index";
-import NoSimulationsAlert from "./NoSimulationsAlert";
-import SimulationAuth from "./SimulationAuth";
 import "./SimulationAuthList.css";
+import SimulationAuthRow from "./SimulationAuthRow";
 
 const SimulationAuthList = ({authorizations}) => {
-    if (authorizations.length === 0) {
-        return <NoSimulationsAlert/>;
-    }
-
     return (
-        <div className="simulation-list">
-            <div className="list-head">
-                <div>Simulation name</div>
-                <div>Last edited</div>
-                <div>Access rights</div>
-            </div>
-            <div className="list-body">
-                {authorizations.map(authorization => (
-                    <SimulationAuth simulationAuth={authorization} key={authorization.simulation.id}/>
-                ))}
-            </div>
+        <div className="vertically-expanding-container">
+            {authorizations.length === 0 ?
+                <div className="alert alert-info">
+                    <span className="info-icon fa fa-question-circle mr-2"/>
+                    <strong>No simulations here yet...</strong> Add some with the 'New Simulation' button!
+                </div> :
+                <table className="table">
+                    <thead>
+                    <tr>
+                        <th>Simulation name</th>
+                        <th>Last edited</th>
+                        <th>Access rights</th>
+                        <th/>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {authorizations.map(authorization => (
+                        <SimulationAuthRow simulationAuth={authorization} key={authorization.simulation.id}/>
+                    ))}
+                    </tbody>
+                </table>
+            }
         </div>
     );
 };
diff --git a/src/components/simulations/SimulationAuthList.sass b/src/components/simulations/SimulationAuthList.sass
index cb1fe4cc..b09c7869 100644
--- a/src/components/simulations/SimulationAuthList.sass
+++ b/src/components/simulations/SimulationAuthList.sass
@@ -1,70 +1,15 @@
 @import ../../style-globals/_mixins.sass
 @import ../../style-globals/_variables.sass
 
-.simulation-list
-  display: block
-  font-size: 12pt
-  border: 0
-
-  .list-head, .list-body .simulation-row
-    display: block
-    position: relative
-
-  .list-head div, .list-body .simulation-row div
-    padding: 0 10px
-    display: inline-block
-
-  .list-head
-    font-weight: bold
-
-    // Address default margin between inline-blocks
-    div
-      margin-right: -4px
-
-.simulation-row
-  background: #f8f8f8
-  border: 1px solid #b6b6b6
-  height: 40px
-  line-height: 40px
-  clear: both
-
-.simulation-row:not(:first-of-type)
-  margin-top: -1px
-
-// Sizing of table columns
-.simulation-row, .simulation-list .list-head
-  div:first-of-type
-    width: 40%
-
-  div:nth-of-type(2)
-    width: 20%
-
-  div:nth-of-type(3)
-    width: 20%
-
-  div:last-of-type
-    width: 20%
-
-    span
-      margin-right: 10px
-
-.simulation-row > div:not(:first-of-type)
-  padding-left: 0 !important
-
-.simulation-list .list-head > div:not(:first-of-type)
-  padding-left: 5px !important
-
 .simulation-icons
   text-align: right
-  padding-right: 0 !important
 
-.simulation-row .simulation-icons div, .simulation-row .simulation-icons a
+.simulation-icons div, .simulation-icons a
   display: inline-block
-  position: relative
-  top: 4px
-  width: 30px
-  height: 30px
+  width: 35px
+  height: 35px
   margin-right: 5px
+  padding: 5px
   font-size: 12pt
   color: white
   +border-radius(100%)
@@ -73,17 +18,13 @@
 
   span
     position: relative
-    top: -4px
-    left: -1px
+    left: -6px
 
   background-color: $blue-dark
 
   &.open
     $icon-color: #0a00bf
 
-    span
-      left: 1px
-
     &:hover
       background: lighten($icon-color, 10%)
 
@@ -91,11 +32,10 @@
       background: darken($icon-color, 10%)
 
   &.users
-    font-size: 10pt
     $icon-color: #17bf55
 
     span
-      left: -2px
+      left: -3px
 
     &:hover
       background: $icon-color
diff --git a/src/components/simulations/SimulationAuthRow.js b/src/components/simulations/SimulationAuthRow.js
new file mode 100644
index 00000000..26e01570
--- /dev/null
+++ b/src/components/simulations/SimulationAuthRow.js
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import React from 'react';
+import SimulationActions from "../../containers/simulations/SimulationActions";
+import Shapes from "../../shapes/index";
+import {AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP} from "../../util/authorizations";
+import {parseAndFormatDateTime} from "../../util/date-time";
+
+const SimulationAuthRow = ({simulationAuth}) => (
+    <tr>
+        <td>{simulationAuth.simulation.name}</td>
+        <td>{parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}</td>
+        <td>
+            <span className={classNames("fa", "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel], "mr-2")}/>
+            {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]}
+        </td>
+        <SimulationActions simulationId={simulationAuth.simulation.id}/>
+    </tr>
+);
+
+SimulationAuthRow.propTypes = {
+    simulationAuth: Shapes.Authorization.isRequired,
+};
+
+export default SimulationAuthRow;
-- 
cgit v1.2.3