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 120 | <!-- eslint-disable vue/multi-word-component-names --> <script> import { GlLoadingIcon, GlTooltipDirective, GlIcon, GlButton } from '@gitlab/ui'; import { s__ } from '~/locale'; export default { i18n: { buttonLabel: s__('Badges|Reload badge image'), }, // name: 'Badge' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25 // eslint-disable-next-line @gitlab/require-i18n-strings name: 'Badge', components: { GlIcon, GlLoadingIcon, GlButton, }, directives: { GlTooltip: GlTooltipDirective, }, props: { name: { type: String, required: false, default: '', }, imageUrl: { type: String, required: true, }, linkUrl: { type: String, required: true, }, }, data() { return { hasError: false, isLoading: true, numRetries: 0, }; }, computed: { imageUrlWithRetries() { Iif (this.numRetries === 0) { return this.imageUrl; } return `${this.imageUrl}#retries=${this.numRetries}`; }, }, watch: { imageUrl() { this.hasError = false; this.isLoading = true; this.numRetries = 0; }, }, methods: { onError() { this.isLoading = false; this.hasError = true; }, onLoad() { this.isLoading = false; }, reloadImage() { this.hasError = false; this.isLoading = true; this.numRetries += 1; }, }, }; </script> <template> <div> <a v-show="!isLoading && !hasError" :href="linkUrl" target="_blank" rel="noopener noreferrer" data-testid="badge-image-link" :data-qa-link-url="linkUrl" > <img :src="imageUrlWithRetries" class="project-badge" aria-hidden="true" @load="onLoad" @error="onError" /> </a> <gl-loading-icon v-show="isLoading" size="sm" :inline="true" /> <div v-show="hasError" class="btn-group"> <div class="btn btn-default btn-sm disabled"> <gl-icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" /> </div> <div class="btn btn-default btn-sm disabled"> <span class="gl-ml-3 gl-mr-3">{{ s__('Badges|No badge image') }}</span> </div> </div> <gl-button v-show="hasError" v-gl-tooltip.hover :title="$options.i18n.buttonLabel" :aria-label="$options.i18n.buttonLabel" category="tertiary" variant="confirm" type="button" icon="retry" size="small" @click="reloadImage" /> </div> </template> |