Added indicators for when a channel with unread posts is offscreen

2 files changed, 34 insertions, 4 deletions

diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index abbcd306d..d6c22230e 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -134,14 +134,14 @@ module.exports = React.createClass({
         this.updateTitle();
         this.updateUnreadIndicators();
 
-        $('.nav-pills__container').on('scroll', null, this.onScroll);
+        $('.nav-pills__container').on('scroll', this.onScroll);
     },
     componentDidUpdate: function() {
         this.updateTitle();
         this.updateUnreadIndicators();
     },
     componentWillUnmount: function() {
-        $('.nav-pills__container').off('scroll', null, this.onScroll);
+        $('.nav-pills__container').off('scroll', this.onScroll);
 
         ChannelStore.removeChangeListener(this.onChange);
         UserStore.removeChangeListener(this.onChange);
@@ -251,7 +251,9 @@ module.exports = React.createClass({
             var firstUnreadElement = $(this.refs[this.firstUnreadChannel].getDOMNode());
 
             if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
-                console.log("off top");
+                $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'initial');
+            } else {
+                $(this.refs.topUnreadIndicator.getDOMNode()).css('display', 'none');
             }
         }
 
@@ -259,7 +261,10 @@ module.exports = React.createClass({
             var lastUnreadElement = $(this.refs[this.lastUnreadChannel].getDOMNode());
 
             if (lastUnreadElement.position().top > container.height()) {
-                console.log("off bottom");
+                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('bottom', '0');
+                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'initial');
+            } else {
+                $(this.refs.bottomUnreadIndicator.getDOMNode()).css('display', 'none');
             }
         }
     },
@@ -387,6 +392,9 @@ module.exports = React.createClass({
                 <SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
                 <SearchBox />
 
+                <div ref='topUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-top' style={{display: 'none'}}>Unread post(s) above</div>
+                <div ref='bottomUnreadIndicator' className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom' style={{display: 'none'}}>Unread post(s) below</div>
+
                 <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>
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index 89d1ff416..5d866715e 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -35,7 +35,29 @@
         height: 100%;
         position: relative;
         overflow: auto;
+
+    }
+
+    .nav-pills__unread-indicator {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: 70%;
+        background-color: darken($primary-color, 5%);
+        color: white;
+        margin: 0 auto;
+        padding: 2px;
+        text-align: center;
+        z-index: 1;
     }
+
+    .nav-pills__unread-indicator-top {
+        top: 56px;
+    }
+    .nav-pills__unread-indicator-bottom {
+        bottom: 0px;
+    }
+
     .nav {
         &.nav-stacked {
             > li+li {