IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added the ability for the sidebar to determine whether or not there's any unread channels offscreen

Browse Source
This commit is contained in:
hmhealey
2015-08-06 16:28:43 -04:00
parent 4fea0b452e
commit 38e2b69dba
1 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/react/components/sidebar.jsx
View File

@@ -132,11 +132,17 @@ module.exports = React.createClass({
$('.nav-pills__container').perfectScrollbar();
this.updateTitle();
this.updateUnreadIndicators();
$('.nav-pills__container').on('scroll', null, this.onScroll);
},
componentDidUpdate: function() {
this.updateTitle();
this.updateUnreadIndicators();
},
componentWillUnmount: function() {
$('.nav-pills__container').off('scroll', null, this.onScroll);
ChannelStore.removeChangeListener(this.onChange);
UserStore.removeChangeListener(this.onChange);
UserStore.removeStatusesChangeListener(this.onChange);
@@ -235,6 +241,28 @@ module.exports = React.createClass({
}
}
},
onScroll: function(e) {
this.updateUnreadIndicators();
},
updateUnreadIndicators: function() {
var container = $(this.refs.container.getDOMNode());
if (this.firstUnreadChannel) {
var firstUnreadElement = $(this.refs[this.firstUnreadChannel].getDOMNode());
if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
console.log("off top");
}
}
if (this.lastUnreadChannel) {
var lastUnreadElement = $(this.refs[this.lastUnreadChannel].getDOMNode());
if (lastUnreadElement.position().top > container.height()) {
console.log("off bottom");
}
}
},
getInitialState: function() {
return getStateFromStores();
},
@@ -243,6 +271,11 @@ module.exports = React.createClass({
var activeId = this.state.active_id;
var badgesActive = false;
// keep track of the first and last unread channels so we can use them to set the unread indicators
var self = this;
this.firstUnreadChannel = null;
this.lastUnreadChannel = null;
function createChannelElement(channel) {
var channelMember = members[channel.id];
var active = channel.id === activeId ? 'active' : '';
@@ -256,6 +289,11 @@ module.exports = React.createClass({
var titleClass = '';
if (unread) {
titleClass = 'unread-title';
if (!self.firstUnreadChannel) {
self.firstUnreadChannel = channel.name;
}
self.lastUnreadChannel = channel.name;
}
var badge = null;
@@ -302,7 +340,7 @@ module.exports = React.createClass({
}
return (
<li key={channel.name} className={active}>
<li key={channel.name} ref={channel.name} className={active}>
<a className={'sidebar-channel ' + titleClass} href={href} onClick={clickHandler}>
{status}
{badge}
@@ -349,7 +387,7 @@ module.exports = React.createClass({
<SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
<SearchBox />
<div className='nav-pills__container'>
<div ref='container' className='nav-pills__container'>
<ul className='nav nav-pills nav-stacked'>
<li><h4>Channels<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='O'>+</a></h4></li>
{channelItems}