Merge pull request #1074 from nextcloud/feature/vue-avatar

Add simple Vue avatar component

js/components/Avatar.vue

+<template>
+	<div class="avatar"
+		 :data-user="label"
+		 data-size="32"
+		 v-placeholder="label">{{ label | firstCharacter }}
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "Avatar",
+		props: [
+			'label'
+		],
+		directives: {
+			placeholder: {
+				inserted: function (el, binding) {
+					$(el).imageplaceholder(binding.value, binding.value);
+				}
+			}
+		},
+		filters: {
+			firstCharacter (val) {
+				return val.charAt(0);
+			}
+		}
+	}
+</script>

js/components/MessageListItem.vue

 <template>
 	<div class="app-content-list-item">
+		<div class="app-content-list-item-icon">
+			<Avatar :label="from"/>
+		</div>
 		<div class="app-content-list-item-line-one"
 			 :title="from">
 			{{from}}
@@ -9,16 +12,21 @@
 			{{subject}}
 		</div>
 		<div class="app-content-list-item-details date">
-			<Moment timestamp="1536048354000" />
+			<Moment timestamp="1536048354000"/>
 		</div>
 	</div>
 </template>
 
 <script>
+	import Avatar from "./Avatar";
 	import Moment from "./Moment";
+
 	export default {
 		name: "MessageListItem",
-		components: {Moment},
+		components: {
+			Avatar,
+			Moment
+		},
 		props: [
 			'from',
 			'subject',