From 07195f3762b6a8a7dfb44c2231db58c5be13c43f Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Wed, 16 Aug 2017 22:55:16 +0300 Subject: Rename project to sim and enable sim-adding --- src/components/simulations/FilterButton.js | 23 +++++ src/components/simulations/FilterButton.sass | 23 +++++ src/components/simulations/FilterPanel.js | 15 +++ src/components/simulations/FilterPanel.sass | 21 +++++ src/components/simulations/NewSimulationButton.js | 16 ++++ .../simulations/NewSimulationButton.sass | 31 ++++++ src/components/simulations/NoSimulationsAlert.js | 11 +++ src/components/simulations/NoSimulationsAlert.sass | 10 ++ .../simulations/SimulationActionButtons.js | 26 ++++++ src/components/simulations/SimulationAuth.js | 24 +++++ src/components/simulations/SimulationAuthList.js | 33 +++++++ src/components/simulations/SimulationAuthList.sass | 104 +++++++++++++++++++++ 12 files changed, 337 insertions(+) create mode 100644 src/components/simulations/FilterButton.js create mode 100644 src/components/simulations/FilterButton.sass create mode 100644 src/components/simulations/FilterPanel.js create mode 100644 src/components/simulations/FilterPanel.sass create mode 100644 src/components/simulations/NewSimulationButton.js create mode 100644 src/components/simulations/NewSimulationButton.sass create mode 100644 src/components/simulations/NoSimulationsAlert.js create mode 100644 src/components/simulations/NoSimulationsAlert.sass create mode 100644 src/components/simulations/SimulationActionButtons.js create mode 100644 src/components/simulations/SimulationAuth.js create mode 100644 src/components/simulations/SimulationAuthList.js create mode 100644 src/components/simulations/SimulationAuthList.sass (limited to 'src/components/simulations') diff --git a/src/components/simulations/FilterButton.js b/src/components/simulations/FilterButton.js new file mode 100644 index 00000000..2105d281 --- /dev/null +++ b/src/components/simulations/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}) => ( +
{ + if (!active) { + onClick(); + } + }}> + {children} +
+); + +FilterButton.propTypes = { + active: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, + onClick: PropTypes.func.isRequired +}; + +export default FilterButton; diff --git a/src/components/simulations/FilterButton.sass b/src/components/simulations/FilterButton.sass new file mode 100644 index 00000000..60f6faca --- /dev/null +++ b/src/components/simulations/FilterButton.sass @@ -0,0 +1,23 @@ +@import ../../style-globals/_mixins.sass +@import ../../style-globals/_variables.sass + +.simulation-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) + +.simulation-filter-button:last-of-type + border: 0 + +.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 new file mode 100644 index 00000000..b43139c1 --- /dev/null +++ b/src/components/simulations/FilterPanel.js @@ -0,0 +1,15 @@ +import React from 'react'; +import FilterLink from "../../containers/simulations/FilterLink"; +import "./FilterPanel.css"; + +const FilterPanel = () => ( +
+
+ All Simulations + My Simulations + Simulations shared with me +
+
+); + +export default FilterPanel; diff --git a/src/components/simulations/FilterPanel.sass b/src/components/simulations/FilterPanel.sass new file mode 100644 index 00000000..a59ffdfd --- /dev/null +++ b/src/components/simulations/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 + + .simulation-filters + display: block + overflow: hidden + margin: 0 -1px diff --git a/src/components/simulations/NewSimulationButton.js b/src/components/simulations/NewSimulationButton.js new file mode 100644 index 00000000..468f7678 --- /dev/null +++ b/src/components/simulations/NewSimulationButton.js @@ -0,0 +1,16 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import './NewSimulationButton.css'; + +const NewSimulationButton = ({onClick}) => ( +
+ + New Simulation +
+); + +NewSimulationButton.propTypes = { + onClick: PropTypes.func.isRequired, +}; + +export default NewSimulationButton; diff --git a/src/components/simulations/NewSimulationButton.sass b/src/components/simulations/NewSimulationButton.sass new file mode 100644 index 00000000..9bf82c49 --- /dev/null +++ b/src/components/simulations/NewSimulationButton.sass @@ -0,0 +1,31 @@ +@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/NoSimulationsAlert.js b/src/components/simulations/NoSimulationsAlert.js new file mode 100644 index 00000000..d688ae56 --- /dev/null +++ b/src/components/simulations/NoSimulationsAlert.js @@ -0,0 +1,11 @@ +import React from 'react'; +import "./NoSimulationsAlert.css"; + +const NoSimulationsAlert = () => ( +
+ + No simulations here yet... Add some with the 'New Simulation' button! +
+); + +export default NoSimulationsAlert; diff --git a/src/components/simulations/NoSimulationsAlert.sass b/src/components/simulations/NoSimulationsAlert.sass new file mode 100644 index 00000000..10e89e51 --- /dev/null +++ b/src/components/simulations/NoSimulationsAlert.sass @@ -0,0 +1,10 @@ +.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 new file mode 100644 index 00000000..d48b4bcf --- /dev/null +++ b/src/components/simulations/SimulationActionButtons.js @@ -0,0 +1,26 @@ +import PropTypes from "prop-types"; +import React from 'react'; + +const SimulationActionButtons = ({simulationId, onOpen, onViewUsers, onDelete}) => ( +
+
onOpen(simulationId)}> + +
+
onViewUsers(simulationId)}> + +
+
onDelete(simulationId)}> + +
+
+); + +SimulationActionButtons.propTypes = { + simulationId: PropTypes.number.isRequired, + onOpen: PropTypes.func, + onViewUsers: PropTypes.func, + onDelete: PropTypes.func, +}; + +export default SimulationActionButtons; diff --git a/src/components/simulations/SimulationAuth.js b/src/components/simulations/SimulationAuth.js new file mode 100644 index 00000000..9b887991 --- /dev/null +++ b/src/components/simulations/SimulationAuth.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 SimulationAuth = ({simulationAuth}) => ( +
+
{simulationAuth.simulation.name}
+
{parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}
+
+ + {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]} +
+ +
+); + +SimulationAuth.propTypes = { + simulationAuth: Shapes.Authorization.isRequired, +}; + +export default SimulationAuth; diff --git a/src/components/simulations/SimulationAuthList.js b/src/components/simulations/SimulationAuthList.js new file mode 100644 index 00000000..7653f178 --- /dev/null +++ b/src/components/simulations/SimulationAuthList.js @@ -0,0 +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"; + +const SimulationAuthList = ({authorizations}) => { + if (authorizations.length === 0) { + return ; + } + + return ( +
+
+
Simulation name
+
Last edited
+
Access rights
+
+
+ {authorizations.map(authorization => ( + + ))} +
+
+ ); +}; + +SimulationAuthList.propTypes = { + authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired, +}; + +export default SimulationAuthList; diff --git a/src/components/simulations/SimulationAuthList.sass b/src/components/simulations/SimulationAuthList.sass new file mode 100644 index 00000000..4edfb99e --- /dev/null +++ b/src/components/simulations/SimulationAuthList.sass @@ -0,0 +1,104 @@ +@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 .simulation-icons + text-align: right + +.simulation-row .simulation-icons div + display: inline + position: relative + top: 4px + width: 30px + height: 30px + margin-right: 5px + font-size: 12pt + color: white + +border-radius(100%) + +clickable + +transition(background, $transition-length) + + span + position: relative + top: -4px + left: -1px + + &.open + $icon-color: #0c60bf + background: $icon-color + + &:hover + background: lighten($icon-color, 10%) + + &:active + background: darken($icon-color, 10%) + + &.users + font-size: 10pt + $icon-color: #17bf55 + background: $icon-color + + span + left: -2px + + &:hover + background: lighten($icon-color, 10%) + + &:active + background: darken($icon-color, 10%) + + &.delete + $icon-color: #e3474d + background: $icon-color + + &:hover + background: lighten($icon-color, 10%) + + &:active + background: darken($icon-color, 10%) -- cgit v1.2.3