frontend/src/components/misc/user.vue
Dominik Pschenitschni 0da7a46612
feat: formatting
- remove unneeded data props
- prepare for compiler warnings vue3; see https://v3.vuejs.org/guide/migration/v-bind.html
2021-09-24 21:46:42 +02:00

57 lines
858 B
Vue

<template>
<div :class="{'is-inline': isInline}" class="user">
<img
:height="avatarSize"
:src="user.getAvatarUrl(avatarSize)"
:width="avatarSize"
alt=""
class="avatar"
v-tooltip="user.getDisplayName()"/>
<span class="username" v-if="showUsername">{{ user.getDisplayName() }}</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: .5rem;
&.is-inline {
display: inline;
}
img {
border-radius: 100%;
vertical-align: middle;
margin-right: .5rem;
}
}
</style>