diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-09-30 07:26:52 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-09-30 07:26:52 -0400 |
commit | 13bd14d626f7bb2a347d3acdf456f945f1a6258e (patch) | |
tree | 6e65fbf051cd6dbe08f4290d80d6e4244e6abc59 /webapp | |
parent | d42eb461330d4d2d23c25f6ea747725f08726230 (diff) | |
download | chat-13bd14d626f7bb2a347d3acdf456f945f1a6258e.tar.gz chat-13bd14d626f7bb2a347d3acdf456f945f1a6258e.tar.bz2 chat-13bd14d626f7bb2a347d3acdf456f945f1a6258e.zip |
Added spinner icon to select_team listing after clicking on a team to load (#4120)
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/select_team/components/select_team_item.jsx | 50 | ||||
-rw-r--r-- | webapp/components/select_team/components/select_team_listing.jsx | 0 | ||||
-rw-r--r-- | webapp/components/select_team/select_team.jsx | 68 | ||||
-rw-r--r-- | webapp/sass/routes/_signup.scss | 3 | ||||
-rw-r--r-- | webapp/stores/team_store.jsx | 2 |
5 files changed, 82 insertions, 41 deletions
diff --git a/webapp/components/select_team/components/select_team_item.jsx b/webapp/components/select_team/components/select_team_item.jsx new file mode 100644 index 000000000..b29c4b1c4 --- /dev/null +++ b/webapp/components/select_team/components/select_team_item.jsx @@ -0,0 +1,50 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import {Link} from 'react-router/es6'; + +export default class SelectTeamItem extends React.Component { + static propTypes = { + team: React.PropTypes.object.isRequired, + url: React.PropTypes.string.isRequired, + onTeamClick: React.PropTypes.func.isRequired, + loading: React.PropTypes.bool.isRequired + }; + + constructor(props) { + super(props); + + this.handleTeamClick = this.handleTeamClick.bind(this); + } + + handleTeamClick() { + this.props.onTeamClick(this.props.team); + } + + render() { + let icon; + if (this.props.loading) { + icon = ( + <span className='fa fa-refresh fa-spin right signup-team__icon'/> + ); + } else { + icon = ( + <span className='fa fa-angle-right right signup-team__icon'/> + ); + } + + return ( + <div className='signup-team-dir'> + <Link + to={this.props.url} + onClick={this.handleTeamClick} + > + <span className='signup-team-dir__name'>{this.props.team.display_name}</span> + {icon} + </Link> + </div> + ); + } +} diff --git a/webapp/components/select_team/components/select_team_listing.jsx b/webapp/components/select_team/components/select_team_listing.jsx new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/webapp/components/select_team/components/select_team_listing.jsx diff --git a/webapp/components/select_team/select_team.jsx b/webapp/components/select_team/select_team.jsx index 084ff64b2..e6156ecb9 100644 --- a/webapp/components/select_team/select_team.jsx +++ b/webapp/components/select_team/select_team.jsx @@ -9,6 +9,7 @@ import ErrorBar from 'components/error_bar.jsx'; import LoadingScreen from 'components/loading_screen.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; +import SelectTeamItem from './components/select_team_item.jsx'; import {Link} from 'react-router/es6'; @@ -22,8 +23,10 @@ export default class SelectTeam extends React.Component { constructor(props) { super(props); this.onTeamChange = this.onTeamChange.bind(this); + this.handleTeamClick = this.handleTeamClick.bind(this); const state = this.getStateFromStores(false); + state.loadingTeamId = ''; this.state = state; } @@ -49,6 +52,10 @@ export default class SelectTeam extends React.Component { }; } + handleTeamClick(team) { + this.setState({loadingTeamId: team.id}); + } + render() { let content = null; let teamContents = []; @@ -56,51 +63,36 @@ export default class SelectTeam extends React.Component { const isSystemAdmin = Utils.isSystemAdmin(UserStore.getCurrentUser().roles); let teamMembersCount = 0; - for (var index in this.state.teamMembers) { - if (this.state.teamMembers.hasOwnProperty(index)) { - var teamMember = this.state.teamMembers[index]; - var team = this.state.teams[teamMember.team_id]; - isAlreadyMember[teamMember.team_id] = true; - teamMembersCount++; - teamContents.push( - <div - key={'team_' + team.name} - className='signup-team-dir' - > - <Link - to={'/' + team.name + '/channels/town-square'} - > - <span className='signup-team-dir__name'>{team.display_name}</span> - <span - className='fa fa-angle-right right signup-team__icon' - aria-hidden='true' - /> - </Link> - </div> - ); - } + for (const teamMember of this.state.teamMembers) { + const teamId = teamMember.team_id; + const team = this.state.teams[teamId]; + isAlreadyMember[teamId] = true; + teamMembersCount++; + + teamContents.push( + <SelectTeamItem + key={'team_' + team.name} + team={team} + url={'/' + team.name + '/channels/town-square'} + onTeamClick={this.handleTeamClick} + loading={this.state.loadingTeamId === teamId} + /> + ); } var openTeamContents = []; - for (var id in this.state.teamListings) { + for (const id in this.state.teamListings) { if (this.state.teamListings.hasOwnProperty(id) && !isAlreadyMember[id]) { - var openTeam = this.state.teamListings[id]; + const openTeam = this.state.teamListings[id]; openTeamContents.push( - <div + <SelectTeamItem key={'team_' + openTeam.name} - className='signup-team-dir' - > - <Link - to={`/signup_user_complete/?id=${openTeam.invite_id}`} - > - <span className='signup-team-dir__name'>{openTeam.display_name}</span> - <span - className='fa fa-angle-right right signup-team__icon' - aria-hidden='true' - /> - </Link> - </div> + team={openTeam} + url={`/signup_user_complete/?id=${openTeam.invite_id}`} + onTeamClick={this.handleTeamClick} + loading={this.state.loadingTeamId === openTeam.id} + /> ); } } diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index 48ccdb3b1..d9aa171a9 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -493,9 +493,8 @@ top: .66em; &.fa-spin { - color: $gray; font-size: .9em; - right: 10px; + right: -2px; top: 16px; } } diff --git a/webapp/stores/team_store.jsx b/webapp/stores/team_store.jsx index 70cf061f8..c71cc685b 100644 --- a/webapp/stores/team_store.jsx +++ b/webapp/stores/team_store.jsx @@ -139,7 +139,7 @@ class TeamStoreClass extends EventEmitter { for (var index in this.team_members) { if (this.team_members.hasOwnProperty(index)) { if (this.team_members[index].team_id === teamId) { - Reflect.deleteProperty(this.team_members, index); + this.team_members.splice(index, 1); } } } |