From 796c2590a216c86e6ea691aaac6a0904324077a5 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Wed, 27 May 2015 16:18:21 +0930
Subject: [PATCH] Add unread indicator to scrubber. closes #94

---
 js/forum/src/components/stream-scrubber.js | 20 +++++++++++++++++++-
 less/forum/discussion.less                 | 17 +++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/js/forum/src/components/stream-scrubber.js b/js/forum/src/components/stream-scrubber.js
index b29af44b2..727a599a4 100644
--- a/js/forum/src/components/stream-scrubber.js
+++ b/js/forum/src/components/stream-scrubber.js
@@ -41,6 +41,11 @@ export default class StreamScrubber extends Component {
     this.visible = m.prop(1);
     this.description = m.prop();
 
+    this.unreadCount = () => {
+      var discussion = this.props.streamContent.props.stream.discussion;
+      return discussion.lastPostNumber() - discussion.readNumber();
+    };
+
     // Define a handler to update the state of the scrollbar to reflect the
     // current scroll position of the page.
     this.scrollListener = new ScrollListener(this.onscroll.bind(this));
@@ -59,6 +64,8 @@ export default class StreamScrubber extends Component {
   view() {
     var retain = this.subtree.retain();
     var streamContent = this.props.streamContent;
+    var unreadCount = this.unreadCount();
+    var unreadPercent = unreadCount / this.count();
 
     return m('div.stream-scrubber.dropdown'+(this.disabled() ? '.disabled' : ''), {config: this.onload.bind(this)}, [
       m('a.btn.btn-default.dropdown-toggle[href=javascript:;][data-toggle=dropdown]', [
@@ -77,7 +84,18 @@ export default class StreamScrubber extends Component {
                 m('span.description', retain || this.description())
               ])
             ]),
-            m('div.scrubber-after')
+            m('div.scrubber-after'),
+            (app.session.user() && unreadPercent) ? m('div.scrubber-unread', {
+              style: {top: (100 - unreadPercent * 100)+'%', height: (unreadPercent * 100)+'%'},
+              config: function(element, isInitialized, context) {
+                var $element = $(element);
+                var newStyle = {top: $element.css('top'), height: $element.css('height')};
+                if (context.oldStyle) {
+                  $element.stop(true).css(context.oldStyle).animate(newStyle);
+                }
+                context.oldStyle = newStyle;
+              }
+            }, unreadCount+' unread') : ''
           ]),
           m('a.scrubber-last[href=javascript:;]', {onclick: streamContent.goToLast.bind(streamContent)}, [icon('angle-double-down'), ' Now'])
         ])
diff --git a/less/forum/discussion.less b/less/forum/discussion.less
index 8c4132afa..7ceec871a 100644
--- a/less/forum/discussion.less
+++ b/less/forum/discussion.less
@@ -509,8 +509,23 @@
 .scrubber-before, .scrubber-after {
   border-left: 1px solid @fl-body-secondary-color;
 }
+.scrubber-unread {
+  position: absolute;
+  border-left: 1px solid lighten(@fl-body-muted-color, 10%);
+  width: 100%;
+  background-image: linear-gradient(to right, @fl-body-secondary-color, fade(@fl-body-secondary-color, 0) 10px, fade(@fl-body-secondary-color, 0));
+  display: flex;
+  align-items: center;
+  color: @fl-body-muted-color;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: bold;
+  padding-left: 13px;
+}
 .scrubber-slider {
   position: relative;
+  z-index: 1;
+  background: @fl-body-bg;
   width: 100%;
   padding: 5px 0;
 }
@@ -522,6 +537,7 @@
   float: left;
   margin-left: -2px;
   transition: background 0.2s;
+
   .disabled & {
     background: @fl-body-secondary-color;
   }
@@ -533,6 +549,7 @@
   top: 50%;
   width: 100%;
   left: 15px;
+
   & strong {
     display: block;
   }