summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link_new.vue
diff options
context:
space:
mode:
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.vue122
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>