diff options
| -rw-r--r-- | webapp/components/channel_invite_button.jsx | 22 | ||||
| -rw-r--r-- | webapp/components/more_direct_channels.jsx | 18 | ||||
| -rw-r--r-- | webapp/components/spinner_button.jsx | 48 | ||||
| -rw-r--r-- | webapp/sass/components/_spinner-button.scss | 8 |
4 files changed, 65 insertions, 31 deletions
diff --git a/webapp/components/channel_invite_button.jsx b/webapp/components/channel_invite_button.jsx index b5a690845..e4af9f9ce 100644 --- a/webapp/components/channel_invite_button.jsx +++ b/webapp/components/channel_invite_button.jsx @@ -7,8 +7,7 @@ import * as AsyncClient from 'utils/async_client.jsx'; import * as Client from 'utils/client.jsx'; import {FormattedMessage} from 'react-intl'; - -import loadingGif from 'images/load.gif'; +import SpinnerButton from 'components/spinner_button.jsx'; export default class ChannelInviteButton extends React.Component { static get propTypes() { @@ -29,9 +28,7 @@ export default class ChannelInviteButton extends React.Component { }; } - handleClick(e) { - e.preventDefault(); - + handleClick() { if (this.state.addingUser) { return; } @@ -66,26 +63,17 @@ export default class ChannelInviteButton extends React.Component { } render() { - if (this.state.addingUser) { - return ( - <img - className='channel-loading-gif' - src={loadingGif} - /> - ); - } - return ( - <a + <SpinnerButton onClick={this.handleClick} - className='btn btn-sm btn-primary' + spinning={this.state.addingUser} > <i className='glyphicon glyphicon-envelope'/> <FormattedMessage id='channel_invite.add' defaultMessage=' Add' /> - </a> + </SpinnerButton> ); } } diff --git a/webapp/components/more_direct_channels.jsx b/webapp/components/more_direct_channels.jsx index 57cac7229..d1446059d 100644 --- a/webapp/components/more_direct_channels.jsx +++ b/webapp/components/more_direct_channels.jsx @@ -5,9 +5,9 @@ import {Modal} from 'react-bootstrap'; import FilteredUserList from './filtered_user_list.jsx'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; -import loadingGif from 'images/load.gif'; import {FormattedMessage} from 'react-intl'; +import SpinnerButton from 'components/spinner_button.jsx'; import React from 'react'; @@ -83,26 +83,16 @@ export default class MoreDirectChannels extends React.Component { } createJoinDirectChannelButton({user}) { - if (this.state.loadingDMChannel === user.id) { - return ( - <img - className='channel-loading-gif' - src={loadingGif} - /> - ); - } - return ( - <button - type='button' - className='btn btn-primary btn-message' + <SpinnerButton + spinning={this.state.loadingDMChannel === user.id} onClick={this.handleShowDirectChannel.bind(this, user)} > <FormattedMessage id='more_direct_channels.message' defaultMessage='Message' /> - </button> + </SpinnerButton> ); } diff --git a/webapp/components/spinner_button.jsx b/webapp/components/spinner_button.jsx new file mode 100644 index 000000000..fcc9af8cd --- /dev/null +++ b/webapp/components/spinner_button.jsx @@ -0,0 +1,48 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import loadingGif from 'images/load.gif'; + +export default class SpinnerButton extends React.Component { + static get propTypes() { + return { + children: React.PropTypes.node, + spinning: React.PropTypes.bool.isRequired, + onClick: React.PropTypes.func + }; + } + + constructor(props) { + super(props); + + this.handleClick = this.handleClick.bind(this); + } + + handleClick(e) { + if (this.props.onClick) { + this.props.onClick(e); + } + } + + render() { + if (this.props.spinning) { + return ( + <img + className='spinner-button__gif' + src={loadingGif} + /> + ); + } + + return ( + <button + onClick={this.handleClick} + className='btn btn-sm btn-primary' + > + {this.props.children} + </button> + ); + } +} diff --git a/webapp/sass/components/_spinner-button.scss b/webapp/sass/components/_spinner-button.scss new file mode 100644 index 000000000..e683ad4f4 --- /dev/null +++ b/webapp/sass/components/_spinner-button.scss @@ -0,0 +1,8 @@ +@charset 'UTF-8'; + +.spinner-button__gif { + height: 15px; + margin-top: 2px; + width: 15px; +} + |