summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/actions/projects.js8
-rw-r--r--src/components/modals/Modal.js2
-rw-r--r--src/components/projects/ProjectActionButtons.js24
-rw-r--r--src/components/projects/ProjectAuth.js2
-rw-r--r--src/components/projects/ProjectAuthList.js33
-rw-r--r--src/components/projects/ProjectAuthList.sass87
-rw-r--r--src/containers/projects/NewProjectModal.js2
-rw-r--r--src/containers/projects/ProjectActions.js22
-rw-r--r--src/reducers/projects.js3
9 files changed, 125 insertions, 58 deletions
diff --git a/src/actions/projects.js b/src/actions/projects.js
index 57304326..0ab1f820 100644
--- a/src/actions/projects.js
+++ b/src/actions/projects.js
@@ -3,6 +3,7 @@ export const OPEN_NEW_PROJECT_MODAL = "OPEN_NEW_PROJECT_MODAL";
export const CLOSE_NEW_PROJECT_MODAL = "CLOSE_PROJECT_POPUP";
export const ADD_PROJECT = "ADD_PROJECT";
export const DELETE_PROJECT = "DELETE_PROJECT";
+export const OPEN_PROJECT = "OPEN_PROJECT";
export const setAuthVisibilityFilter = (filter) => {
return {
@@ -36,3 +37,10 @@ export const deleteProject = (id) => {
id
};
};
+
+export const openProject = (id) => {
+ return {
+ type: OPEN_PROJECT,
+ id
+ };
+};
diff --git a/src/components/modals/Modal.js b/src/components/modals/Modal.js
index e2d19fcb..bb8fa00f 100644
--- a/src/components/modals/Modal.js
+++ b/src/components/modals/Modal.js
@@ -17,6 +17,8 @@ class Modal extends React.Component {
componentDidMount() {
this.openOrCloseModal();
+
+ window["$"]("#" + this.id).on("hide.bs.modal", this.props.onCancel.bind(this));
}
componentDidUpdate() {
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%)
diff --git a/src/containers/projects/NewProjectModal.js b/src/containers/projects/NewProjectModal.js
index 7321cb4d..affaf794 100644
--- a/src/containers/projects/NewProjectModal.js
+++ b/src/containers/projects/NewProjectModal.js
@@ -20,8 +20,8 @@ const mapDispatchToProps = dispatch => {
callback: (text) => {
if (text) {
dispatch(addProject(text));
- dispatch(closeNewProjectModal());
}
+ dispatch(closeNewProjectModal());
}
};
};
diff --git a/src/containers/projects/ProjectActions.js b/src/containers/projects/ProjectActions.js
new file mode 100644
index 00000000..3746bdb8
--- /dev/null
+++ b/src/containers/projects/ProjectActions.js
@@ -0,0 +1,22 @@
+import {connect} from "react-redux";
+import {deleteProject, openProject} from "../../actions/projects";
+import ProjectActionButtons from "../../components/projects/ProjectActionButtons";
+
+const mapStateToProps = state => {
+ return {};
+};
+
+const mapDispatchToProps = dispatch => {
+ return {
+ onOpen: (id) => dispatch(openProject(id)),
+ onViewUsers: (id) => {},
+ onDelete: (id) => dispatch(deleteProject(id)),
+ };
+};
+
+const ProjectActions = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(ProjectActionButtons);
+
+export default ProjectActions;
diff --git a/src/reducers/projects.js b/src/reducers/projects.js
index 20f17a3c..ff5c37cd 100644
--- a/src/reducers/projects.js
+++ b/src/reducers/projects.js
@@ -1,6 +1,7 @@
import {
ADD_PROJECT,
CLOSE_NEW_PROJECT_MODAL,
+ DELETE_PROJECT,
OPEN_NEW_PROJECT_MODAL,
SET_AUTH_VISIBILITY_FILTER
} from "../actions/projects";
@@ -16,6 +17,8 @@ export const authorizations = (state = [], action) => {
authorizationLevel: "OWN"
}
];
+ case DELETE_PROJECT:
+ return [];
default:
return state;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 19:42:26 +0000