diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue | 40 |
1 files changed, 16 insertions, 24 deletions
diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue index 5d7e9557aff..4f1b1c758b2 100644 --- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue +++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue @@ -1,9 +1,9 @@ <script> import '~/commons/bootstrap'; -import { GlTooltip, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlTooltip, GlTooltipDirective } from '@gitlab/ui'; import { sprintf } from '~/locale'; -import IssueMilestone from '../../components/issue/issue_milestone.vue'; -import IssueAssignees from '../../components/issue/issue_assignees.vue'; +import IssueMilestone from './issue_milestone.vue'; +import IssueAssignees from './issue_assignees.vue'; import relatedIssuableMixin from '../../mixins/related_issuable_mixin'; import CiIcon from '../ci_icon.vue'; @@ -13,6 +13,7 @@ export default { IssueMilestone, IssueAssignees, CiIcon, + GlIcon, GlTooltip, }, directives: { @@ -44,6 +45,9 @@ export default { visibility: 'hidden', }; }, + iconClasses() { + return `${this.iconClass} ic-${this.iconName}`; + }, }, }; </script> @@ -54,30 +58,29 @@ export default { 'issuable-info-container': !canReorder, 'card-body': canReorder, }" - class="item-body d-flex align-items-center p-2 p-lg-3 py-xl-2 px-xl-3" + class="item-body d-flex align-items-center py-2 px-3" > <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap"> <!-- Title area: Status icon (XL) and title --> - <div class="item-title d-flex align-items-center mb-xl-0"> - <span ref="iconElementXL"> - <icon + <div class="item-title d-flex align-items-xl-center mb-xl-0"> + <div ref="iconElementXL"> + <gl-icon v-if="hasState" ref="iconElementXL" - :class="iconClass" + class="mr-2 d-block" + :class="iconClasses" :name="iconName" - :size="16" :title="stateTitle" :aria-label="state" /> - </span> + </div> <gl-tooltip :target="() => $refs.iconElementXL"> <span v-html="stateTitle"></span> </gl-tooltip> - <icon + <gl-icon v-if="confidential" v-gl-tooltip name="eye-slash" - :size="16" :title="__('Confidential')" class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0" :aria-label="__('Confidential')" @@ -97,17 +100,6 @@ export default { <div class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2" > - <span ref="iconElement"> - <icon - v-if="hasState" - :class="iconClass" - :name="iconName" - :title="stateTitle" - :aria-label="state" - data-html="true" - class="d-xl-none" - /> - </span> <gl-tooltip :target="() => this.$refs.iconElement"> <span v-html="stateTitle"></span> </gl-tooltip> @@ -159,7 +151,7 @@ export default { v-gl-tooltip :disabled="removeDisabled" type="button" - class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button mr-xl-0 align-self-xl-center" + class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button" data-qa-selector="remove_related_issue_button" :title="__('Remove')" :aria-label="__('Remove')" |