Create basic projects page with add-button

11 files changed, 301 insertions, 0 deletions

diff --git a/src/components/projects/FilterButton.js b/src/components/projects/FilterButton.js
new file mode 100644
index 00000000..8d6b7146
--- /dev/null
+++ b/src/components/projects/FilterButton.js
@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import "./FilterButton.css";
+
+const FilterButton = ({active, children, onClick}) => (
+    <div className={classNames("project-filter-button", {"active": active})}
+         onClick={() => {
+             if (!active) {
+                 onClick();
+             }
+         }}>
+        {children}
+    </div>
+);
+
+FilterButton.propTypes = {
+    active: PropTypes.bool.isRequired,
+    children: PropTypes.node.isRequired,
+    onClick: PropTypes.func.isRequired
+};
+
+export default FilterButton;
diff --git a/src/components/projects/FilterButton.sass b/src/components/projects/FilterButton.sass
new file mode 100644
index 00000000..0cad68e3
--- /dev/null
+++ b/src/components/projects/FilterButton.sass
@@ -0,0 +1,23 @@
+@import ../../style-globals/_mixins.sass
+@import ../../style-globals/_variables.sass
+
+.project-filter-button
+  display: inline-block
+  width: 33.3%
+  //margin-right: -4px
+  padding: 10px $global-padding
+
+  font-size: 12pt
+  border-right: 1px solid #06326b
+
+  +clickable
+  +transition(background, $transition-length)
+
+.project-filter-button:last-of-type
+  border: 0
+
+.project-filter-button:hover
+  background: #0c60bf
+
+.project-filter-button:active, .project-filter-button.active
+  background: #073d7d
diff --git a/src/components/projects/FilterPanel.js b/src/components/projects/FilterPanel.js
new file mode 100644
index 00000000..050bf0aa
--- /dev/null
+++ b/src/components/projects/FilterPanel.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import FilterLink from "../../containers/projects/FilterLink";
+import "./FilterPanel.css";
+
+const ProjectFilterPanel = () => (
+    <div className="filter-menu">
+        <div className="project-filters">
+            <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
+            <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
+            <FilterLink filter="SHOW_SHARED">Projects shared with me</FilterLink>
+        </div>
+    </div>
+);
+
+export default ProjectFilterPanel;
diff --git a/src/components/projects/FilterPanel.sass b/src/components/projects/FilterPanel.sass
new file mode 100644
index 00000000..a70c7a90
--- /dev/null
+++ b/src/components/projects/FilterPanel.sass
@@ -0,0 +1,21 @@
+@import ../../style-globals/_mixins.sass
+@import ../../style-globals/_variables.sass
+
+.filter-menu
+  display: block
+
+  background: #0761b1
+  border: 1px solid #06326b
+  color: #eee
+
+  text-align: center
+
+  +border-radius($standard-border-radius)
+  overflow: hidden
+
+  margin-bottom: 20px
+
+  .project-filters
+    display: block
+    overflow: hidden
+    margin: 0 -1px
diff --git a/src/components/projects/NewProjectButton.js b/src/components/projects/NewProjectButton.js
new file mode 100644
index 00000000..9eaf6df4
--- /dev/null
+++ b/src/components/projects/NewProjectButton.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './NewProjectButton.css';
+
+const NewProjectButton = ({onClick}) => (
+    <div className="new-project-btn" onClick={onClick}>
+        <span className="fa fa-plus"/>
+        New Project
+    </div>
+);
+
+NewProjectButton.propTypes = {
+    onClick: PropTypes.func.isRequired,
+};
+
+export default NewProjectButton;
diff --git a/src/components/projects/NewProjectButton.sass b/src/components/projects/NewProjectButton.sass
new file mode 100644
index 00000000..89435902
--- /dev/null
+++ b/src/components/projects/NewProjectButton.sass
@@ -0,0 +1,31 @@
+@import ../../style-globals/_mixins.sass
+@import ../../style-globals/_variables.sass
+
+.new-project-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-project-btn:hover
+  background: #73ac45
+
+.new-project-btn:active
+  background: #5c8835
diff --git a/src/components/projects/NoProjectsAlert.js b/src/components/projects/NoProjectsAlert.js
new file mode 100644
index 00000000..957435c7
--- /dev/null
+++ b/src/components/projects/NoProjectsAlert.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import "./NoProjectsAlert.css";
+
+const NoProjectsAlert = () => (
+    <div className="no-projects-alert alert alert-info">
+        <span className="info-icon fa fa-2x fa-question-circle"/>
+        <strong>No projects here yet...</strong> Add some with the 'New Project' button!
+    </div>
+);
+
+export default NoProjectsAlert;
diff --git a/src/components/projects/NoProjectsAlert.sass b/src/components/projects/NoProjectsAlert.sass
new file mode 100644
index 00000000..a526f9ad
--- /dev/null
+++ b/src/components/projects/NoProjectsAlert.sass
@@ -0,0 +1,10 @@
+.no-projects-alert
+  position: relative
+  padding-left: 50px
+
+  .info-icon
+    position: absolute
+    top: 11px
+    left: 15px
+    bottom: 10px
+    font-size: 20pt
diff --git a/src/components/projects/ProjectAuth.js b/src/components/projects/ProjectAuth.js
new file mode 100644
index 00000000..7e3abae1
--- /dev/null
+++ b/src/components/projects/ProjectAuth.js
@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import React from 'react';
+import Shapes from "../../shapes/index";
+import {AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP} from "../../util/authorizations";
+import {parseAndFormatDateTime} from "../../util/date-time";
+
+const ProjectAuth = ({projectAuth}) => (
+    <div className="project-row">
+        <div>{projectAuth.simulation.name}</div>
+        <div>{parseAndFormatDateTime(projectAuth.simulation.datetimeLastEdited)}</div>
+        <div>
+            <span className={classNames("fa", "fa-" + AUTH_ICON_MAP[projectAuth.authorizationLevel])}/>
+            {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
+        </div>
+    </div>
+);
+
+ProjectAuth.propTypes = {
+    projectAuth: Shapes.Authorization.isRequired,
+};
+
+export default ProjectAuth;
diff --git a/src/components/projects/ProjectAuthList.js b/src/components/projects/ProjectAuthList.js
new file mode 100644
index 00000000..093b3279
--- /dev/null
+++ b/src/components/projects/ProjectAuthList.js
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Shapes from "../../shapes/index";
+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 => (
+                    <ProjectAuth projectAuth={authorization} key={authorization.simulation.id}/>
+                ))
+            }
+        </div>
+    </div>
+);
+
+ProjectAuthList.propTypes = {
+    authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
+    onProjectClick: PropTypes.func.isRequired,
+};
+
+export default ProjectAuthList;
diff --git a/src/components/projects/ProjectAuthList.sass b/src/components/projects/ProjectAuthList.sass
new file mode 100644
index 00000000..86e1123c
--- /dev/null
+++ b/src/components/projects/ProjectAuthList.sass
@@ -0,0 +1,98 @@
+@import ../../style-globals/_mixins.sass
+@import ../../style-globals/_variables.sass
+
+.project-list
+  display: block
+  font-size: 12pt
+  border: 0
+
+  .list-head, .list-body .project-row
+    display: block
+    position: relative
+
+  .list-head div, .list-body .project-row div
+    padding: 0 10px
+    display: inline-block
+
+  .list-head
+    font-weight: bold
+
+    // Address default margin between inline-blocks
+    div
+      margin-right: -4px
+
+.project-row
+  background: #f8f8f8
+  border: 1px solid #b6b6b6
+  height: 40px
+  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%
+
+  div:nth-of-type(2)
+    width: 30%
+
+  div:last-of-type
+    width: 20%
+
+    span
+      margin-right: 10px
+
+.project-row.active
+  border-bottom: 0
+  background: #3442b1
+  color: #eee
+
+.project-view
+  padding: 10px
+  overflow: hidden
+  border: 1px solid #b6b6b6
+  border-top: 0
+
+  background: #3442b1
+  color: #eee
+
+  .participants
+    display: inline-block
+    float: left
+
+  .access-buttons
+    display: inline-block
+    float: right
+
+    .inline-btn
+      margin-left: 10px
+
+    .open
+      background: #e38829
+
+    .open:hover
+      background: #ff992e
+
+    .open:active
+      background: #ba6f21
+
+    .edit
+      background: #2c3897
+
+    .edit:hover
+      background: #3a4ac8
+
+    .edit:active
+      background: #242d7a