diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-01-30 19:38:06 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-01-30 09:38:06 -0500 |
commit | 83ead5cac7bb0d274c84d20d443c125ea0391f37 (patch) | |
tree | a241019c84272e07ffb37d09447f3ea71cf934bd /webapp/components | |
parent | c01d9ad6cf3f8bb2ad4145441816598d8ffa2d9e (diff) | |
download | chat-83ead5cac7bb0d274c84d20d443c125ea0391f37.tar.gz chat-83ead5cac7bb0d274c84d20d443c125ea0391f37.tar.bz2 chat-83ead5cac7bb0d274c84d20d443c125ea0391f37.zip |
PLT-5122 - Switching to circular status icons (#5049)
* PLT-5122 - Switching to circular status icons
* Adding profile pic crop for status indicators
* Updating status indicators in LHS
* Updating else statements
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/profile_picture.jsx | 11 | ||||
-rw-r--r-- | webapp/components/sidebar.jsx | 6 | ||||
-rw-r--r-- | webapp/components/status_icon.jsx | 14 |
3 files changed, 22 insertions, 9 deletions
diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx index 26e9f30d9..7a5f892db 100644 --- a/webapp/components/profile_picture.jsx +++ b/webapp/components/profile_picture.jsx @@ -4,6 +4,7 @@ import ProfilePopover from './profile_popover.jsx'; import * as Utils from 'utils/utils.jsx'; import React from 'react'; +import StatusIcon from './status_icon.jsx'; import {OverlayTrigger} from 'react-bootstrap'; export default class ProfilePicture extends React.Component { @@ -45,10 +46,6 @@ export default class ProfilePicture extends React.Component { } render() { - let statusClass = ''; - if (this.props.status) { - statusClass = 'status-' + this.props.status; - } if (this.props.user) { return ( <OverlayTrigger @@ -66,25 +63,27 @@ export default class ProfilePicture extends React.Component { /> } > - <span className={`status-wrapper ${statusClass}`}> + <span className='status-wrapper'> <img className='more-modal__image' width={this.props.width} height={this.props.width} src={this.props.src} /> + <StatusIcon status={this.props.status}/> </span> </OverlayTrigger> ); } return ( - <span className={`status-wrapper ${statusClass}`}> + <span className='status-wrapper'> <img className='more-modal__image' width={this.props.width} height={this.props.width} src={this.props.src} /> + <StatusIcon status={this.props.status}/> </span> ); } diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 1b802b1b0..9adc463be 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -507,7 +507,11 @@ export default class Sidebar extends React.Component { icon = <div className='status'><i className='fa fa-lock'/></div>; } else { // set up status icon for direct message channels (status is null for other channel types) - icon = <StatusIcon status={channel.status}/>; + icon = ( + <StatusIcon + type='avatar' + status={channel.status} + />); } let closeButton = null; diff --git a/webapp/components/status_icon.jsx b/webapp/components/status_icon.jsx index 18cfce16c..3e71344d9 100644 --- a/webapp/components/status_icon.jsx +++ b/webapp/components/status_icon.jsx @@ -8,13 +8,22 @@ import React from 'react'; export default class StatusIcon extends React.Component { render() { const status = this.props.status; + const type = this.props.type; if (!status) { return null; } let statusIcon = ''; - if (status === 'online') { + if (type === 'avatar') { + if (status === 'online') { + statusIcon = Constants.ONLINE_AVATAR_SVG; + } else if (status === 'away') { + statusIcon = Constants.AWAY_AVATAR_SVG; + } else { + statusIcon = Constants.OFFLINE_AVATAR_SVG; + } + } else if (status === 'online') { statusIcon = Constants.ONLINE_ICON_SVG; } else if (status === 'away') { statusIcon = Constants.AWAY_ICON_SVG; @@ -33,5 +42,6 @@ export default class StatusIcon extends React.Component { } StatusIcon.propTypes = { - status: React.PropTypes.string + status: React.PropTypes.string, + type: React.PropTypes.string }; |