diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-09-25 18:53:46 +0200 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-09-25 18:53:46 +0200 |
| commit | b76cc497653f14ef036151ea85879ef9a8a7ad4b (patch) | |
| tree | 7ab8a4c6ae06d4cf2f3a9eba70b99e26dc8ef800 /src | |
| parent | d29267b00b5dc766e3d47448085650cb416fc10d (diff) | |
Use inner div for avatar
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ContentList/ContentListItem.vue | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/src/components/ContentList/ContentListItem.vue b/src/components/ContentList/ContentListItem.vue index 2405bc4b..88e6bb78 100644 --- a/src/components/ContentList/ContentListItem.vue +++ b/src/components/ContentList/ContentListItem.vue @@ -7,8 +7,10 @@ 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="{ 'backgroundImage': avatarUrl, 'backgroundColor': colorAvatar }" class="app-content-list-item-icon"> - {{ initial }} + <div :style="{ 'backgroundColor': colorAvatar }" class="app-content-list-item-icon"> + {{ contact.displayName | firstLetter }} + <!-- try to fetch the avatar only if the contact exists on the server --> + <div v-if="contact.dav" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" /> </div> <div class="app-content-list-item-line-one">{{ contact.displayName }}</div> <div v-if="contact.email" class="app-content-list-item-line-two">{{ contact.email }}</div> @@ -20,6 +22,11 @@ <script> export default { name: 'ContentListItem', + filters: { + firstLetter(value) { + return value.charAt(0) + } + }, props: { contact: { type: Object, @@ -48,13 +55,6 @@ export default { }, avatarUrl() { return `url(${this.contact.url}?photo)` - }, - initial() { - if (this.avatarUrl) { - return '' - } else { - return this.contact.displayName.charAt(0) - } } }, methods: { |