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

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

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