Merge pull request #7985 from RocketChat/text-area-mobile

[FIX] Text area buttons and layout on mobile

packages/rocketchat-lib/client/lib/roomExit.js

@@ -2,8 +2,11 @@
 this.roomExit = function() {
 	// 7370 - Close flex-tab when opening a room on mobile UI
 	if (window.matchMedia('(max-width: 500px)').matches) {
-		const templateData = Blaze.getData(document.querySelector('.flex-tab'));
+		const flex = document.querySelector('.flex-tab');
-		templateData && templateData.tabBar && templateData.tabBar.close();
+		if (flex) {
+			const templateData = Blaze.getData(flex);
+			templateData && templateData.tabBar && templateData.tabBar.close();
+		}
 	}
 	RocketChat.callbacks.run('roomExit');
 	BlazeLayout.render('main', {

packages/rocketchat-theme/client/imports/components/message-box.css

@@ -158,14 +158,21 @@
 			}
 		}
 	}
+
+	& [data-small] {
+		display: none;
+	}
 }
 
 @media (width <= 500px) {
 	.rc-message-box {
-		padding: 24px 0 0;
+		margin-top: 1rem;
+		padding: 0;
 
 		&__typing {
-			margin-left: 10px;
+			top: -1rem;
+
+			margin-left: 1rem;
 		}
 
 		&__toolbar-markdown {
@@ -175,8 +182,59 @@
 		&__container {
 			display: flex;
 
+			padding: var(--default-small-padding);
+			padding-bottom: calc(var(--default-small-padding) - 8px);
+
 			border-width: 0;
 			border-top-width: 1px;
+			flex-wrap: wrap;
+		}
+
+		& [data-desktop] {
+			display: none;
+		}
+
+		& [data-small] {
+			display: flex;
+		}
+
+		&__textarea {
+			flex: 1 0 100%;
+
+			margin-bottom: 10px;
+			order: 1;
+		}
+
+		&__action {
+			margin: 5px 10px;
+
+			font-size: 20px;
+		}
+
+		& [disabled] {
+			opacity: 0.4;
+		}
+
+		& .emoji-picker-icon {
+			width: initial;
+			padding-right: 10px;
+			order: 2;
+		}
+
+		&__action-label {
+			display: flex;
+			flex-direction: row;
+			flex: 1 1 auto;
+
+			font-size: 20px;
+			order: 3;
+		}
+
+		&__send {
+			flex: 0;
+
+			font-size: 20px;
+			order: 4;
 		}
 	}
 }

packages/rocketchat-theme/client/imports/general/variables.css

@@ -41,6 +41,7 @@
 	--status-busy: var(--color-error);
 	--status-invisible: var(--color-gray-medium);
 	--status-invisible-sidebar: var(--color-darkest);
+	--default-small-padding: 1rem;
 
 	/*
 	* Forms

packages/rocketchat-ui-message/client/messageBox.html

@@ -26,46 +26,18 @@
 						{{> icon block="rc-input__icon-svg" icon="emoji"}}
 					</div>
 					<textarea autofocus dir="auto" name="msg" maxlength="{{maxMessageLength}}" placeholder="{{_ 'Message'}}" rows="1" class="rc-message-box__textarea js-input-message autogrow-short"></textarea>
-					{{#if sendIcon}}
+					{{#unless disableSendIcon}}
-						<div class="rc-message-box__icon js-send">
+						<div class="rc-message-box__icon rc-message-box__send js-send" data-desktop>
 							{{> icon block="rc-input__icon-svg" icon="send"}}
 						</div>
 					{{else}}
-						<label class="rc-message-box__action-label" for="rc-message-box__action-input" data-popover="label">
+						{{> messageBox__actions}}
-						<input id="rc-message-box__action-input" type="checkbox" class="rc-popover-anchor" data-popover="anchor">
+					{{/unless}}
-						<div class="rc-popover js-message-actions" data-popover="popover">
+					{{# messageBox__actionsSmall}}
-							<div class="rc-popover__content">
+						<span class="rc-message-box__send js-message-action js-send" {{disableSendIcon}} data-small>
-								{{# each column in columns }}
+							{{> icon block="rc-message-box__action" icon="send"}}
-									<div class="rc-popover__column">
+						</span>
-										{{#each group in column }}
+					{{/messageBox__actionsSmall}}
-											<div class="rc-popover__column-wrapper">
-												<h3 class="rc-popover__title">{{_ group.name}}</h3>
-												<ul class="rc-popover__list">
-													{{#each group.actions }}
-														<li class="rc-popover__item" data-action="open" data-open="account">
-															<span class="rc-popover__icon">
-																{{#if icon}}
-																	{{> icon block="rc-popover__icon-element" icon=icon }}
-																{{/if}}
-															</span>
-															<span class="rc-popover__item-text">{{_ label}}</span>
-														</li>
-													{{/each}}
-												</ul>
-											</div>
-										{{/each}}
-									</div>
-								{{/each}}
-							</div>
-						</div>
-							{{#if columns}}
-								<div class="rc-message-box__icon">
-									{{> icon block="rc-input__icon-svg" icon="plus"}}
-								</div>
-							{{/if}}
-						</label>
-
-					{{/if}}
 				</label>
 				{{#unless embeddedVersion}}
 					{{#if showFormattingTips}}
@@ -118,3 +90,48 @@
 		{{/if}}
 	</div>
 </template>
+<template name="messageBox__actionsSmall">
+	<div class="js-message-actions rc-message-box__action-label" data-small>
+		{{# each actions }}
+			<span class="js-message-action">
+				{{> icon block="rc-message-box__action" icon=icon }}
+			</span>
+		{{/each}}
+	</div>
+	{{> Template.contentBlock}}
+</template>
+<template name="messageBox__actions">
+	<label class="rc-message-box__action-label" for="rc-message-box__action-input" data-popover="label" data-desktop>
+		<input id="rc-message-box__action-input" type="checkbox" class="rc-popover-anchor" data-popover="anchor">
+		<div class="rc-popover js-message-actions" data-popover="popover">
+			<div class="rc-popover__content">
+				{{# each column in columns }}
+					<div class="rc-popover__column">
+						{{#each group in column }}
+							<div class="rc-popover__column-wrapper">
+								<h3 class="rc-popover__title">{{_ group.name}}</h3>
+								<ul class="rc-popover__list">
+									{{#each group.actions }}
+										<li class="rc-popover__item" data-action="open" data-open="account">
+											{{#if icon}}
+												<span class="rc-popover__icon">
+													{{> icon block="rc-popover__icon-element" icon=icon }}
+												</span>
+											{{/if}}
+											<span class="rc-popover__item-text">{{_ label}}</span>
+										</li>
+									{{/each}}
+								</ul>
+							</div>
+						{{/each}}
+					</div>
+				{{/each}}
+			</div>
+		</div>
+		{{#if columns}}
+			<div class="rc-message-box__icon">
+				{{> icon block="rc-input__icon-svg" icon="plus"}}
+			</div>
+		{{/if}}
+	</label>
+</template>

packages/rocketchat-ui-message/client/messageBox.js

@@ -130,7 +130,11 @@ const markdownButtons = [
 	}
 ];
 
-Template.messageBox.helpers({
+const methods = {
+	actions() {
+		const groups = RocketChat.messageBox.actions.get();
+		return Object.keys(groups).reduce((ret, el) => ret.concat(groups[el]), []);
+	},
 	columns() {
 		const groups = RocketChat.messageBox.actions.get();
 		const sorted = Object.keys(groups).sort((a, b) => groups[b].length - groups[a].length);
@@ -153,7 +157,12 @@ Template.messageBox.helpers({
 		});
 
 		return columns;
-	},
+	}
+};
+
+Template.messageBox__actions.helpers(methods);
+Template.messageBox__actionsSmall.helpers(methods);
+Template.messageBox.helpers({
 	mdButtons() {
 		return markdownButtons.filter(button => !button.condition || button.condition());
 	},
@@ -275,8 +284,8 @@ Template.messageBox.helpers({
 	anonymousWrite() {
 		return (Meteor.userId() == null) && RocketChat.settings.get('Accounts_AllowAnonymousRead') === true && RocketChat.settings.get('Accounts_AllowAnonymousWrite') === true;
 	},
-	sendIcon() {
+	disableSendIcon() {
-		return Template.instance().sendIcon.get();
+		return !Template.instance().sendIcon.get() ? 'disabled' : '';
 	},
 	embeddedVersion() {
 		return RocketChat.Layout.isEmbedded();
@@ -334,8 +343,9 @@ function firefoxPasteUpload(fn) {
 }
 
 Template.messageBox.events({
-	'click .js-message-actions .rc-popover__item'(event, instance) {
+	'click .js-message-actions .rc-popover__item, click .js-message-actions .js-message-action'(event, instance) {
-		this.action.apply(this, [{rid: Template.parentData()._id, messageBox: instance.find('.rc-message-box'), element: $(event.target).parent('.rc-popover__item')[0], event}]);
+		const action = this.action || Template.parentData().action;
+		action.apply(this, [{rid: Template.parentData()._id, messageBox: instance.find('.rc-message-box'), element: event.currentTarget, event}]);
 	},
 	'click .join'(event) {
 		event.stopPropagation();

packages/rocketchat-ui-message/startup/messageBoxActions.js

@@ -5,7 +5,7 @@ import {VRecDialog} from 'meteor/rocketchat:ui-vrecord';
 
 RocketChat.messageBox.actions.add('Create_new', 'Video_message', {
 	icon: 'video',
-	condition: () => RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_VideoRecorderEnabled') && ((navigator.getUserMedia != null) || (navigator.webkitGetUserMedia != null)) && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/video\/webm|video\/\*/i)),
+	condition: () => (navigator.getUserMedia || navigator.webkitGetUserMedia) && RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_VideoRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/video\/webm|video\/\*/i)),
 	action({messageBox}) {
 		return VRecDialog.opened ? VRecDialog.close() : VRecDialog.open(messageBox);
 	}
@@ -13,10 +13,10 @@ RocketChat.messageBox.actions.add('Create_new', 'Video_message', {
 
 RocketChat.messageBox.actions.add('Create_new', 'Audio_message', {
 	icon: 'mic',
-	condition: () => RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && ((navigator.getUserMedia != null) || (navigator.webkitGetUserMedia != null)) && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/wav|audio\/\*/i)),
+	condition: () => (navigator.getUserMedia || navigator.webkitGetUserMedia) && RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/wav|audio\/\*/i)),
 	action({event, element}) {
 		event.preventDefault();
-		const icon = element.querySelector('.rc-popover__icon');
+		const icon = element;
 		if (chatMessages[RocketChat.openedRoom].recording) {
 			return AudioRecorder.stop(function(blob) {
 				icon.style.color = '';
@@ -31,10 +31,10 @@ RocketChat.messageBox.actions.add('Create_new', 'Audio_message', {
 				]);
 			});
 		}
-		icon.classList.add('pulse');
-		icon.style.color = 'red';
 		chatMessages[RocketChat.openedRoom].recording = true;
 		return AudioRecorder.start(function() {
+			icon.classList.add('pulse');
+			icon.style.color = 'red';
 		});
 	}
 });

packages/rocketchat-ui/client/lib/textarea-autogrow.js

@@ -10,7 +10,6 @@
 			var self = this;
 			var $self = $(self);
 			var minHeight = $self.height();
-			var noFlickerPad = $self.hasClass('autogrow-short') ? 0 : parseInt($self.css('lineHeight')) || 0;
 			var settings = $.extend({
 				preGrowCallback: null,
 				postGrowCallback: null
@@ -24,6 +23,9 @@
 			}
 
 			shadow.css({
+				position: 'absolute',
+				top: -10000,
+				left: -10000,
 				width: $self.width(),
 				fontSize: $self.css('fontSize'),
 				fontFamily: $self.css('fontFamily'),
@@ -54,9 +56,9 @@
 				}
 
 				shadow.css('width', $self.width());
-				shadow.html(val + (noFlickerPad === 0 ? '...' : '')); // Append '...' to resize pre-emptively.
+				shadow.html(val);
 
-				var newHeight = Math.max(shadow.height() + noFlickerPad + 1, minHeight);
+				var newHeight = Math.max(shadow.height() + 1, minHeight) + 1;
 				if (settings.preGrowCallback !== null) {
 					newHeight = settings.preGrowCallback($self, shadow, newHeight, minHeight);
 				}