Restructure components

src/components/misc/notification.vue

@@ -0,0 +1,49 @@
+<template>
+	<notifications position="bottom left">
+		<template slot="body" slot-scope="props">
+			<div :class="['vue-notification-template', 'vue-notification', props.item.type]" @click="close(props)">
+				<div
+						v-if="props.item.title"
+						class="notification-title"
+						v-html="props.item.title"
+				>
+				</div>
+				<div
+						class="notification-content"
+						v-html="props.item.text"
+				>
+				</div>
+				<div class="buttons is-right" v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
+					<button
+							class="button noshadow is-small"
+							@click="action.callback"
+							v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
+						{{ action.title }}
+					</button>
+				</div>
+			</div>
+		</template>
+	</notifications>
+</template>
+
+<script>
+	export default {
+		name: 'notification',
+		methods: {
+			close(props) {
+				props.close()
+			},
+		},
+	}
+</script>
+
+<style scoped>
+
+	.vue-notification {
+		z-index: 9999;
+	}
+
+	.buttons {
+		margin-top: .5em;
+	}
+</style>

src/components/misc/user.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="user" :class="{'is-inline': isInline}">
+		<img :src="user.getAvatarUrl(avatarSize)" class="avatar" alt="" v-tooltip="user.username" :width="avatarSize" :height="avatarSize"/>
+		<span v-if="showUsername" class="username">{{ user.username }}</span>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'user',
+		props: {
+			user: {
+				required: true,
+				type: Object,
+			},
+			showUsername: {
+				required: false,
+				type: Boolean,
+				default: true,
+			},
+			avatarSize: {
+				required: false,
+				type: Number,
+				default: 50,
+			},
+			isInline: {
+				required: false,
+				type: Boolean,
+				default: false,
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.user {
+		margin: .5em;
+
+		&.is-inline {
+			display: inline;
+		}
+
+		img {
+			-webkit-border-radius: 100%;
+			-moz-border-radius: 100%;
+			border-radius: 100%;
+
+			vertical-align: middle;
+			margin-right: .5em;
+		}
+	}
+</style>