diff options
Diffstat (limited to 'webapp/components/sidebar.jsx')
-rw-r--r-- | webapp/components/sidebar.jsx | 43 |
1 files changed, 31 insertions, 12 deletions
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 8c959c397..16c96f1b6 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -520,7 +520,7 @@ export default class Sidebar extends React.Component { linkClass = 'active'; } - let rowClass = 'sidebar-channel'; + let rowClass = 'sidebar-item'; var unread = false; if (channelMember) { @@ -542,7 +542,7 @@ export default class Sidebar extends React.Component { var badge = null; if (channelMember) { if (unreadCount.mentions) { - badge = <span className='badge pull-right small'>{unreadCount.mentions}</span>; + badge = <span className='badge'>{unreadCount.mentions}</span>; this.badgesActive = true; } } else if (this.state.loadingDMChannel === index && channel.type === Constants.DM_CHANNEL) { @@ -554,17 +554,29 @@ export default class Sidebar extends React.Component { ); } - if (msgCount > 0) { + if (unreadCount.mentions > 0) { rowClass += ' has-badge'; } let displayName = channel.display_name; var icon = null; + const globeIcon = Constants.GLOBE_ICON_SVG; + const lockIcon = Constants.LOCK_ICON_SVG; if (channel.type === Constants.OPEN_CHANNEL) { - icon = <div className='status'><i className='fa fa-globe'/></div>; + icon = ( + <span + className='icon icon__globe' + dangerouslySetInnerHTML={{__html: globeIcon}} + /> + ); } else if (channel.type === Constants.PRIVATE_CHANNEL) { - icon = <div className='status'><i className='fa fa-lock'/></div>; + icon = ( + <span + className='icon icon__lock' + dangerouslySetInnerHTML={{__html: lockIcon}} + /> + ); } else if (channel.type === Constants.GM_CHANNEL) { displayName = ChannelUtils.buildGroupChannelName(channel.id); icon = <div className='status status--group'>{UserStore.getProfileListInChannel(channel.id, true).length}</div>; @@ -589,6 +601,7 @@ export default class Sidebar extends React.Component { if (handleClose && !badge) { closeButton = ( <OverlayTrigger + trigger={['hover', 'focus']} delayShow={1000} placement='top' overlay={removeTooltip} @@ -630,7 +643,7 @@ export default class Sidebar extends React.Component { onClick={this.trackChannelSelectedEvent} > {icon} - {displayName} + <span className='sidebar-item__name'>{displayName}</span> {badge} {closeButton} </Link> @@ -644,6 +657,8 @@ export default class Sidebar extends React.Component { } render() { + const switchChannelIcon = Constants.SWITCH_CHANNEL_ICON_SVG; + // Check if we have all info needed to render if (this.state.currentTeam == null || this.state.currentUser == null) { return (<div/>); @@ -749,8 +764,8 @@ export default class Sidebar extends React.Component { let createPublicChannelIcon = ( <OverlayTrigger + trigger={['hover', 'focus']} delayShow={500} - trigger='hover' placement='top' overlay={createChannelTootlip} > @@ -767,9 +782,9 @@ export default class Sidebar extends React.Component { let createPrivateChannelIcon = ( <OverlayTrigger + trigger={['hover', 'focus']} delayShow={500} placement='top' - trigger='hover' overlay={createGroupTootlip} > <a @@ -866,7 +881,7 @@ export default class Sidebar extends React.Component { <h4> <FormattedMessage id='sidebar.favorite' - defaultMessage='Favorites' + defaultMessage='FAVORITE CHANNELS' /> </h4> </li> @@ -877,7 +892,7 @@ export default class Sidebar extends React.Component { <h4> <FormattedMessage id='sidebar.channels' - defaultMessage='Channels' + defaultMessage='PUBLIC CHANNELS' /> {createPublicChannelIcon} </h4> @@ -903,7 +918,7 @@ export default class Sidebar extends React.Component { <h4> <FormattedMessage id='sidebar.pg' - defaultMessage='Private Channels' + defaultMessage='PRIVATE CHANNELS' /> {createPrivateChannelIcon} </h4> @@ -915,7 +930,7 @@ export default class Sidebar extends React.Component { <h4> <FormattedMessage id='sidebar.direct' - defaultMessage='Direct Messages' + defaultMessage='DIRECT MESSAGES' /> </h4> </li> @@ -928,6 +943,10 @@ export default class Sidebar extends React.Component { className='btn btn-link' onClick={this.openQuickSwitcher} > + <span + className='icon icon__switch' + dangerouslySetInnerHTML={{__html: switchChannelIcon}} + /> <FormattedMessage id={quickSwitchText} defaultMessage='Switch Channels' |