render avatar on message tiles

This commit is contained in:
Bruno Windels 2020-08-20 16:03:52 +02:00
parent 225d46fad6
commit 59bdd2b015
3 changed files with 39 additions and 5 deletions

View File

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import {SimpleTile} from "./SimpleTile.js"; import {SimpleTile} from "./SimpleTile.js";
import {getIdentifierColorNumber} from "../../../../avatar.js"; import {getIdentifierColorNumber, avatarInitials} from "../../../../avatar.js";
export class MessageTile extends SimpleTile { export class MessageTile extends SimpleTile {
constructor(options) { constructor(options) {
@ -35,10 +35,21 @@ export class MessageTile extends SimpleTile {
return this._entry.displayName || this._entry.sender; return this._entry.displayName || this._entry.sender;
} }
get senderColorNumber() { get avatarColorNumber() {
return getIdentifierColorNumber(this._entry.sender); return getIdentifierColorNumber(this._entry.sender);
} }
get avatarUrl() {
if (this._entry.avatarUrl) {
return this._mediaRepository.mxcUrlThumbnail(this._entry.avatarUrl, 30, 30, "crop");
}
return null;
}
get avatarLetter() {
return avatarInitials(this.sender);
}
get date() { get date() {
return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"}); return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"});
} }

View File

@ -297,15 +297,25 @@ ul.Timeline > li:not(.continuation) {
margin-top: 7px; margin-top: 7px;
} }
ul.Timeline > li.continuation .sender { ul.Timeline > li.continuation .profile {
display: none; display: none;
} }
.message-container { .message-container {
padding: 1px 10px 0px 10px; padding: 1px 10px 0px 10px;
margin: 5px 10px 0 10px; margin: 5px 10px 0 10px;
} }
.message-container .profile {
display: flex;
align-items: center;
}
.message-container .avatar {
--avatar-size: 25px;
}
.TextMessageView.continuation .message-container { .TextMessageView.continuation .message-container {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -313,6 +323,7 @@ ul.Timeline > li.continuation .sender {
.message-container .sender { .message-container .sender {
margin: 6px 0; margin: 6px 0;
margin-left: 6px;
font-weight: bold; font-weight: bold;
line-height: 1.7rem; line-height: 1.7rem;
} }

View File

@ -22,8 +22,20 @@ export function renderMessage(t, vm, children) {
pending: vm.isPending, pending: vm.isPending,
continuation: vm => vm.isContinuation, continuation: vm => vm.isContinuation,
}; };
const sender = t.div({className: `sender usercolor${vm.senderColorNumber}`}, vm.sender);
children = [sender].concat(children); const hasAvatar = !!vm.avatarUrl;
const avatarClasses = {
avatar: true,
[`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
};
const avatarContent = hasAvatar ?
t.img({src: vm.avatarUrl, width: "30", height: "30", title: vm.sender}) :
vm.avatarLetter;
const profile = t.div({className: "profile"}, [
t.div({className: avatarClasses}, [avatarContent]),
t.div({className: `sender usercolor${vm.avatarColorNumber}`}, vm.sender)
]);
children = [profile].concat(children);
return t.li( return t.li(
{className: classes}, {className: classes},
t.div({className: "message-container"}, children) t.div({className: "message-container"}, children)