summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--web/react/components/sidebar.jsx16
-rw-r--r--web/sass-files/sass/partials/_sidebar--left.scss22
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 {