diff options
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue | 22 |
1 files changed, 18 insertions, 4 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue index 1b7a0e1b0..efc3f1e34 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue @@ -26,12 +26,15 @@ :aria-label="contactAriaLabel" target="_blank"> <img v-if="contactPhotoFromBase64" - class="contact__image" + :class="{ + 'contact__image': contactHasPhoto, + 'contact__icon': !contactHasPhoto, + }" alt="" :src="contactPhotoFromBase64"> <div class="contact__lineone"> <div class="title"> - {{ contactName }} + {{ displayName }} </div> </div> </a> @@ -75,12 +78,18 @@ export default { }, computed: { + contactHasPhoto() { + return this.contactPhotoMimetype && this.contactPhoto + }, contactPhotoFromBase64() { - if (!this.contactPhotoMimetype || !this.contactPhoto) { - return null + if (!this.contactHasPhoto) { + return OC.MimeType.getIconUrl('text/vcard') } return 'data:' + this.contactPhotoMimetype + ';base64,' + this.contactPhoto }, + displayName() { + return this.contactName || this.name + }, contactAriaLabel() { return t('spreed', 'Contact') }, @@ -111,6 +120,11 @@ export default { max-width: 44px; max-height: 44px; } + &__icon { + display: inline-block; + width: 44px; + height: 44px; + } &__lineone { height: 30px; display: flex; |