From 8fb0609bccdacf4becf0da112c66e0b6a7df31c5 Mon Sep 17 00:00:00 2001
From: Lieuwe Rooijakkers <lieuwerooijakkers@gmail.com>
Date: Fri, 25 Dec 2015 23:31:14 +0100
Subject: [PATCH] show persons that read the chatmessage

This could be improved imo:
- We limit to 3 users without any indication that there are more people who have
  read it.
- Add a way to see who read the message on mobile (tap to show more info, like
  Messenger has?)
---
 packages/chat/client/chatMessages.coffee       | 3 +--
 packages/chat/client/chatMessages.html         | 9 ++++++++-
 packages/chat/client/fullscreenChatWindow.styl | 9 +++++++++
 packages/chat/lib/middlewares.coffee           | 8 ++++++++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/chat/client/chatMessages.coffee b/packages/chat/client/chatMessages.coffee
index 95d6ea64..260a9fad 100644
--- a/packages/chat/client/chatMessages.coffee
+++ b/packages/chat/client/chatMessages.coffee
@@ -97,10 +97,9 @@ Template.messageRow.events
 
 Template.messageRow.rendered = ->
 	$node = $ @firstNode
-	$parent = $ @firstNode.parentNode
 
 	if Session.equals 'deviceType', 'desktop'
 		# TODO: fix this when opening multiple times.
 		$node.find('[data-toggle="tooltip"]').tooltip
 			container: 'body'
-			placement: if $node.hasClass('own') then 'right' else 'left'
+			placement: if $node.hasClass('own') then 'auto right' else 'auto left'
diff --git a/packages/chat/client/chatMessages.html b/packages/chat/client/chatMessages.html
index 05e4db8b..be2caee0 100644
--- a/packages/chat/client/chatMessages.html
+++ b/packages/chat/client/chatMessages.html
@@ -27,9 +27,16 @@
 				</div>
 			{{/if}}
 			<div class="time">{{__time}}</div>
+			<div class="readBy">
+				{{#each __readBy}}
+					<a href="{{pathFor 'personView' id=_id}}">
+						<img src="{{picture this 100}}" width="15" height="15" title="Gelezen door {{profile.firstName}}" data-toggle="tooltip"/>
+					</a>
+				{{/each}}
+			</div>
 		</aside>
 		{{#with __sender}}
-			<a href="{{pathFor 'personView' _id=_id}}">
+			<a href="{{pathFor 'personView' id=_id}}">
 				<img class="senderImage" src="{{picture this 100}}" width="25" height="25" title="{{profile.firstName}} {{profile.lastName}}" data-toggle="tooltip"/>
 			</a>
 		{{/with}}
diff --git a/packages/chat/client/fullscreenChatWindow.styl b/packages/chat/client/fullscreenChatWindow.styl
index a2c884ca..7f7b0838 100644
--- a/packages/chat/client/fullscreenChatWindow.styl
+++ b/packages/chat/client/fullscreenChatWindow.styl
@@ -117,6 +117,8 @@ div#fullscreenChatWindow
 				left: initial
 				right: -170px
 
+				align(vertical)
+				font-size: 15px
 				text-align: left
 
 				.edited
@@ -124,6 +126,13 @@ div#fullscreenChatWindow
 					margin-left: 0
 					margin-right: 5px
 
+				.readBy
+					absolute: right -20px top 50%
+					transform: translateY(-50%)
+
+					img
+						pointer-events: all
+
 			img.senderImage
 				float: right
 
diff --git a/packages/chat/lib/middlewares.coffee b/packages/chat/lib/middlewares.coffee
index 801ad9a3..a9311971 100644
--- a/packages/chat/lib/middlewares.coffee
+++ b/packages/chat/lib/middlewares.coffee
@@ -115,5 +115,13 @@ ChatMiddlewares.attach 'add hidden fields', 'client', (cm) ->
 		__time: Helpers.formatDate cm.time
 		__changedOn: Helpers.formatDate cm.changedOn
 		__pending: if cm.pending then 'pending' else ''
+		__readBy: ->
+			Meteor.users.find {
+				_id:
+					$in: cm.readBy
+					$nin: [ Meteor.userId(), cm.creatorId ]
+			}, {
+				limit: 3
+			}
 
 @ChatMiddlewares = ChatMiddlewares