Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 11x 27x 26x 26x 26x | <script> import { GlAvatarLink, GlAvatarLabeled, GlBadge } from '@gitlab/ui'; import SafeHtml from '~/vue_shared/directives/safe_html'; import { generateBadges } from 'ee_else_ce/members/utils'; import { glEmojiTag } from '~/emoji'; import { __ } from '~/locale'; import { isUserBusy } from '~/set_status_modal/utils'; import { AVATAR_SIZE } from '../../constants'; export default { name: 'UserAvatar', i18n: { busy: __('Busy'), }, avatarSize: AVATAR_SIZE, orphanedUserLabel: __('Orphaned member'), safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, components: { GlAvatarLink, GlAvatarLabeled, GlBadge, }, directives: { SafeHtml, }, inject: ['canManageMembers'], props: { member: { type: Object, required: true, }, isCurrentUser: { type: Boolean, required: true, }, }, computed: { user() { return this.member.user; }, badges() { return generateBadges({ member: this.member, isCurrentUser: this.isCurrentUser, canManageMembers: this.canManageMembers, }).filter((badge) => badge.show); }, statusEmoji() { return this.user?.showStatus && this.user?.status?.emoji; }, isUserBusy() { return isUserBusy(this.user?.availability || ''); }, }, methods: { glEmojiTag, }, }; </script> <template> <gl-avatar-link v-if="user" class="js-user-link" :href="user.webUrl" :data-user-id="user.id" :data-username="user.username" :data-email="user.email" > <gl-avatar-labeled :label="user.name" :sub-label="`@${user.username}`" :src="user.avatarUrl" :alt="user.name" :size="$options.avatarSize" :entity-name="user.name" :entity-id="user.id" > <template #meta> <div v-if="isUserBusy" class="gl-p-1"> <span class="gl-text-gray-500 gl-font-sm gl-font-weight-normal" >({{ $options.i18n.busy }})</span > </div> <div v-if="statusEmoji" class="gl-p-1"> <span v-safe-html:[$options.safeHtmlConfig]="glEmojiTag(statusEmoji)" class="user-status-emoji gl-mr-0" ></span> </div> <div v-for="badge in badges" :key="badge.text" class="gl-p-1"> <gl-badge size="sm" :variant="badge.variant"> {{ badge.text }} </gl-badge> </div> </template> </gl-avatar-labeled> </gl-avatar-link> <gl-avatar-labeled v-else :label="$options.orphanedUserLabel" :alt="$options.orphanedUserLabel" :size="$options.avatarSize" :entity-name="$options.orphanedUserLabel" :entity-id="member.id" /> </template> |