diff options
author | Joas Schilling <coding@schilljs.com> | 2021-06-18 16:07:43 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2021-06-18 16:09:47 +0300 |
commit | 300f4823846222559664868ee1366cae33a2c676 (patch) | |
tree | 28d8b8a4ffd064be4d2a3e10ce3b06cb843c9cf0 | |
parent | 3c9e0e144fe47b27efdae22e62b8576024041adc (diff) |
Correctly fallback in case of missing data
Signed-off-by: Joas Schilling <coding@schilljs.com>
-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; |