Improve message edition and add links to cancel and save changes. Fixes

#552 #575
RocketChat · Aug 25, 2015 · e876d06 · e876d06
1 parent e9b1f93
commit e876d06
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 10 deletions.
diff --git a/client/lib/chatMessages.coffee b/client/lib/chatMessages.coffee
@@ -51,6 +51,7 @@ class @ChatMessages
 		this.editing.id = id
 		element.classList.add("editing")
 		this.input.classList.add("editing")
+		$(this.input).closest('.message-form').addClass('editing');
 		setTimeout =>
 			this.input.focus()
 		, 5
@@ -59,6 +60,7 @@ class @ChatMessages
 		if this.editing.element
 			this.editing.element.classList.remove("editing")
 			this.input.classList.remove("editing")
+			$(this.input).closest('.message-form').removeClass('editing');
 			this.editing.id = null
 			this.editing.element = null
 			this.editing.index = null
@@ -68,6 +70,10 @@ class @ChatMessages
 
 	send: (rid, input) ->
 		if _.trim(input.value) isnt ''
+			if this.editing.id
+				this.update(this.editing.id, rid, input)
+				return
+
 			if this.isMessageTooLong(input)
 				return Errors.throw t('Error_message_too_long')
 			KonchatNotification.removeRoomNotification(rid)
@@ -158,10 +164,7 @@ class @ChatMessages
 		if k is 13 and not event.shiftKey
 			event.preventDefault()
 			event.stopPropagation()
-			if this.editing.id
-				this.update(this.editing.id, rid, input)
-			else
-				this.send(rid, input)
+			this.send(rid, input)
 			return
 
 		if k is 9

diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
@@ -2290,6 +2290,32 @@ a.github-fork {
 				transform: rotate(90deg);
 			}
 		}
+		.editing-commands {
+			display: none;
+			text-transform: lowercase;
+			.editing-commands-cancel {
+				float: left;
+				height: 23px;
+				font-size: 11px;
+				color: #888888;
+				padding: 3px;
+			}
+			.editing-commands-save {
+				float: right;
+				height: 23px;
+				font-size: 11px;
+				color: #888888;
+				padding: 3px;
+			}
+		}
+		&.editing {
+			.formatting-tips, .users-typing{
+				display: none;
+			}
+			.editing-commands {
+				display: block;
+			}
+		}
 	}
 	.add-user-search {
 		height: 100%;

diff --git a/client/views/app/room.coffee b/client/views/app/room.coffee
@@ -501,13 +501,19 @@ Template.room.events
 	'click .see-all': (e, instance) ->
 		instance.showUsersOffline.set(!instance.showUsersOffline.get())
 
-	"mousedown .edit-message": (e) ->
+	"click .edit-message": (e) ->
 		Template.instance().chatMessages.edit(e.currentTarget.parentNode.parentNode)
-		# Session.set 'editingMessageId', undefined
-		# Meteor.defer ->
-		# 	Session.set 'editingMessageId', self._id
-		# 	Meteor.defer ->
-		# 		$('.input-message-editing').select()
+		input = Template.instance().find('.input-message')
+		Meteor.setTimeout ->
+			input.focus()
+		, 200
+
+	"click .editing-commands-cancel > a": (e) ->
+		Template.instance().chatMessages.clearEditing()
+
+	"click .editing-commands-save > a": (e) ->
+		chatMessages = Template.instance().chatMessages
+		chatMessages.send(@_id, chatMessages.input)
 
 	"click .mention-link": (e) ->
 		channel = $(e.currentTarget).data('channel')

diff --git a/client/views/app/room.html b/client/views/app/room.html
@@ -111,6 +111,10 @@ <h2>
 							<code class="inline"><span class="hidden-br"><br></span>```<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "multi"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "line"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>```</code>
 							<q><span class="hidden-br"><br></span>&gt;{{_ "quote"}}</q>
 						</div>
+						<div class="editing-commands" aria-hidden="true" dir="auto">
+							<div class="editing-commands-cancel">{{_ 'Esc_to'}} <a href="">{{_ 'Cancel'}}</a></div>
+							<div class="editing-commands-save">{{_ 'Enter_to'}} <a href="">{{_ 'Save_changes'}}</a></div>
+						</div>
 					</form>
 				{{else}}
 					{{#if canJoin}}

diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json
@@ -76,7 +76,9 @@
   "Email_or_username" : "Email or username",
   "Email_verified" : "Email verified",
   "Enter_info" : "Enter your information",
+  "Enter_to" : "Enter to",
   "Error_changing_password" : "Password changed",
+  "Esc_to" : "Esc to",
   "False" : "False",
   "Favorites" : "Favorites",
   "Follow_social_profiles" : "Follow our social profiles, fork us on github and share your thoughts about the rocket.chat app on our trello board.",