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 110 111 112 113 114 115 116 117 118 119 | 145x | <script> /* This is a re-usable vue component for rendering a user avatar that does not need to link to the user's profile. The image and an optional tooltip can be configured by props passed to this component. Sample configuration: <user-avatar lazy :img-src="userAvatarSrc" :img-alt="tooltipText" :tooltip-text="tooltipText" tooltip-placement="top" :size="24" /> */ import { GlTooltip, GlAvatar } from '@gitlab/ui'; import { isObject } from 'lodash'; import defaultAvatarUrl from 'images/no_avatar.png'; import { __ } from '~/locale'; import { placeholderImage } from '~/lazy_loader'; /* We force a mininum avatar size to prevent blurryness of certain avatars especially on retina displays. If we adjust this make sure to adjust it in app/helpers/avatars_helper.rb as well. */ const MIN_AVATAR_SIZE_TO_NOT_BE_BLURRY = 48; export default { name: 'UserAvatarImage', components: { GlTooltip, GlAvatar, }, props: { lazy: { type: Boolean, required: false, default: false, }, imgSrc: { type: String, required: false, default: defaultAvatarUrl, }, cssClasses: { type: String, required: false, default: '', }, imgAlt: { type: String, required: false, default: __('user avatar'), }, size: { type: [Number, Object], required: true, }, tooltipText: { type: String, required: false, default: '', }, tooltipPlacement: { type: String, required: false, default: 'top', }, }, computed: { // API response sends null when gravatar is disabled and // we provide an empty string when we use it inside user avatar link. // In both cases we should render the defaultAvatarUrl sanitizedSource() { let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc; // Only adds the width to the URL if its not a base64 data image if (!(baseSrc.indexOf('data:') === 0) && !baseSrc.includes('?')) baseSrc += `?width=${this.maximumSize}`; return baseSrc; }, maximumSize() { if (isObject(this.size)) { return Math.max(MIN_AVATAR_SIZE_TO_NOT_BE_BLURRY, ...Object.values(this.size)); } return Math.max(MIN_AVATAR_SIZE_TO_NOT_BE_BLURRY, this.size); }, resultantSrcAttribute() { return this.lazy ? placeholderImage : this.sanitizedSource; }, }, }; </script> <template> <span ref="userAvatar"> <gl-avatar :class="{ lazy: lazy, [cssClasses]: true, }" :src="resultantSrcAttribute" :data-src="sanitizedSource" :size="size" :alt="imgAlt" /> <gl-tooltip v-if="tooltipText || $scopedSlots.default" :target="() => $refs.userAvatar" :placement="tooltipPlacement" boundary="window" > <slot>{{ tooltipText }}</slot> </gl-tooltip> </span> </template> |