From 17cd3bd677ccd3fb516bd48c3342a8147f31e0c6 Mon Sep 17 00:00:00 2001
From: Lieuwe Rooijakkers <lieuwerooijakkers@gmail.com>
Date: Fri, 25 Dec 2015 21:42:56 +0100
Subject: [PATCH] chat: dim message while sending

---
 packages/chat/client/chatMessages.html         |  2 +-
 packages/chat/client/fullscreenChatWindow.styl | 13 +++++++++++++
 packages/chat/client/mobileChatWindow.styl     |  4 ++++
 packages/chat/lib/methods.coffee               | 10 +++++++++-
 packages/chat/lib/middlewares.coffee           |  1 +
 packages/chat/lib/schemas.coffee               |  3 +++
 6 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/chat/client/chatMessages.html b/packages/chat/client/chatMessages.html
index f9a4c327..05e4db8b 100644
--- a/packages/chat/client/chatMessages.html
+++ b/packages/chat/client/chatMessages.html
@@ -19,7 +19,7 @@
 </template>
 
 <template name="messageRow">
-	<div class="message {{__own}} {{__new}}"> {{! we will purely use the __own class to style the message (change the color and location of the image and stuff. }}
+	<div class="message {{__own}} {{__new}} {{__pending}}"> {{! we will purely use the __own class to style the message (change the color and location of the image and stuff. }}
 		<aside>
 			{{#if __changedOn}}
 				<div class="edited" title="Bewerkt op {{__changedOn}}" data-toggle="tooltip">
diff --git a/packages/chat/client/fullscreenChatWindow.styl b/packages/chat/client/fullscreenChatWindow.styl
index 9bb896a3..a2c884ca 100644
--- a/packages/chat/client/fullscreenChatWindow.styl
+++ b/packages/chat/client/fullscreenChatWindow.styl
@@ -72,6 +72,7 @@ div#fullscreenChatWindow
 			position: relative
 			margin-left: paddingSides
 			margin-right: paddingSides
+			transition: .1s opacity ease-out
 
 			aside
 				position: absolute
@@ -139,6 +140,9 @@ div#fullscreenChatWindow
 			aside
 				opacity: 1
 
+		div.message.pending
+			animation: .1s ease-out .3s forwards dim
+
 		div.loadMore
 			text-align: center
 			border: 1px lightgray solid
@@ -201,3 +205,12 @@ div#fullscreenChatWindow
 
 div.fullscreenChatWindow.fadeOut
 	opacity: 0
+
+@keyframes dim {
+	0% {
+		opacity: 1
+	}
+	100% {
+		opacity: .6
+	}
+}
diff --git a/packages/chat/client/mobileChatWindow.styl b/packages/chat/client/mobileChatWindow.styl
index bfd829bf..d52d0439 100644
--- a/packages/chat/client/mobileChatWindow.styl
+++ b/packages/chat/client/mobileChatWindow.styl
@@ -63,6 +63,7 @@ div.mobileChatWindow
 		div.message
 			margin-top: 2px
 			font-size: 15px
+			transition: .1s opacity ease-out
 
 			aside
 				display: none
@@ -82,6 +83,9 @@ div.mobileChatWindow
 			img.senderImage
 				float: right
 
+		div.message.pending
+			opacity: .6
+
 		div.loadMore
 			text-align: center
 			padding-bottom: 5px
diff --git a/packages/chat/lib/methods.coffee b/packages/chat/lib/methods.coffee
index 6bc154cc..9e1c8537 100644
--- a/packages/chat/lib/methods.coffee
+++ b/packages/chat/lib/methods.coffee
@@ -30,8 +30,12 @@ Meteor.methods
 		if ChatRooms.find(_id: chatRoomId, users: @userId).count() is 0
 			throw new Meteor.Error 'not-in-room'
 
+		message = new ChatMessage content, @userId, chatRoomId
+		if @isSimulation
+			message.pending = yes
+
 		ChatRooms.update chatRoomId, $set: lastMessageTime: new Date
-		ChatMessages.insert new ChatMessage content, @userId, chatRoomId
+		ChatMessages.insert message
 
 	###*
 	# @method updateChatMessage
@@ -54,10 +58,14 @@ Meteor.methods
 		else if old.content is content
 			throw new Meteor.Error 'same-content'
 
+		if @isSimulation
+			pending = yes
+
 		ChatMessages.update chatMessageId,
 			$set:
 				content: content
 				changedOn: new Date
+				pending: pending
 		undefined
 
 	###*
diff --git a/packages/chat/lib/middlewares.coffee b/packages/chat/lib/middlewares.coffee
index 219457b7..801ad9a3 100644
--- a/packages/chat/lib/middlewares.coffee
+++ b/packages/chat/lib/middlewares.coffee
@@ -114,5 +114,6 @@ ChatMiddlewares.attach 'add hidden fields', 'client', (cm) ->
 		__new: if own or Meteor.userId() in cm.readBy then '' else 'new'
 		__time: Helpers.formatDate cm.time
 		__changedOn: Helpers.formatDate cm.changedOn
+		__pending: if cm.pending then 'pending' else ''
 
 @ChatMiddlewares = ChatMiddlewares
diff --git a/packages/chat/lib/schemas.coffee b/packages/chat/lib/schemas.coffee
index 0140be92..660d8b0f 100644
--- a/packages/chat/lib/schemas.coffee
+++ b/packages/chat/lib/schemas.coffee
@@ -25,6 +25,9 @@ if Package['aldeed:collection2']?
 		changedOn:
 			type: Date
 			optional: yes
+		pending:
+			type: Boolean
+			optional: yes
 
 	ChatRooms.attachSchema
 		type: