diff options
| -rw-r--r-- | web/react/components/sidebar.jsx | 16 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_sidebar--left.scss | 22 |
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 { |