diff options
Diffstat (limited to 'packages/frontend/src/components/MkUsersTooltip.vue')
| -rw-r--r-- | packages/frontend/src/components/MkUsersTooltip.vue | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkUsersTooltip.vue b/packages/frontend/src/components/MkUsersTooltip.vue new file mode 100644 index 0000000000..f0384e2d65 --- /dev/null +++ b/packages/frontend/src/components/MkUsersTooltip.vue @@ -0,0 +1,51 @@ +<template> +<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')"> + <div class="beaffaef"> + <div v-for="u in users" :key="u.id" class="user"> + <MkAvatar class="avatar" :user="u"/> + <MkUserName class="name" :user="u" :nowrap="true"/> + </div> + <div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div> + </div> +</MkTooltip> +</template> + +<script lang="ts" setup> +import { } from 'vue'; +import MkTooltip from './MkTooltip.vue'; + +defineProps<{ + showing: boolean; + users: any[]; // TODO + count: number; + targetElement: HTMLElement; +}>(); + +const emit = defineEmits<{ + (ev: 'closed'): void; +}>(); +</script> + +<style lang="scss" scoped> +.beaffaef { + font-size: 0.9em; + text-align: left; + + > .user { + line-height: 24px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:not(:last-child) { + margin-bottom: 3px; + } + + > .avatar { + width: 24px; + height: 24px; + margin-right: 3px; + } + } +} +</style> |