chat: dim message while sending

simplyGits · Dec 25, 2015 · 17cd3bd · 17cd3bd
1 parent 7e94758
commit 17cd3bd
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -25,6 +25,9 @@ if Package['aldeed:collection2']?
 		changedOn:
 			type: Date
 			optional: yes
+		pending:
+			type: Boolean
+			optional: yes
 
 	ChatRooms.attachSchema
 		type: