diff options
author | Christopher Speller <crspeller@gmail.com> | 2015-08-06 10:21:51 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2015-08-06 10:21:51 -0400 |
commit | cc78cc9baced6693d7052a7ff9e9a0e04fbdff5f (patch) | |
tree | 9726247620083158765bff7e9377d74129bbe82e /web/react/components/setting_picture.jsx | |
parent | 201d165ed9552a39667eb997d381f893f1b12446 (diff) | |
parent | 3cd0c3b73b5df0d59e7c12044ddc4948a42b071c (diff) | |
download | chat-cc78cc9baced6693d7052a7ff9e9a0e04fbdff5f.tar.gz chat-cc78cc9baced6693d7052a7ff9e9a0e04fbdff5f.tar.bz2 chat-cc78cc9baced6693d7052a7ff9e9a0e04fbdff5f.zip |
Merge pull request #324 from rgarmsen2295/mm-1617
MM-1617 Now shows a loading gif while a profile pic is being uploaded
Diffstat (limited to 'web/react/components/setting_picture.jsx')
-rw-r--r-- | web/react/components/setting_picture.jsx | 30 |
1 files changed, 24 insertions, 6 deletions
diff --git a/web/react/components/setting_picture.jsx b/web/react/components/setting_picture.jsx index fa4c8bb62..e97b67706 100644 --- a/web/react/components/setting_picture.jsx +++ b/web/react/components/setting_picture.jsx @@ -20,8 +20,14 @@ module.exports = React.createClass({ } }, render: function() { - var client_error = this.props.client_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.client_error }</label></div> : null; - var server_error = this.props.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.server_error }</label></div> : null; + var clientError = null; + if (this.props.client_error) { + clientError = <div className='form-group has-error'><label className='control-label'>{this.props.client_error}</label></div>; + } + var serverError = null; + if (this.props.server_error) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.props.server_error}</label></div>; + } var img = null; if (this.props.picture) { @@ -30,8 +36,20 @@ module.exports = React.createClass({ img = (<img ref='image' className='profile-img' src={this.props.src}/>); } - var self = this; + var confirmButton; + if (this.props.loadingPicture) { + confirmButton = <img className='spinner' src='/static/images/load.gif'/>; + } else { + var confirmButtonClass = 'btn btn-sm'; + if (this.props.submitActive) { + confirmButtonClass += ' btn-primary'; + } else { + confirmButtonClass += ' btn-inactive disabled'; + } + confirmButton = <a className={confirmButtonClass} onClick={this.props.submit}>Save</a>; + } + var self = this; return ( <ul className='section-max'> <li className='col-xs-12 section-title'>{this.props.title}</li> @@ -41,10 +59,10 @@ module.exports = React.createClass({ {img} </li> <li className='setting-list-item'> - {server_error} - {client_error} + {serverError} + {clientError} <span className='btn btn-sm btn-primary btn-file sel-btn'>Select<input ref='input' accept='.jpg,.png,.bmp' type='file' onChange={this.props.pictureChange}/></span> - <a className={this.props.submitActive ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-inactive disabled'} onClick={this.props.submit}>Save</a> + {confirmButton} <a className='btn btn-sm theme' href='#' onClick={self.props.updateSection}>Cancel</a> </li> </ul> |