ami/tl-vikunja
1
0
Fork 0
Code

feat: improve user component (#2687)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2687
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-11-12 10:51:35 +00:00 committed by konrad
parent 4c458a1ad0
commit 708ef2d72e
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/misc/user.vue
View File

@ -1,23 +1,27 @@
<template>
<div :class="{'is-inline': isInline}" class="user">
<div
class="user"
:class="{'is-inline': isInline}"
>
<img
:height="avatarSize"
:src="getAvatarUrl(user, avatarSize)"
:width="avatarSize"
alt=""
:alt="'Avatar of ' + displayName"
class="avatar"
v-tooltip="getDisplayName(user)"/>
<span class="username" v-if="showUsername">{{ getDisplayName(user) }}</span>
v-tooltip="displayName"
/>
<span class="username" v-if="showUsername">{{ displayName }}</span>
</div>
</template>
<script lang="ts" setup>
import type {PropType} from 'vue'
import {computed, type PropType} from 'vue'
import {getAvatarUrl, getDisplayName} from '@/models/user'
import type {IUser} from '@/modelTypes/IUser'
defineProps({
const props = defineProps({
user: {
type: Object as PropType<IUser>,
required: true,
@ -38,6 +42,8 @@ defineProps({
default: false,
},
})
const displayName = computed(() => getDisplayName(props.user))
</script>
<style lang="scss" scoped>
@ -47,12 +53,11 @@ defineProps({
&.is-inline {
display: inline;
}
}
img {
border-radius: 100%;
vertical-align: middle;
margin-right: .5rem;
}
.avatar {
border-radius: 100%;
vertical-align: middle;
margin-right: .5rem;
}
</style>