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/modals/Modal.js | 11 ++- src/components/modals/TextInputModal.js | 8 +- src/components/navigation/Navbar.js | 2 +- src/components/navigation/Navbar.sass | 9 +- src/components/projects/FilterButton.js | 23 ----- src/components/projects/FilterButton.sass | 23 ----- src/components/projects/FilterPanel.js | 15 --- src/components/projects/FilterPanel.sass | 21 ----- src/components/projects/NewProjectButton.js | 16 ---- src/components/projects/NewProjectButton.sass | 31 ------ src/components/projects/NoProjectsAlert.js | 11 --- src/components/projects/NoProjectsAlert.sass | 10 -- src/components/projects/ProjectActionButtons.js | 26 ------ src/components/projects/ProjectAuth.js | 24 ----- src/components/projects/ProjectAuthList.js | 33 ------- src/components/projects/ProjectAuthList.sass | 104 --------------------- 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 +++++++++++++++++++++ 28 files changed, 359 insertions(+), 345 deletions(-) delete mode 100644 src/components/projects/FilterButton.js delete mode 100644 src/components/projects/FilterButton.sass delete mode 100644 src/components/projects/FilterPanel.js delete mode 100644 src/components/projects/FilterPanel.sass delete mode 100644 src/components/projects/NewProjectButton.js delete mode 100644 src/components/projects/NewProjectButton.sass delete mode 100644 src/components/projects/NoProjectsAlert.js delete mode 100644 src/components/projects/NoProjectsAlert.sass delete mode 100644 src/components/projects/ProjectActionButtons.js delete mode 100644 src/components/projects/ProjectAuth.js delete mode 100644 src/components/projects/ProjectAuthList.js delete mode 100644 src/components/projects/ProjectAuthList.sass 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') diff --git a/src/components/modals/Modal.js b/src/components/modals/Modal.js index c4f10b29..0b3301af 100644 --- a/src/components/modals/Modal.js +++ b/src/components/modals/Modal.js @@ -10,8 +10,10 @@ class Modal extends React.Component { }; static idCounter = 0; - // Local, up-to-date copy of modal visibility for time between close and props update (to prevent duplicate close - // triggers) + /** + * Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate + * close triggers). + */ visible = false; constructor() { @@ -23,6 +25,11 @@ class Modal extends React.Component { this.visible = this.props.show; this.openOrCloseModal(); + // Trigger auto-focus + window["$"]("#" + this.id).on("shown.bs.modal", function () { + window["$"](this).find("input").first().focus(); + }); + window["$"]("#" + this.id).on("hide.bs.modal", () => { if (this.visible) { this.props.onCancel(); diff --git a/src/components/modals/TextInputModal.js b/src/components/modals/TextInputModal.js index 4acf25b3..90a5db12 100644 --- a/src/components/modals/TextInputModal.js +++ b/src/components/modals/TextInputModal.js @@ -27,10 +27,14 @@ class TextInputModal extends React.Component { show={this.props.show} onSubmit={this.onSubmit.bind(this)} onCancel={this.onCancel.bind(this)}> -
+ { + e.preventDefault(); + this.onSubmit(); + }}>
- +
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js index 96dd93b4..ce020fef 100644 --- a/src/components/navigation/Navbar.js +++ b/src/components/navigation/Navbar.js @@ -17,7 +17,7 @@ class Navbar extends Component {
- Projects + Simulations
( -
{ - 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/projects/FilterButton.sass b/src/components/projects/FilterButton.sass deleted file mode 100644 index 0cad68e3..00000000 --- a/src/components/projects/FilterButton.sass +++ /dev/null @@ -1,23 +0,0 @@ -@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 deleted file mode 100644 index 050bf0aa..00000000 --- a/src/components/projects/FilterPanel.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import FilterLink from "../../containers/projects/FilterLink"; -import "./FilterPanel.css"; - -const ProjectFilterPanel = () => ( -
-
- All Projects - My Projects - Projects shared with me -
-
-); - -export default ProjectFilterPanel; diff --git a/src/components/projects/FilterPanel.sass b/src/components/projects/FilterPanel.sass deleted file mode 100644 index a70c7a90..00000000 --- a/src/components/projects/FilterPanel.sass +++ /dev/null @@ -1,21 +0,0 @@ -@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 deleted file mode 100644 index 9eaf6df4..00000000 --- a/src/components/projects/NewProjectButton.js +++ /dev/null @@ -1,16 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import './NewProjectButton.css'; - -const NewProjectButton = ({onClick}) => ( -
- - New Project -
-); - -NewProjectButton.propTypes = { - onClick: PropTypes.func.isRequired, -}; - -export default NewProjectButton; diff --git a/src/components/projects/NewProjectButton.sass b/src/components/projects/NewProjectButton.sass deleted file mode 100644 index 89435902..00000000 --- a/src/components/projects/NewProjectButton.sass +++ /dev/null @@ -1,31 +0,0 @@ -@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 deleted file mode 100644 index 957435c7..00000000 --- a/src/components/projects/NoProjectsAlert.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import "./NoProjectsAlert.css"; - -const NoProjectsAlert = () => ( -
- - No projects here yet... Add some with the 'New Project' button! -
-); - -export default NoProjectsAlert; diff --git a/src/components/projects/NoProjectsAlert.sass b/src/components/projects/NoProjectsAlert.sass deleted file mode 100644 index a526f9ad..00000000 --- a/src/components/projects/NoProjectsAlert.sass +++ /dev/null @@ -1,10 +0,0 @@ -.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/ProjectActionButtons.js b/src/components/projects/ProjectActionButtons.js deleted file mode 100644 index 66eb8bfa..00000000 --- a/src/components/projects/ProjectActionButtons.js +++ /dev/null @@ -1,26 +0,0 @@ -import PropTypes from "prop-types"; -import React from 'react'; - -const ProjectActionButtons = ({projectId, onOpen, onViewUsers, onDelete}) => ( -
-
onOpen(projectId)}> - -
-
onViewUsers(projectId)}> - -
-
onDelete(projectId)}> - -
-
-); - -ProjectActionButtons.propTypes = { - projectId: PropTypes.number.isRequired, - onOpen: PropTypes.func, - onViewUsers: PropTypes.func, - onDelete: PropTypes.func, -}; - -export default ProjectActionButtons; diff --git a/src/components/projects/ProjectAuth.js b/src/components/projects/ProjectAuth.js deleted file mode 100644 index 10cfd252..00000000 --- a/src/components/projects/ProjectAuth.js +++ /dev/null @@ -1,24 +0,0 @@ -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"; - -const ProjectAuth = ({projectAuth}) => ( -
-
{projectAuth.simulation.name}
-
{parseAndFormatDateTime(projectAuth.simulation.datetimeLastEdited)}
-
- - {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]} -
- -
-); - -ProjectAuth.propTypes = { - projectAuth: Shapes.Authorization.isRequired, -}; - -export default ProjectAuth; diff --git a/src/components/projects/ProjectAuthList.js b/src/components/projects/ProjectAuthList.js deleted file mode 100644 index 94e7abad..00000000 --- a/src/components/projects/ProjectAuthList.js +++ /dev/null @@ -1,33 +0,0 @@ -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}) => { - if (authorizations.length === 0) { - return ; - } - - return ( -
-
-
Project name
-
Last edited
-
Access rights
-
-
- {authorizations.map(authorization => ( - - ))} -
-
- ); -}; - -ProjectAuthList.propTypes = { - authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired, -}; - -export default ProjectAuthList; diff --git a/src/components/projects/ProjectAuthList.sass b/src/components/projects/ProjectAuthList.sass deleted file mode 100644 index 5cdfacaa..00000000 --- a/src/components/projects/ProjectAuthList.sass +++ /dev/null @@ -1,104 +0,0 @@ -@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 - -.project-row:not(:first-of-type) - margin-top: -1px - -// Sizing of table columns -.project-row, .project-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 - -.project-row .project-icons - text-align: right - -.project-row .project-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%) 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