From 0bc393e41c5b238c1d95a49ede3dec45b4ed527e Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Wed, 9 Aug 2017 17:04:15 +0300
Subject: Add action buttons to project rows

---
 src/components/projects/ProjectActionButtons.js | 24 +++++++
 src/components/projects/ProjectAuth.js          |  2 +
 src/components/projects/ProjectAuthList.js      | 33 +++++-----
 src/components/projects/ProjectAuthList.sass    | 87 +++++++++++++------------
 4 files changed, 89 insertions(+), 57 deletions(-)
 create mode 100644 src/components/projects/ProjectActionButtons.js

(limited to 'src/components/projects')

diff --git a/src/components/projects/ProjectActionButtons.js b/src/components/projects/ProjectActionButtons.js
new file mode 100644
index 00000000..085438d8
--- /dev/null
+++ b/src/components/projects/ProjectActionButtons.js
@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+import React from 'react';
+
+const ProjectActionButtons = ({onOpen, onViewUsers, onDelete}) => (
+    <div className="project-icons">
+        <div className="open" title="Open this project" onClick={onOpen}>
+            <span className="fa fa-play"/>
+        </div>
+        <div className="users" title="View and edit collaborators on this project" onClick={onViewUsers}>
+            <span className="fa fa-users"/>
+        </div>
+        <div className="delete" title="Delete this project" onClick={onDelete}>
+            <span className="fa fa-trash"/>
+        </div>
+    </div>
+);
+
+ProjectActionButtons.propTypes = {
+    onOpen: PropTypes.func.isRequired,
+    onViewUsers: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+};
+
+export default ProjectActionButtons;
diff --git a/src/components/projects/ProjectAuth.js b/src/components/projects/ProjectAuth.js
index 7e3abae1..e58ac92b 100644
--- a/src/components/projects/ProjectAuth.js
+++ b/src/components/projects/ProjectAuth.js
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
+import ProjectActions from "../../containers/projects/ProjectActions";
 import Shapes from "../../shapes/index";
 import {AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP} from "../../util/authorizations";
 import {parseAndFormatDateTime} from "../../util/date-time";
@@ -12,6 +13,7 @@ const ProjectAuth = ({projectAuth}) => (
             <span className={classNames("fa", "fa-" + AUTH_ICON_MAP[projectAuth.authorizationLevel])}/>
             {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
         </div>
+        <ProjectActions/>
     </div>
 );
 
diff --git a/src/components/projects/ProjectAuthList.js b/src/components/projects/ProjectAuthList.js
index 093b3279..217a8375 100644
--- a/src/components/projects/ProjectAuthList.js
+++ b/src/components/projects/ProjectAuthList.js
@@ -5,23 +5,26 @@ import NoProjectsAlert from "./NoProjectsAlert";
 import ProjectAuth from "./ProjectAuth";
 import "./ProjectAuthList.css";
 
-const ProjectAuthList = ({authorizations, onProjectClick}) => (
-    <div className="project-list">
-        <div className="list-head">
-            <div>Project name</div>
-            <div>Last edited</div>
-            <div>Access rights</div>
-        </div>
-        <div className="list-body">
-            {authorizations.length === 0 ?
-                <NoProjectsAlert/> :
-                authorizations.map(authorization => (
+const ProjectAuthList = ({authorizations}) => {
+    if (authorizations.length === 0) {
+        return <NoProjectsAlert/>;
+    }
+
+    return (
+        <div className="project-list">
+            <div className="list-head">
+                <div>Project name</div>
+                <div>Last edited</div>
+                <div>Access rights</div>
+            </div>
+            <div className="list-body">
+                {authorizations.map(authorization => (
                     <ProjectAuth projectAuth={authorization} key={authorization.simulation.id}/>
-                ))
-            }
+                ))}
+            </div>
         </div>
-    </div>
-);
+    );
+};
 
 ProjectAuthList.propTypes = {
     authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
diff --git a/src/components/projects/ProjectAuthList.sass b/src/components/projects/ProjectAuthList.sass
index 86e1123c..1c65305e 100644
--- a/src/components/projects/ProjectAuthList.sass
+++ b/src/components/projects/ProjectAuthList.sass
@@ -28,25 +28,19 @@
   line-height: 40px
   clear: both
 
-  +transition(background, $transition-length)
-  +clickable
-
-.project-row:hover
-  background: #fff
-
-.project-row:active
-  background: #cccccc
-
 .project-row:not(:first-of-type)
   margin-top: -1px
 
 // Sizing of table columns
 .project-row, .project-list .list-head
   div:first-of-type
-    width: 50%
+    width: 40%
 
   div:nth-of-type(2)
-    width: 30%
+    width: 20%
+
+  div:nth-of-type(3)
+    width: 20%
 
   div:last-of-type
     width: 20%
@@ -54,45 +48,54 @@
     span
       margin-right: 10px
 
-.project-row.active
-  border-bottom: 0
-  background: #3442b1
-  color: #eee
+.project-row .project-icons div
+  display: inline
+  position: relative
+  top: 5px
+  width: 30px
+  height: 30px
+  margin-right: 5px
+  font-size: 12pt
+  color: white
+  +border-radius(100%)
+  +clickable
+  +transition(background, $transition-length)
 
-.project-view
-  padding: 10px
-  overflow: hidden
-  border: 1px solid #b6b6b6
-  border-top: 0
+  span
+    position: relative
+    top: -4px
+    left: -1px
 
-  background: #3442b1
-  color: #eee
+  &.open
+    $icon-color: #0c60bf
+    background: $icon-color
 
-  .participants
-    display: inline-block
-    float: left
+    &:hover
+      background: lighten($icon-color, 10%)
 
-  .access-buttons
-    display: inline-block
-    float: right
+    &:active
+      background: darken($icon-color, 10%)
 
-    .inline-btn
-      margin-left: 10px
+  &.users
+    font-size: 10pt
+    $icon-color: #17bf55
+    background: $icon-color
 
-    .open
-      background: #e38829
+    span
+      left: -2px
 
-    .open:hover
-      background: #ff992e
+    &:hover
+      background: lighten($icon-color, 10%)
 
-    .open:active
-      background: #ba6f21
+    &:active
+      background: darken($icon-color, 10%)
 
-    .edit
-      background: #2c3897
+  &.delete
+    $icon-color: #e3474d
+    background: $icon-color
 
-    .edit:hover
-      background: #3a4ac8
+    &:hover
+      background: lighten($icon-color, 10%)
 
-    .edit:active
-      background: #242d7a
+    &:active
+      background: darken($icon-color, 10%)
-- 
cgit v1.2.3