summaryrefslogtreecommitdiffstats
path: root/web/react/components/setting_picture.jsx
diff options
context:
space:
mode:
authorChristopher Speller <crspeller@gmail.com>2015-08-06 10:21:51 -0400
committerChristopher Speller <crspeller@gmail.com>2015-08-06 10:21:51 -0400
commitcc78cc9baced6693d7052a7ff9e9a0e04fbdff5f (patch)
tree9726247620083158765bff7e9377d74129bbe82e /web/react/components/setting_picture.jsx
parent201d165ed9552a39667eb997d381f893f1b12446 (diff)
parent3cd0c3b73b5df0d59e7c12044ddc4948a42b071c (diff)
downloadchat-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.jsx30
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>