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 | 10x 4x 4x 4x 4x | <script>
import { GlAvatarLink, GlAvatarLabeled, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
import PrivateIcon from '../icons/private_icon.vue';
import { AVATAR_SIZE } from '../../constants';
export default {
name: 'GroupAvatar',
components: { GlAvatarLink, GlAvatarLabeled, PrivateIcon },
directives: {
GlTooltip: GlTooltipDirective,
},
i18n: {
private: __('Private'),
},
props: {
member: {
type: Object,
required: true,
},
},
computed: {
group() {
return this.member.sharedWithGroup;
},
isPrivate() {
return this.member.isSharedWithGroupPrivate;
},
avatarLabeledProps() {
const label = this.isPrivate ? this.$options.i18n.private : this.group.fullName;
return {
label,
src: this.group.avatarUrl,
alt: label,
size: AVATAR_SIZE,
entityName: this.isPrivate ? this.$options.i18n.private : this.group.name,
entityId: this.group.id,
};
},
},
};
</script>
<template>
<div v-if="isPrivate">
<gl-avatar-labeled v-bind="avatarLabeledProps">
<template #meta>
<div class="gl-p-1">
<private-icon />
</div>
</template>
</gl-avatar-labeled>
</div>
<gl-avatar-link v-else :href="group.webUrl">
<gl-avatar-labeled v-bind="avatarLabeledProps" />
</gl-avatar-link>
</template>
|