[FIX] Message popup responsiveness in slash commands (#11313)

* Fix icons in channels message popup * Fix descriptions in slash commands message popup * Add scrolling in message popup
RocketChat · Jul 5, 2018 · 3ebe15d · 3ebe15d
1 parent f0f7ef2
commit 3ebe15d
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -2614,6 +2614,33 @@
 
 .rc-old .message-popup-position {
 	position: relative;
+
+	.message-popup {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		max-height: 20rem;
+
+		.message-popup-items {
+			overflow-y: auto;
+
+			.popup-slash-command {
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+
+				&-format {
+					flex-grow: 1;
+				}
+
+				&-description {
+					flex-grow: 2;
+					font-style: italic;
+					text-align: right;
+				}
+			}
+		}
+	}
 }
 
 .rc-old .message-popup-items.preview-items {
@@ -2773,10 +2800,6 @@
 	border-radius: 10px;
 }
 
-.rc-old .popup-slash-command-description {
-	float: right;
-}
-
 .messages-box {
 	position: relative;
 

diff --git a/packages/rocketchat-ui-message/client/popup/messagePopup.js b/packages/rocketchat-ui-message/client/popup/messagePopup.js
@@ -81,6 +81,7 @@ Template.messagePopup.onCreated(function() {
 		if (previous != null) {
 			current.className = current.className.replace(/\sselected/, '').replace('sidebar-item__popup-active', '');
 			previous.className += ' selected sidebar-item__popup-active';
+			previous.scrollIntoView(false);
 			return template.value.set(previous.getAttribute('data-id'));
 		}
 	};
@@ -90,6 +91,7 @@ Template.messagePopup.onCreated(function() {
 		if (next && next.classList.contains('popup-item')) {
 			current.className = current.className.replace(/\sselected/, '').replace('sidebar-item__popup-active', '');
 			next.className += ' selected sidebar-item__popup-active';
+			next.scrollIntoView(false);
 			return template.value.set(next.getAttribute('data-id'));
 		}
 	};

diff --git a/packages/rocketchat-ui-message/client/popup/messagePopupChannel.html b/packages/rocketchat-ui-message/client/popup/messagePopupChannel.html
@@ -1,4 +1,4 @@
 <template name="messagePopupChannel">
-	<i class="{{icon}}"></i>
+	{{> icon icon=channelIcon }}
 	{{name}}
 </template>
diff --git a/packages/rocketchat-ui-message/client/popup/messagePopupChannel.js b/packages/rocketchat-ui-message/client/popup/messagePopupChannel.js
@@ -1,5 +1,5 @@
 Template.messagePopupChannel.helpers({
-	icon() {
+	channelIcon() {
 		return RocketChat.roomTypes.getIcon(this.t);
 	}
 });
diff --git a/packages/rocketchat-ui-message/client/popup/messagePopupSlashCommand.html b/packages/rocketchat-ui-message/client/popup/messagePopupSlashCommand.html
@@ -1,4 +1,6 @@
 <template name="messagePopupSlashCommand">
-	<strong>/{{_id}}</strong>{{#if params}} {{params}}{{/if}}
-	<div class="popup-slash-command-description"><i>{{description}}</i></div>
-</template>
+	<div class="popup-slash-command">
+		<div class="popup-slash-command-format"><strong>/{{_id}}</strong>{{#if params}} {{params}}{{/if}}</div>
+		<div class="popup-slash-command-description">{{description}}</div>
+	</div>
+</template>