summaryrefslogtreecommitdiffstats
path: root/web/react/components
diff options
context:
space:
mode:
authorReed Garmsen <rgarmsen2295@gmail.com>2015-07-31 14:06:00 -0700
committerReed Garmsen <rgarmsen2295@gmail.com>2015-08-04 08:54:47 -0700
commit344ab9813907e1b3f7d9dceee84978f832813bef (patch)
tree6ca35d116237532b2797efcc9184ac524c47319e /web/react/components
parentcef628c1d1f6409e1453bba3b92c6cb3d15baf3f (diff)
downloadchat-344ab9813907e1b3f7d9dceee84978f832813bef.tar.gz
chat-344ab9813907e1b3f7d9dceee84978f832813bef.tar.bz2
chat-344ab9813907e1b3f7d9dceee84978f832813bef.zip
Added spinner animation to replace save button when uploading a new profile picture
Diffstat (limited to 'web/react/components')
-rw-r--r--web/react/components/setting_picture.jsx4
-rw-r--r--web/react/components/user_settings.jsx9
2 files changed, 9 insertions, 4 deletions
diff --git a/web/react/components/setting_picture.jsx b/web/react/components/setting_picture.jsx
index fa4c8bb62..136421fa7 100644
--- a/web/react/components/setting_picture.jsx
+++ b/web/react/components/setting_picture.jsx
@@ -44,7 +44,11 @@ module.exports = React.createClass({
{server_error}
{client_error}
<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>
+ {!this.props.loadingPicture ?
<a className={this.props.submitActive ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-inactive disabled'} onClick={this.props.submit}>Save</a>
+ :
+ <img className="spinner" src="/static/images/load.gif"/>
+ }
<a className='btn btn-sm theme' href='#' onClick={self.props.updateSection}>Cancel</a>
</li>
</ul>
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index c574d2365..136f81ad3 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -748,6 +748,7 @@ var GeneralTab = React.createClass({
var formData = new FormData();
formData.append('image', picture, picture.name);
+ this.setState({loadingPicture: true});
client.uploadProfileImage(formData,
function() {
@@ -779,11 +780,10 @@ var GeneralTab = React.createClass({
},
updatePicture: function(e) {
if (e.target.files && e.target.files[0]) {
- this.setState({ picture: e.target.files[0] });
+ this.setState({picture: e.target.files[0]});
this.submitActive = true;
this.setState({client_error: null});
-
} else {
this.setState({picture: null});
}
@@ -810,8 +810,8 @@ var GeneralTab = React.createClass({
getInitialState: function() {
var user = this.props.user;
- return { username: user.username, first_name: user.first_name, last_name: user.last_name, nickname: user.nickname,
- email: user.email, picture: null };
+ return {username: user.username, first_name: user.first_name, last_name: user.last_name, nickname: user.nickname,
+ email: user.email, picture: null, loadingPicture: false};
},
render: function() {
var user = this.props.user;
@@ -1002,6 +1002,7 @@ var GeneralTab = React.createClass({
picture={this.state.picture}
pictureChange={this.updatePicture}
submitActive={this.submitActive}
+ loadingPicture={this.state.loadingPicture}
/>
);
} else {