Improve read receipts modal UI

pull/9717/head
Diego Sampaio 7 years ago
parent d9ce4c9a62
commit a3e34040ce
No known key found for this signature in database
GPG Key ID: E060152B30502562
  1. 22
      imports/message-read-receipt/client/readReceipts.css
  2. 19
      imports/message-read-receipt/client/readReceipts.html
  3. 12
      imports/message-read-receipt/client/readReceipts.js
  4. 9
      imports/message-read-receipt/server/api/methods/getReadReceipts.js
  5. 4
      packages/rocketchat-theme/client/imports/components/modal.css
  6. 6
      packages/rocketchat-theme/server/colors.less
  7. 8
      packages/rocketchat-ui-master/client/loading.html
  8. 2
      packages/rocketchat-ui-master/public/loading.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);
}

@ -1,8 +1,15 @@
<template name="readReceipts"> <template name="readReceipts">
{{#each receipts}} {{#if isLoading}}
<div class="message background-transparent-dark-hover"> {{> loading class="loading-animation--primary"}}
<div class="user color-primary-font-color">{{user}}</div> {{else}}
<span class="time color-info-font-color" title="{{dateTime}}">{{time}}</span> <ul class="read-receipts">
</div> {{#each receipts}}
{{/each}} <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> </template>

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

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

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

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

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

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

Loading…
Cancel
Save