diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/app/sidebars/project')
4 files changed, 72 insertions, 49 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js index d002b473..ae965939 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js @@ -4,6 +4,8 @@ import { Portfolio } from '../../../../shapes' import Link from 'next/link' import FontAwesome from 'react-fontawesome' import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer' +import { Button, Col, Row } from 'reactstrap' +import classNames from 'classnames' function PortfolioListComponent({ portfolios, @@ -17,35 +19,39 @@ function PortfolioListComponent({ <div className="pb-3"> <h2> Portfolios - <button className="btn btn-outline-primary float-right" onClick={(e) => onNewPortfolio(e)}> + <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}> <FontAwesome name="plus" /> - </button> + </Button> </h2> {portfolios.map((portfolio, idx) => ( <div key={portfolio._id}> - <div className="row mb-1"> - <div - className={ - 'col-7 align-self-center ' + - (portfolio._id === currentPortfolioId ? 'font-weight-bold' : '') - } + <Row className="row mb-1"> + <Col + xs="7" + className={classNames('align-self-center', { + 'font-weight-bold': portfolio._id === currentPortfolioId, + })} > {portfolio.name} - </div> - <div className="col-5 text-right"> + </Col> + <Col xs="5" className="text-right"> <Link href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}> - <a - className="btn btn-outline-primary mr-1 fa fa-play" + <Button + color="primary" + outline + className="mr-1 fa fa-play" onClick={() => onChoosePortfolio(portfolio._id)} /> </Link> - <span - className="btn btn-outline-danger fa fa-trash" + <Button + color="danger" + outline + className="fa fa-trash" onClick={() => onDeletePortfolio(portfolio._id)} /> - </div> - </div> + </Col> + </Row> <ScenarioListContainer portfolioId={portfolio._id} /> </div> ))} diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js index 4789315e..7dd13663 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js @@ -2,13 +2,14 @@ import React from 'react' import Sidebar from '../Sidebar' import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer' import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer' +import { Container } from 'reactstrap' const ProjectSidebarComponent = ({ collapsible }) => ( <Sidebar isRight={false} collapsible={collapsible}> - <div className="h-100 overflow-auto container-fluid"> + <Container fluid className="h-100 overflow-auto"> <TopologyListContainer /> <PortfolioListContainer /> - </div> + </Container> </Sidebar> ) diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js index 26543d12..168b8e02 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js @@ -3,6 +3,8 @@ import React from 'react' import { Scenario } from '../../../../shapes' import Link from 'next/link' import FontAwesome from 'react-fontawesome' +import { Button, Col, Row } from 'reactstrap' +import classNames from 'classnames' function ScenarioListComponent({ scenarios, @@ -16,36 +18,42 @@ function ScenarioListComponent({ return ( <> {scenarios.map((scenario, idx) => ( - <div key={scenario._id} className="row mb-1"> - <div - className={ - 'col-7 pl-5 align-self-center ' + - (scenario._id === currentScenarioId ? 'font-weight-bold' : '') - } + <Row key={scenario._id} className="mb-1"> + <Col + xs="7" + className={classNames('pl-5 align-self-center', { + 'font-weight-bold': scenario._id === currentScenarioId, + })} > {scenario.name} - </div> - <div className="col-5 text-right"> + </Col> + <Col xs="5" className="text-right"> <Link href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`} > - <a - className="btn btn-outline-primary mr-1 fa fa-play disabled" + <Button + color="primary" + outline + disabled + className="mr-1 fa fa-play" onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)} /> </Link> - <span - className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')} + <Button + color="danger" + outline + className="fa fa-trash" + disabled={idx === 0} onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)} /> - </div> - </div> + </Col> + </Row> ))} <div className="pl-4 mb-2"> - <div className="btn btn-outline-primary" onClick={() => onNewScenario(this.props.portfolioId)}> + <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}> <FontAwesome name="plus" className="mr-1" /> New scenario - </div> + </Button> </div> </> ) diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js index a7d78c4a..d5627abc 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js @@ -2,37 +2,45 @@ import PropTypes from 'prop-types' import React from 'react' import { Topology } from '../../../../shapes' import FontAwesome from 'react-fontawesome' +import { Button, Col, Row } from 'reactstrap' +import classNames from 'classnames' function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) { return ( <div className="pb-3"> <h2> Topologies - <button className="btn btn-outline-primary float-right" onClick={onNewTopology}> + <Button color="primary" outline className="float-right" onClick={onNewTopology}> <FontAwesome name="plus" /> - </button> + </Button> </h2> {topologies.map((topology, idx) => ( - <div key={topology._id} className="row mb-1"> - <div - className={ - 'col-7 align-self-center ' + (topology._id === currentTopologyId ? 'font-weight-bold' : '') - } + <Row key={topology._id} className="mb-1"> + <Col + xs="7" + className={classNames('align-self-center', { + 'font-weight-bold': topology._id === currentTopologyId, + })} > {topology.name} - </div> - <div className="col-5 text-right"> - <span - className="btn btn-outline-primary mr-1 fa fa-play" + </Col> + <Col xs="5" className="text-right"> + <Button + color="primary" + outline + className="mr-1 fa fa-play" onClick={() => onChooseTopology(topology._id)} /> - <span - className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')} + <Button + color="danger" + outline + className="fa fa-trash" + disable={idx === 0} onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)} /> - </div> - </div> + </Col> + </Row> ))} </div> ) |