From d628e0ac5162bb1baeb16fcf21b688d37bbff758 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Fri, 22 Sep 2017 13:39:50 +0200 Subject: Implement dynamic web page document title change --- package.json | 1 + .../simulations/SimulationActionButtons.js | 2 +- src/components/timeline/Timeline.sass | 2 + src/pages/App.js | 66 +++++++++++++--------- src/pages/Experiments.js | 35 +++++++++--- src/pages/Home.js | 16 ++++-- src/pages/NotFound.js | 9 ++- src/pages/Profile.js | 26 +++++---- src/pages/Simulations.js | 19 ++++--- 9 files changed, 114 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index 69adc0de..7844f1de 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "npm-run-all": "^4.0.2", "prop-types": "^15.5.10", "react": "^15.6.1", + "react-document-title": "^2.0.3", "react-dom": "^15.6.1", "react-fontawesome": "^1.6.1", "react-google-login": "^2.9.3", diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js index 9598513a..743b1f3c 100644 --- a/src/components/simulations/SimulationActionButtons.js +++ b/src/components/simulations/SimulationActionButtons.js @@ -13,7 +13,7 @@ const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
onViewUsers(simulationId)} > diff --git a/src/components/timeline/Timeline.sass b/src/components/timeline/Timeline.sass index ca1cc524..bfb1a4d7 100644 --- a/src/components/timeline/Timeline.sass +++ b/src/components/timeline/Timeline.sass @@ -45,6 +45,8 @@ $timeline-border: $border-width solid $gray-semi-dark border: $timeline-border overflow: hidden + pointer-events: all + +border-radius($standard-border-radius) .play-btn diff --git a/src/pages/App.js b/src/pages/App.js index 8e74bfa5..8f46156b 100644 --- a/src/pages/App.js +++ b/src/pages/App.js @@ -1,5 +1,6 @@ import PropTypes from "prop-types"; import React from "react"; +import DocumentTitle from "react-document-title"; import {connect} from "react-redux"; import {ShortcutManager} from "react-shortcuts"; import {openExperimentSucceeded} from "../actions/experiments"; @@ -27,6 +28,7 @@ class AppComponent extends React.Component { simulationId: PropTypes.number.isRequired, inSimulation: PropTypes.bool, experimentId: PropTypes.number, + simulationName: PropTypes.string, }; static childContextTypes = { shortcuts: PropTypes.object.isRequired @@ -49,40 +51,50 @@ class AppComponent extends React.Component { render() { return ( -
- - {this.props.datacenterIsLoading ? -
- -
: -
- - - - - {this.props.inSimulation ? - : - undefined - } - {this.props.inSimulation ? - : - undefined - } -
- } - - - - - -
+ +
+ + {this.props.datacenterIsLoading ? +
+ +
: +
+ + + + + {this.props.inSimulation ? + : + undefined + } + {this.props.inSimulation ? + : + undefined + } +
+ } + + + + + +
+ ); } } const mapStateToProps = state => { + let simulationName = undefined; + if (state.currentSimulationId !== -1 && state.objects.simulation[state.currentSimulationId]) { + simulationName = state.objects.simulation[state.currentSimulationId].name; + } + return { datacenterIsLoading: state.currentDatacenterId === -1, + simulationName, }; }; diff --git a/src/pages/Experiments.js b/src/pages/Experiments.js index 71b9cfc9..5985de45 100644 --- a/src/pages/Experiments.js +++ b/src/pages/Experiments.js @@ -1,5 +1,6 @@ import PropTypes from "prop-types"; import React from "react"; +import DocumentTitle from "react-document-title"; import {connect} from "react-redux"; import {fetchExperimentsOfSimulation} from "../actions/experiments"; import {openSimulationSucceeded} from "../actions/simulations"; @@ -11,6 +12,7 @@ import NewExperimentModal from "../containers/modals/NewExperimentModal"; class ExperimentsComponent extends React.Component { static propTypes = { simulationId: PropTypes.number.isRequired, + simulationName: PropTypes.string, }; componentDidMount() { @@ -20,18 +22,35 @@ class ExperimentsComponent extends React.Component { render() { return ( -
- -
- - + +
+ +
+ + +
+
- -
+ ); } } +const mapStateToProps = state => { + let simulationName = undefined; + if (state.currentSimulationId !== -1 && state.objects.simulation[state.currentSimulationId]) { + simulationName = state.objects.simulation[state.currentSimulationId].name; + } + + return { + simulationName, + }; +}; + const mapDispatchToProps = dispatch => { return { storeSimulationId: id => dispatch(openSimulationSucceeded(id)), @@ -40,7 +59,7 @@ const mapDispatchToProps = dispatch => { }; const Experiments = connect( - undefined, + mapStateToProps, mapDispatchToProps )(ExperimentsComponent); diff --git a/src/pages/Home.js b/src/pages/Home.js index b0936502..1486f422 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -12,6 +12,10 @@ import jQuery from "../util/jquery"; import "./Home.css"; class Home extends React.Component { + state = { + scrollSpySetup: false, + }; + componentDidMount() { const scrollOffset = 60; jQuery("#navbar").find("li a").click(function (e) { @@ -22,10 +26,14 @@ class Home extends React.Component { jQuery(jQuery(this).attr('href'))[0].scrollIntoView(); window.scrollBy(0, -scrollOffset); }); - jQuery("body").scrollspy({ - target: "#navbar", - offset: scrollOffset - }); + + if (!this.state.scrollSpySetup) { + jQuery("body").scrollspy({ + target: "#navbar", + offset: scrollOffset + }); + this.setState({scrollSpySetup: true}); + } } render() { diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js index 51141c3e..4120e285 100644 --- a/src/pages/NotFound.js +++ b/src/pages/NotFound.js @@ -1,11 +1,14 @@ import React from 'react'; +import DocumentTitle from "react-document-title"; import TerminalWindow from "../components/not-found/TerminalWindow"; import './NotFound.css'; const NotFound = () => ( -
- -
+ +
+ +
+ ); export default NotFound; diff --git a/src/pages/Profile.js b/src/pages/Profile.js index c8805c6f..6d09dc89 100644 --- a/src/pages/Profile.js +++ b/src/pages/Profile.js @@ -1,22 +1,26 @@ import React from 'react'; +import DocumentTitle from "react-document-title"; import {connect} from "react-redux"; import {openDeleteProfileModal} from "../actions/modals/profile"; import AppNavbar from "../components/navigation/AppNavbar"; import DeleteProfileModal from "../containers/modals/DeleteProfileModal"; const ProfileContainer = ({onDelete}) => ( -
- -
- -

- This does not delete your Google account, it simply disconnects it from the OpenDC app and deletes any - simulation info that is associated with you (simulations you own, and any authorizations you may - have on other projects). -

+ +
+ +
+ +

+ This does not delete your Google account, it simply disconnects it from the OpenDC app and deletes + any + simulation info that is associated with you (simulations you own, and any authorizations you may + have on other projects). +

+
+
- -
+ ); const mapDispatchToProps = dispatch => { diff --git a/src/pages/Simulations.js b/src/pages/Simulations.js index d06fe43d..5ca48435 100644 --- a/src/pages/Simulations.js +++ b/src/pages/Simulations.js @@ -1,4 +1,5 @@ import React from 'react'; +import DocumentTitle from "react-document-title"; import {connect} from "react-redux"; import {openNewSimulationModal} from "../actions/modals/simulations"; import {fetchAuthorizationsOfCurrentUser} from "../actions/users"; @@ -15,15 +16,17 @@ class SimulationsContainer extends React.Component { render() { return ( -
- -
- - - + +
+ +
+ + + +
+
- -
+ ); } } -- cgit v1.2.3