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?)
simplyGits · Dec 25, 2015 · 8fb0609 · 8fb0609
1 parent 2e8d66a
commit 8fb0609
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git 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
@@ -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
@@ -117,13 +117,22 @@ div#fullscreenChatWindow
 				left: initial
 				right: -170px
 
+				align(vertical)
+				font-size: 15px
 				text-align: left
 
 				.edited
 					float: left
 					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
@@ -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