diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
commit | 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 (patch) | |
tree | d7f2700abe6b4ffcb2dcfc80631b2d87d0609239 /app/assets/javascripts/design_management/components/list/item.vue | |
parent | 446d496a6d000c73a304be52587cd9bbc7493136 (diff) |
Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42
Diffstat (limited to 'app/assets/javascripts/design_management/components/list/item.vue')
-rw-r--r-- | app/assets/javascripts/design_management/components/list/item.vue | 23 |
1 files changed, 16 insertions, 7 deletions
diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue index fa09c7c15cc..5eabe9ef1bc 100644 --- a/app/assets/javascripts/design_management/components/list/item.vue +++ b/app/assets/javascripts/design_management/components/list/item.vue @@ -1,7 +1,7 @@ <script> -import { GlLoadingIcon, GlIcon, GlIntersectionObserver } from '@gitlab/ui'; -import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; +import { GlLoadingIcon, GlIcon, GlIntersectionObserver, GlTooltipDirective } from '@gitlab/ui'; import { n__, __ } from '~/locale'; +import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; import { DESIGN_ROUTE_NAME } from '../../router/constants'; export default { @@ -11,6 +11,9 @@ export default { GlIcon, Timeago, }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { id: { type: [Number, String], @@ -130,7 +133,7 @@ export default { <div class="card-body gl-p-0 gl-display-flex gl-align-items-center gl-justify-content-center gl-overflow-hidden gl-relative" > - <div v-if="icon.name" data-testid="designEvent" class="design-event gl-absolute"> + <div v-if="icon.name" data-testid="design-event" class="gl-top-5 gl-right-5 gl-absolute"> <span :title="icon.tooltip" :aria-label="icon.tooltip"> <gl-icon :name="icon.name" @@ -153,9 +156,10 @@ export default { v-show="showImage" :src="imageLink" :alt="filename" - class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img" + class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img" data-qa-selector="design_image" :data-qa-filename="filename" + :data-testid="`design-img-${id}`" @load="onImageLoad" @error="onImageError" /> @@ -163,9 +167,14 @@ export default { </div> <div class="card-footer gl-display-flex gl-w-full"> <div class="gl-display-flex gl-flex-direction-column str-truncated-100"> - <span class="gl-font-weight-bold str-truncated-100" data-qa-selector="design_file_name">{{ - filename - }}</span> + <span + v-gl-tooltip + class="gl-font-weight-bold str-truncated-100" + data-qa-selector="design_file_name" + :data-testid="`design-img-filename-${id}`" + :title="filename" + >{{ filename }}</span + > <span v-if="updatedAt" class="str-truncated-100"> {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" /> </span> |