diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/about_build_modal.jsx | 84 | ||||
-rw-r--r-- | web/react/components/navbar_dropdown.jsx | 17 |
2 files changed, 58 insertions, 43 deletions
diff --git a/web/react/components/about_build_modal.jsx b/web/react/components/about_build_modal.jsx index 87a58ba97..d582f6bc8 100644 --- a/web/react/components/about_build_modal.jsx +++ b/web/react/components/about_build_modal.jsx @@ -1,60 +1,62 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +var Modal = ReactBootstrap.Modal; + export default class AboutBuildModal extends React.Component { + constructor(props) { + super(props); + this.doHide = this.doHide.bind(this); + } + + doHide() { + this.props.onModalDismissed(); + } + render() { const config = global.window.config; return ( - <div - className='modal fade' - ref='modal' - id='about_build' - tabIndex='-1' - role='dialog' - aria-hidden='true' + <Modal + show={this.props.show} + onHide={this.doHide} > - <div className='modal-dialog'> - <div className='modal-content'> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' - aria-label='Close' - > - <span aria-hidden='true'>×</span> - </button> - <h4 - className='modal-title' - > - <span className='name'>{`Mattermost ${config.Version}`}</span> - </h4> - </div> - <div className='modal-body'> - <div className='row form-group'> + <Modal.Header closeButton={true}> + <Modal.Title>{`Mattermost ${config.Version}`}</Modal.Title> + </Modal.Header> + <Modal.Body> + <div className='row form-group'> <div className='col-sm-3 info__label'>{'Build Number:'}</div> <div className='col-sm-9'>{config.BuildNumber}</div> - </div> - <div className='row form-group'> + </div> + <div className='row form-group'> <div className='col-sm-3 info__label'>{'Build Date:'}</div> <div className='col-sm-9'>{config.BuildDate}</div> - </div> - <div className='row'> + </div> + <div className='row'> <div className='col-sm-3 info__label'>{'Build Hash:'}</div> <div className='col-sm-9'>{config.BuildHash}</div> - </div> - </div> - <div className='modal-footer'> - <button - type='button' - className='btn btn-default' - data-dismiss='modal' - >{'Close'}</button> </div> - </div> - </div> - </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.doHide} + > + {'Close'} + </button> + </Modal.Footer> + </Modal> ); } } + +AboutBuildModal.defaultProps = { + show: false +}; + +AboutBuildModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onModalDismissed: React.PropTypes.func.isRequired +};
\ No newline at end of file diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index 1adb0d8c6..b90ce4170 100644 --- a/web/react/components/navbar_dropdown.jsx +++ b/web/react/components/navbar_dropdown.jsx @@ -6,6 +6,8 @@ var client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); +var AboutBuildModal = require('./about_build_modal.jsx'); + var Constants = require('../utils/constants.jsx'); function getStateFromStores() { @@ -18,7 +20,9 @@ export default class NavbarDropdown extends React.Component { this.blockToggle = false; this.handleLogoutClick = this.handleLogoutClick.bind(this); + this.handleAboutModal = this.handleAboutModal.bind(this); this.onListenerChange = this.onListenerChange.bind(this); + this.aboutModalDismissed = this.aboutModalDismissed.bind(this); this.state = getStateFromStores(); } @@ -26,6 +30,12 @@ export default class NavbarDropdown extends React.Component { e.preventDefault(); client.logout(); } + handleAboutModal() { + this.setState({showAboutModal: true}); + } + aboutModalDismissed() { + this.setState({showAboutModal: false}); + } componentDidMount() { UserStore.addTeamsChangeListener(this.onListenerChange); TeamStore.addChangeListener(this.onListenerChange); @@ -226,12 +236,15 @@ export default class NavbarDropdown extends React.Component { <li> <a href='#' - data-toggle='modal' - data-target='#about_build' + onClick={this.handleAboutModal} > {'About Mattermost'} </a> </li> + <AboutBuildModal + show={this.state.showAboutModal} + onModalDismissed={this.aboutModalDismissed} + /> </ul> </li> </ul> |