Improve read receipts modal UI

imports/message-read-receipt/client/readReceipts.css

@@ -0,0 +1,22 @@
+.read-receipts__user {
+	display: flex;
+	padding: 8px 8px;
+	align-items: center;
+}
+
+.read-receipts__name {
+	flex: 1 1 auto;
+	margin: 0 10px;
+	font-size: 16px;
+}
+
+.read-receipts__time {
+	font-size: 80%;
+}
+
+.read-receipts__user > .avatar {
+	width: 36px;
+	width: var(--sidebar-account-thumb-size);
+	height: 36px;
+	height: var(--sidebar-account-thumb-size);
+}

imports/message-read-receipt/client/readReceipts.html

@@ -1,8 +1,15 @@
 <template name="readReceipts">
-	{{#each receipts}}
-	<div class="message background-transparent-dark-hover">
-		<div class="user color-primary-font-color">{{user}}</div>
-		<span class="time color-info-font-color" title="{{dateTime}}">{{time}}</span>
-	</div>
-	{{/each}}
+	{{#if isLoading}}
+		{{> loading class="loading-animation--primary"}}
+	{{else}}
+		<ul class="read-receipts">
+			{{#each receipts}}
+				<li class="read-receipts__user background-transparent-dark-hover">
+					{{> avatar username=user.username}}
+					<div class="read-receipts__name color-primary-font-color">{{displayName}}</div>
+					<span class="read-receipts__time color-info-font-color" title="{{dateTime}}">{{time}}</span>
+				</li>
+			{{/each}}
+		</ul>
+	{{/if}}
 </template>

imports/message-read-receipt/client/readReceipts.js

@@ -1,17 +1,21 @@
 import { ReactiveVar } from 'meteor/reactive-var';
 import moment from 'moment';
 
+import './readReceipts.css';
 import './readReceipts.html';
 
 Template.readReceipts.helpers({
 	receipts() {
 		return Template.instance().readReceipts.get();
 	},
-	user() {
-		return this.user.name || this.user.username;
+	displayName() {
+		return (RocketChat.settings.get('UI_Use_Real_Name') && this.user.name) || this.user.username;
 	},
 	time() {
 		return moment(this.ts).format('L LTS');
+	},
+	isLoading() {
+		return Template.instance().loading.get();
 	}
 });
 
@@ -23,7 +27,9 @@ Template.readReceipts.onCreated(function readReceiptsOnCreated() {
 Template.readReceipts.onRendered(function readReceiptsOnRendered() {
 	this.loading.set(true);
 	Meteor.call('getReadReceipts', { messageId: this.data.messageId }, (error, result) => {
+		if (!error) {
+			this.readReceipts.set(result);
+		}
 		this.loading.set(false);
-		this.readReceipts.set(result);
 	});
 });

imports/message-read-receipt/server/api/methods/getReadReceipts.js

@@ -4,8 +4,17 @@ import { ReadReceipt } from '../../lib/ReadReceipt';
 
 Meteor.methods({
 	getReadReceipts({ messageId }) {
+		if (!Meteor.userId()) {
+			throw new Meteor.Error('error-invalid-user', 'Invalid user', { method: 'getReadReceipts' });
+		}
+
 		const message = RocketChat.models.Messages.findOneById(messageId);
 
+		const room = Meteor.call('canAccessRoom', message.rid, Meteor.userId());
+		if (!room) {
+			throw new Meteor.Error('error-invalid-room', 'Invalid room', { method: 'getReadReceipts' });
+		}
+
 		return ReadReceipt.getReceipts(message);
 	}
 });

packages/rocketchat-theme/client/imports/components/modal.css

@@ -50,6 +50,8 @@
 	}
 
 	&__content {
+		position: relative;
+
 		display: flex;
 
 		flex-direction: column;
@@ -58,6 +60,8 @@
 
 		animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
 		align-items: stretch;
+
+		min-height: 72px;
 	}
 
 	&__content-icon {

packages/rocketchat-theme/server/colors.less

@@ -882,11 +882,15 @@ label.required::after {
 
 .main-content,
 .flex-tab {
-	.loading-animation > div {
+	.loading-animation > .bounce {
 		background-color: @primary-font-color;
 	}
 }
 
+.loading-animation.loading-animation--primary > .bounce {
+	background-color: @primary-font-color;
+}
+
 @keyframes blink {
 	from {
 		color: @selection-color;

packages/rocketchat-ui-master/client/loading.html

@@ -1,7 +1,7 @@
 <template name="loading">
-	<div class="loading-animation">
-		<div class="bounce1"></div>
-		<div class="bounce2"></div>
-		<div class="bounce3"></div>
+	<div class="loading-animation {{class}}">
+		<div class="bounce bounce1"></div>
+		<div class="bounce bounce2"></div>
+		<div class="bounce bounce3"></div>
 	</div>
 </template>

packages/rocketchat-ui-master/public/loading.css

@@ -12,7 +12,7 @@
 	justify-content: center;
 }
 
-.loading-animation > div {
+.loading-animation > .bounce {
 	display: inline-block;
 
 	width: 10px;