diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link_new.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link_new.vue | 122 |
1 files changed, 0 insertions, 122 deletions
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link_new.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link_new.vue deleted file mode 100644 index 83551c689c4..00000000000 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link_new.vue +++ /dev/null @@ -1,122 +0,0 @@ -<script> -/* This is a re-usable vue component for rendering a user avatar wrapped in - a clickable link (likely to the user's profile). The link, image, and - tooltip can be configured by props passed to this component. - - Sample configuration: - - <user-avatar-link - :link-href="userProfileUrl" - :img-src="userAvatarSrc" - :img-alt="tooltipText" - :img-size="20" - :tooltip-text="tooltipText" - :tooltip-placement="top" - :username="username" - /> - -*/ - -import { GlAvatarLink, GlTooltipDirective } from '@gitlab/ui'; -import UserAvatarImage from './user_avatar_image.vue'; - -export default { - name: 'UserAvatarLinkNew', - components: { - UserAvatarImage, - GlAvatarLink, - }, - directives: { - GlTooltip: GlTooltipDirective, - }, - props: { - lazy: { - type: Boolean, - required: false, - default: false, - }, - linkHref: { - type: String, - required: false, - default: '', - }, - imgSrc: { - type: String, - required: false, - default: '', - }, - imgAlt: { - type: String, - required: false, - default: '', - }, - imgCssClasses: { - type: String, - required: false, - default: '', - }, - imgSize: { - type: [Number, Object], - required: false, - default: 20, - }, - tooltipText: { - type: String, - required: false, - default: '', - }, - tooltipPlacement: { - type: String, - required: false, - default: 'top', - }, - username: { - type: String, - required: false, - default: '', - }, - enforceGlAvatar: { - type: Boolean, - required: false, - }, - }, - computed: { - shouldShowUsername() { - return this.username.length > 0; - }, - avatarTooltipText() { - return this.shouldShowUsername ? '' : this.tooltipText; - }, - }, -}; -</script> - -<template> - <gl-avatar-link :href="linkHref" class="user-avatar-link"> - <user-avatar-image - :img-src="imgSrc" - :img-alt="imgAlt" - :css-classes="imgCssClasses" - :size="imgSize" - :tooltip-text="avatarTooltipText" - :tooltip-placement="tooltipPlacement" - :lazy="lazy" - :enforce-gl-avatar="enforceGlAvatar" - > - <slot></slot> - </user-avatar-image> - - <span - v-if="shouldShowUsername" - v-gl-tooltip - :title="tooltipText" - :tooltip-placement="tooltipPlacement" - class="gl-ml-3" - data-testid="user-avatar-link-username" - > - {{ username }} - </span> - - <slot name="avatar-badge"></slot> - </gl-avatar-link> -</template> |