Merge pull request #761 from RocketChat/menu-more-unreads

Add bars to indicate unread rooms hidden by scroll
RocketChat · Sep 11, 2015 · 895bd84 · 895bd84
2 parents 47721ed + 9ccf8e1
commit 895bd84
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 1 deletion.
diff --git a/client/lib/menu.coffee b/client/lib/menu.coffee
@@ -1,6 +1,7 @@
 @menu = new class
 	init: ->
 		@container = $("#rocket-chat")
+		@list = $('.rooms-list')
 
 	isOpen: ->
 		return @container?.hasClass("menu-opened") is true
@@ -17,4 +18,31 @@
 		if @isOpen()
 			@close()
 		else
-			@open()
+			@open()
+
+	updateUnreadBars: _.throttle ->
+		if not @list?
+			return
+
+		listOffset = @list.offset()
+		listHeight = @list.height()
+
+		showTop = false
+		showBottom = false
+		$('li.has-alert').each ->
+			if $(this).offset().top < listOffset.top - $(this).height()
+				showTop = true
+
+			if $(this).offset().top > listOffset.top + listHeight
+				showBottom = true
+
+		if showTop is true
+			$('.top-unread-rooms').removeClass('hidden')
+		else
+			$('.top-unread-rooms').addClass('hidden')
+
+		if showBottom is true
+			$('.bottom-unread-rooms').removeClass('hidden')
+		else
+			$('.bottom-unread-rooms').addClass('hidden')
+	, 200
diff --git a/client/startup/unread.coffee b/client/startup/unread.coffee
@@ -28,6 +28,8 @@ Meteor.startup ->
 
 			readMessage.refreshUnreadMark(subscription.rid)
 
+		menu.updateUnreadBars()
+
 		if unreadCount > 0
 			if unreadCount > 999
 				Session.set 'unread', '999+'

diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
@@ -1521,6 +1521,35 @@ a.github-fork {
 			font-size: 12px;
 		}
 	}
+	.unread-rooms {
+		background-color: #068FE4;
+		position: absolute;
+		z-index: 1000;
+		width: 100%;
+		text-align: center;
+		line-height: 24px;
+		color: white;
+		text-transform: uppercase;
+		font-weight: bold;
+		display: -webkit-flex;
+		display: flex;
+		align-items: center;
+		-webkit-align-items: center;
+		justify-content: center;
+		-webkit-justify-content: center;
+
+		&.top-unread-rooms {
+			top: 60px;
+		}
+		&.bottom-unread-rooms {
+			bottom: 70px;
+		}
+
+		i {
+			margin-left: 5px;
+			font-size: 12px;
+		}
+	}
 }
 
 .new-room-highlight a {

diff --git a/client/views/app/sideNav/sideNav.coffee b/client/views/app/sideNav/sideNav.coffee
@@ -21,6 +21,12 @@ Template.sideNav.events
 	'mouseleave .header': ->
 		SideNav.leaveArrow()
 
+	'scroll .rooms-list': ->
+		menu.updateUnreadBars()
+
 Template.sideNav.onRendered ->
 	SideNav.init()
 	menu.init()
+
+	Meteor.defer ->
+		menu.updateUnreadBars()
diff --git a/client/views/app/sideNav/sideNav.html b/client/views/app/sideNav/sideNav.html
@@ -4,6 +4,9 @@
 			{{> userStatus}}
 		</header>
 		{{#if currentUser}}
+			<div class="unread-rooms top-unread-rooms hidden">
+				{{_ "More_unreads"}} <i class="icon-up-big"></i>
+			</div>
 			<div class="rooms-list">
 				<div class="wrapper">
 					{{> starredRooms }}
@@ -15,6 +18,9 @@ <h3>
 					</h3>
 				</div>
 			</div>
+			<div class="unread-rooms bottom-unread-rooms hidden">
+				{{_ "More_unreads"}} <i class="icon-down-big"></i>
+			</div>
 			<div class="flex-nav hidden">
 				<section>
 					{{> UI.dynamic template=flexTemplate data=flexData}}

diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json
@@ -169,6 +169,7 @@
   "Meta_robots" : "Robots",
   "minutes" : "minutes",
   "More_channels" : "More channels",
+  "More_unreads" : "More unreads",
   "Msgs" : "Msgs",
   "multi" : "multi",
   "My_Account" : "My Account",