diff options
| -rw-r--r-- | css/ContactDetailsAvatar.scss | 2 | ||||
| -rw-r--r-- | src/components/ContactsList/ContactsListItem.vue | 30 |
2 files changed, 23 insertions, 9 deletions
diff --git a/css/ContactDetailsAvatar.scss b/css/ContactDetailsAvatar.scss index d2fa69bc..e1523e62 100644 --- a/css/ContactDetailsAvatar.scss +++ b/css/ContactDetailsAvatar.scss @@ -55,6 +55,8 @@ background-repeat: no-repeat; background-position: center; background-size: cover; + // White background for avatars with transparency, also in dark theme + background-color: #fff; } &__options { position: absolute; diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index b6ecad5b..fef0a9ca 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -11,10 +11,12 @@ class="app-content-list-item-checkbox checkbox" @keypress.enter.space.prevent.stop="toggleSelect"> <label :for="contact.key" @click.prevent.stop="toggleSelect" @keypress.enter.space.prevent.stop="toggleSelect" /> --> - <div :style="{ 'backgroundColor': colorAvatar }" class="app-content-list-item-icon"> - {{ contact.displayName | firstLetter }} + <div :style="avatarStyle" class="app-content-list-item-icon"> <!-- try to fetch the avatar only if the contact exists on the server --> <div v-if="hasPhoto" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" /> + <template v-else> + {{ contact.displayName | firstLetter }} + </template> </div> <!-- contact data --> @@ -62,18 +64,28 @@ export default { return this.contact.dav && (this.contact.dav.hasphoto || this.contact.photo) }, - /** - * avatar color based on server toRgb method and the displayName - * @returns {string} the color in css format - */ - colorAvatar() { + avatarStyle() { + if (this.hasPhoto) { + return { + backgroundColor: '#fff', + // The contact photo gets cropped in a circular shape, which might look odd with transparent photos. + // This box shadow ensures that there's always a very faint edge hinting at the circle. + boxShadow: '0 0 5px rgba(0, 0, 0, 0.05) inset', + } + } + try { const color = this.contact.uid.toRgb() - return `rgb(${color.r}, ${color.g}, ${color.b})` + return { + backgroundColor: `rgb(${color.r}, ${color.g}, ${color.b})`, + } } catch (e) { - return 'grey' + return { + backgroundColor: 'grey', + } } }, + avatarUrl() { if (this.contact.photo) { return `url(${this.contact.photoUrl})` |