Use inner div for avatar

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

3 files changed, 44 insertions, 9 deletions

diff --git a/css/ContentListItem.scss b/css/ContentListItem.scss
new file mode 100644
index 00000000..510fc107
--- /dev/null
+++ b/css/ContentListItem.scss
@@ -0,0 +1,34 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.app-content-list-item-icon {
+	overflow: hidden;
+	&__avatar {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: inherit;
+		width: inherit;
+		background-size: cover;
+		cursor: pointer;
+	}
+}
\ No newline at end of file
diff --git a/css/contacts.scss b/css/contacts.scss
index 9d0ff38f..0087327e 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -43,6 +43,7 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
 @import 'settings/settings-addressbook-shares';
 @import 'settings/settings-addressbook-sharee';
 @import 'ContactDetails';
+@import 'ContentListItem';
 @import 'Properties/Properties';
 @import 'Properties/PropertyTitle';
 @import 'importScreen';
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: {