shows a send button if there is a message in the text box

9 years ago · 6991f9b7a5
parent 7793d9e10e
commit 6991f9b7a5
11 changed files with 148 additions and 57 deletions
--- a/packages/rocketchat-livechat/app/client/stylesheets/main.less
+++ b/packages/rocketchat-livechat/app/client/stylesheets/main.less
@ -363,6 +363,7 @@ input:focus {

 		.input-wrapper {
 			padding: 6px 6px 0 6px;
+			padding-right: 30px;
 			textarea {
 				display: block;
 				padding: 6px 8px;
@ -380,6 +381,19 @@ input:focus {
 				position: relative;
 			}
 		}
+		.send-button {
+			float: right;
+			position: relative;
+			right: 7px;
+			top: -20px;
+			color: @secondary-font-color;
+			cursor: pointer;
+			.transition(color .15s ease-out);
+
+			&:hover {
+				color: @primary-font-color;
+			}
+		}
 	}
 	.offline {
 		flex: 1 1 100%;
--- a/packages/rocketchat-livechat/app/client/views/messages.html
+++ b/packages/rocketchat-livechat/app/client/views/messages.html
@ -19,6 +19,7 @@
 		<div class="input-wrapper">
 			<textarea class="input-message" placeholder="Type your message"></textarea>
 		</div>
+		<i class="send-button icon-paper-plane" aria-label="{{_ "Send"}}"></i>
 		<p class="powered-by">
 			Powered by
 			<a href="https://rocket.chat" target="_blank">
--- a/packages/rocketchat-livechat/app/client/views/messages.js
+++ b/packages/rocketchat-livechat/app/client/views/messages.js
@ -14,28 +14,30 @@ Template.messages.helpers({
 });

 Template.messages.events({
-	'keyup .input-message': function(event) {
-		// Inital height is 28. If the scrollHeight is greater than that( we have more text than area ),
-		// increase the size of the textarea. The max-height is set at 200
-		// even if the scrollHeight become bigger than that it should never exceed that.
-		// Account for no text in the textarea when increasing the height.
-		// If there is no text, reset the height.
-		var inputScrollHeight;
-		Template.instance().chatMessages.keyup(visitor.getRoom(), event, Template.instance());
-		inputScrollHeight = $(event.currentTarget).prop('scrollHeight');
-		if (inputScrollHeight > 28) {
-			return $(event.currentTarget).height($(event.currentTarget).val() === '' ? '15px' : (inputScrollHeight >= 200 ? inputScrollHeight - 50 : inputScrollHeight - 20));
-		}
+	'keyup .input-message': function(event, instance) {
+		instance.chatMessages.keyup(visitor.getRoom(), event, instance);
+		instance.updateMessageInputHeight(event.currentTarget);
 	},
-	'keydown .input-message': function(event) {
-		return Template.instance().chatMessages.keydown(visitor.getRoom(), event, Template.instance());
+	'keydown .input-message': function(event, instance) {
+		$('.input-message.autogrow-short').val();
+		return instance.chatMessages.keydown(visitor.getRoom(), event, instance);
+	},
+	'click .send-button': function(event, instance) {
+		$('.input-message.autogrow-short').val();
+
+		let input = instance.find('.input-message');
+		let sent = instance.chatMessages.send(visitor.getRoom(), input);
+		input.focus();
+		instance.updateMessageInputHeight(input);
+
+		return sent;
 	},
-	'click .new-message': function() {
-		Template.instance().atBottom = true;
-		return Template.instance().find('.input-message').focus();
+	'click .new-message': function(event, instance) {
+		instance.atBottom = true;
+		return instance.find('.input-message').focus();
 	},
 	'click .error': function(event) {
-		return $(event.currentTarget).removeClass('show');
+		return $(input).removeClass('show');
 	},
 });

@ -53,6 +55,19 @@ Template.messages.onCreated(function() {
 		});
 	});
 	self.atBottom = true;
+
+	self.updateMessageInputHeight = function(input) {
+		// Inital height is 28. If the scrollHeight is greater than that( we have more text than area ),
+		// increase the size of the textarea. The max-height is set at 200
+		// even if the scrollHeight become bigger than that it should never exceed that.
+		// Account for no text in the textarea when increasing the height.
+		// If there is no text, reset the height.
+		let inputScrollHeight;
+		inputScrollHeight = $(input).prop('scrollHeight');
+		if (inputScrollHeight > 28) {
+			return $(input).height($(input).val() === '' ? '15px' : (inputScrollHeight >= 200 ? inputScrollHeight - 50 : inputScrollHeight - 20));
+		}
+	};
 });

 Template.messages.onRendered(function() {
--- a/packages/rocketchat-livechat/assets/demo.html
+++ b/packages/rocketchat-livechat/assets/demo.html
@ -1,6 +1,7 @@
 <html>

 <head>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 	<script type="text/javascript">
 	(function(w, d, s, f, u) {
 		w[f] = w[f] || [];
--- a/packages/rocketchat-livechat/client/stylesheets/livechat.less
+++ b/packages/rocketchat-livechat/client/stylesheets/livechat.less
@ -365,6 +365,7 @@

 				.input-wrapper {
 					padding: 6px;
+					padding-right: 30px;
 					textarea {
 						display: block;
 						padding: 6px 8px;
@ -385,6 +386,20 @@
 						outline: none;
 					}
 				}
+
+				.send-button {
+					float: right;
+					position: relative;
+					right: 7px;
+					top: -28px;
+					color: @secondary-font-color;
+					cursor: pointer;
+					.transition(color .15s ease-out);
+
+					&:hover {
+						color: @primary-font-color;
+					}
+				}
 			}
 			.offline {
 				flex: 1 1 100%;
--- a/packages/rocketchat-livechat/client/views/app/livechatAppearance.html
+++ b/packages/rocketchat-livechat/client/views/app/livechatAppearance.html
@ -59,6 +59,7 @@
 							<div class="input-wrapper">
 								<textarea class="input-message" placeholder="Type your message"></textarea>
 							</div>
+							<i class="send-button icon-paper-plane" aria-label="{{_ "Send"}}"></i>
 						</div>
 					</div>
 				{{/with}}
--- a/packages/rocketchat-theme/assets/stylesheets/base.less
+++ b/packages/rocketchat-theme/assets/stylesheets/base.less
@ -2341,18 +2341,43 @@ a.github-fork {
 					cursor: pointer;
 				}
 			}
-			> .mic, .stop-mic {
+		}
+		.message-buttons {
+			padding-left: 4px;
+
+			.mic, .stop-mic {
 				width: 40px;
 				font-size: 22px;
+				height: 36px;
 				padding: 7px 0;
-				margin-left: 4px;
 				text-align: center;
 				cursor: pointer;
 				border-radius: 30px;
-				.transition(background-color 0.1s linear, color 0.1s linear);
-				&:hover {
+				display: none;
+			}
+
+			&.show-mic .mic, &.show-mic .mic .stop-mic {
+				display: inline-block;
+			}
+
+			.send-button {
+				position: inherit;
+				width: 40px;
+				font-size: 20px;
+				height: 36px;
+				padding: 7px 0;
+				text-align: center;
+				cursor: pointer;
+				border-radius: 30px;
+				display: none;
+				i {
+					margin-right: 2px;
 				}
 			}
+
+			&.show-send .send-button {
+				display: inline-block;
+			}
 		}
 		textarea {
 			display: block;
@ -2368,16 +2393,6 @@ a.github-fork {
 			&.editing {
 			}
 		}
-		.icon-paper-plane {
-			position: absolute;
-			top: 2px;
-			right: 0px;
-			cursor: pointer;
-			padding: 8px;
-			font-size: 16px;
-			&:hover {
-			}
-		}
 		.users-typing {
 			float: left;
 			height: 23px;
--- a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
+++ b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
@ -739,7 +739,17 @@ a.github-fork {
 					color: #666;
 				}
 			}
-			> .mic, .stop-mic {
+		}
+		.message-buttons {
+			.mic, .stop-mic {
+				color: #888;
+				background-color: #FCFCFC;
+				&:hover {
+					background-color: #F1F1F1;
+					color: #666;
+				}
+			}
+			.send-button {
 				color: #888;
 				background-color: #FCFCFC;
 				&:hover {
@ -753,12 +763,6 @@ a.github-fork {
 				background-color: #fff7d8;
 			}
 		}
-		.icon-paper-plane {
-			color: @secondary-font-color;
-			&:hover {
-				color: @primary-font-color;
-			}
-		}
 		.users-typing {
 			color: #888888;
 			background: #FCFCFC;
--- a/packages/rocketchat-ui-message/message/messageBox.coffee
+++ b/packages/rocketchat-ui-message/message/messageBox.coffee
@ -53,6 +53,16 @@ Template.messageBox.helpers
 	fileUploadAllowedMediaTypes: ->
 		return RocketChat.settings.get('FileUpload_MediaTypeWhiteList')

+	showMic: ->
+		if not Template.instance().isMessageFieldEmpty.get()
+			return
+
+		if Template.instance().showMicButton.get()
+			return 'show-mic'
+
+	showSend: ->
+		if not Template.instance().isMessageFieldEmpty.get() or not Template.instance().showMicButton.get()
+			return 'show-send'

 Template.messageBox.events
 	'click .join': (event) ->
@ -63,8 +73,15 @@ Template.messageBox.events
 	'focus .input-message': (event) ->
 		KonchatNotification.removeRoomNotification @_id

-	'keyup .input-message': (event) ->
-		chatMessages[Session.get('openedRoom')].keyup(@_id, event, Template.instance())
+	'click .send-button': (event, instance) ->
+		input = instance.find('.input-message')
+		chatMessages[@_id].send(@_id, input)
+		input.focus()
+		input.updateAutogrow()
+
+	'keyup .input-message': (event, instance) ->
+		chatMessages[@_id].keyup(@_id, event, instance)
+		instance.isMessageFieldEmpty.set(chatMessages[@_id].isEmpty())

 	'paste .input-message': (e) ->
 		if not e.originalEvent.clipboardData?
@ -85,14 +102,6 @@ Template.messageBox.events
 	'keydown .input-message': (event) ->
 		chatMessages[Session.get('openedRoom')].keydown(@_id, event, Template.instance())

-	'click .message-form .icon-paper-plane': (event) ->
-		input = $(event.currentTarget).siblings("textarea")
-		chatMessages[Session.get('openedRoom')].send(this._id, input.get(0))
-		event.preventDefault()
-		event.stopPropagation()
-		input.focus()
-		input.get(0).updateAutogrow()
-
 	"click .editing-commands-cancel > a": (e) ->
 		chatMessages[Session.get('openedRoom')].clearEditing()

@ -129,7 +138,14 @@ Template.messageBox.events
 		t.$('.stop-mic').addClass('hidden')
 		t.$('.mic').removeClass('hidden')

-Template.messageBox.onRendered ->
-	# unless window.chatMessages[Session.get('openedRoom')]
-	# 	window.chatMessages[Session.get('openedRoom')] = new ChatMessages
-	# this.chatMessages.init(this.firstNode)
+Template.messageBox.onCreated ->
+	@isMessageFieldEmpty = new ReactiveVar true
+	@showMicButton = new ReactiveVar false
+
+	@autorun =>
+		wavRegex = /audio\/wav|audio\/\*/i
+		wavEnabled = !RocketChat.settings.get("FileUpload_MediaTypeWhiteList") || RocketChat.settings.get("FileUpload_MediaTypeWhiteList").match(wavRegex)
+		if RocketChat.settings.get('Message_AudioRecorderEnabled') and (navigator.getUserMedia? or navigator.webkitGetUserMedia?) and wavEnabled and RocketChat.settings.get('FileUpload_Enabled')
+			@showMicButton.set true
+		else
+			@showMicButton.set false
--- a/packages/rocketchat-ui-message/message/messageBox.html
+++ b/packages/rocketchat-ui-message/message/messageBox.html
@ -8,17 +8,20 @@
 				</div>
 				<div class="input-message-container">
 					{{> messagePopupConfig getPopupConfig}}
-					<textarea dir="auto" name="msg" maxlength="{{maxMessageLength}}" class="input-message autogrow-short" placeholder="{{_ 'Message'}}"></textarea>
+					<textarea dir="auto" name="msg" maxlength="{{maxMessageLength}}" autocomplete="off" class="input-message autogrow-short" placeholder="{{_ 'Message'}}"></textarea>
 				</div>

-				{{#if canRecordAudio}}
+				<div class="message-buttons {{showMic}} {{showSend}}">
 					<div class="mic">
 						<i class="icon-mic" aria-label="{{_ "Record"}}"></i>
 					</div>
 					<div class="stop-mic hidden">
 						<i class="icon-stop" aria-label="{{_ "Stop_Recording"}}"></i>
 					</div>
-				{{/if}}
+					<div class="send-button">
+						<i class="icon-paper-plane" aria-label="{{_ "Send"}}"></i>
+					</div>
+				</div>
 			</div>
 			<div class="users-typing">
 				{{#with usersTyping}}
@ -69,4 +72,4 @@
 		</div>
 		{{/if}}
 	{{/if}}
-</template>
+</template>
--- a/packages/rocketchat-ui/lib/chatMessages.coffee
+++ b/packages/rocketchat-ui/lib/chatMessages.coffee
@ -4,6 +4,7 @@ class @ChatMessages
 		this.messageMaxSize = RocketChat.settings.get('Message_MaxAllowedSize')
 		this.wrapper = $(node).find(".wrapper")
 		this.input = $(node).find(".input-message").get(0)
+		this.hasValue = new ReactiveVar false
 		this.bindEvents()
 		return

@ -186,6 +187,8 @@ class @ChatMessages
 		unless k in keyCodes
 			this.startTyping(rid, input)

+		this.hasValue.set input.value isnt ''
+
 	keydown: (rid, event) ->
 		input = event.currentTarget
 		k = event.which
@ -228,3 +231,6 @@ class @ChatMessages

 	isMessageTooLong: (input) ->
 		input?.value.length > this.messageMaxSize
+
+	isEmpty: ->
+		return !this.hasValue.get()