diff options
Diffstat (limited to 'webapp/components/team_sidebar')
-rw-r--r-- | webapp/components/team_sidebar/components/team_button.jsx | 64 | ||||
-rw-r--r-- | webapp/components/team_sidebar/team_sidebar_controller.jsx | 8 |
2 files changed, 53 insertions, 19 deletions
diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx index 0033ae25a..203e1de00 100644 --- a/webapp/components/team_sidebar/components/team_button.jsx +++ b/webapp/components/team_sidebar/components/team_button.jsx @@ -7,6 +7,9 @@ import React from 'react'; import {Link} from 'react-router/es6'; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {isMobile} from 'utils/utils.jsx'; +import {isMobileApp} from 'utils/user_agent.jsx'; + export default class TeamButton extends React.Component { constructor(props) { super(props); @@ -20,6 +23,7 @@ export default class TeamButton extends React.Component { render() { let teamClass = this.props.active ? 'active' : ''; + const btnClass = this.props.btnClass; const disabled = this.props.disabled ? 'team-disabled' : ''; const handleClick = (this.props.active || this.props.disabled) ? this.handleDisabled : null; let badge; @@ -34,6 +38,44 @@ export default class TeamButton extends React.Component { } } + let btn; + let content = this.props.content; + if (!content) { + content = ( + <div className='team-btn__initials'> + {this.props.displayName.substring(0, 2)} + <div className='team-btn__content'> + {this.props.displayName} + </div> + </div> + ); + } + if (!isMobile() && !isMobileApp()) { + btn = ( + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY} + placement={this.props.placement} + overlay={ + <Tooltip id={`tooltip-${this.props.url}`}> + {this.props.displayName} + </Tooltip> + } + > + <div className={'team-btn ' + btnClass}> + {badge} + {content} + </div> + </OverlayTrigger> + ); + } else { + btn = ( + <div className={'team-btn ' + btnClass}> + {badge} + {content} + </div> + ); + } + return ( <div className={`team-container ${teamClass}`} @@ -43,20 +85,7 @@ export default class TeamButton extends React.Component { to={this.props.url} onClick={handleClick} > - <OverlayTrigger - delayShow={Constants.OVERLAY_TIME_DELAY} - placement={this.props.placement} - overlay={ - <Tooltip id={`tooltip-${this.props.url}`}> - {this.props.tip} - </Tooltip> - } - > - <div className='team-btn'> - {badge} - {this.props.contents} - </div> - </OverlayTrigger> + {btn} </Link> </div> ); @@ -64,6 +93,7 @@ export default class TeamButton extends React.Component { } TeamButton.defaultProps = { + btnClass: '', tip: '', placement: 'right', active: false, @@ -73,9 +103,11 @@ TeamButton.defaultProps = { }; TeamButton.propTypes = { + btnClass: React.PropTypes.string, url: React.PropTypes.string.isRequired, - contents: React.PropTypes.node.isRequired, - tip: React.PropTypes.node, + displayName: React.PropTypes.string, + content: React.PropTypes.node, + tip: React.PropTypes.node.isRequired, active: React.PropTypes.bool, disabled: React.PropTypes.bool, unread: React.PropTypes.bool, diff --git a/webapp/components/team_sidebar/team_sidebar_controller.jsx b/webapp/components/team_sidebar/team_sidebar_controller.jsx index f005afeb3..24cd48d39 100644 --- a/webapp/components/team_sidebar/team_sidebar_controller.jsx +++ b/webapp/components/team_sidebar/team_sidebar_controller.jsx @@ -121,7 +121,7 @@ export default class TeamSidebar extends React.Component { url={`/${team.name}`} tip={team.display_name} active={team.id === this.state.currentTeamId} - contents={team.display_name.substring(0, 1).toUpperCase()} + displayName={team.display_name} unread={team.unread} mentions={team.mentions} /> @@ -131,6 +131,7 @@ export default class TeamSidebar extends React.Component { if (moreTeams) { teams.push( <TeamButton + btnClass='team-btn__add' key='more_teams' url='/select_team' tip={ @@ -139,12 +140,13 @@ export default class TeamSidebar extends React.Component { defaultMessage='Other teams you can join.' /> } - contents={<i className='fa fa-plus'/>} + content={<i className='fa fa-plus'/>} /> ); } else if (global.window.mm_config.EnableTeamCreation === 'true' || isSystemAdmin) { teams.push( <TeamButton + btnClass='team-btn__add' key='more_teams' url='/create_team' tip={ @@ -153,7 +155,7 @@ export default class TeamSidebar extends React.Component { defaultMessage='Create a New Team' /> } - contents={<i className='fa fa-plus'/>} + content={<i className='fa fa-plus'/>} /> ); } |