diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/issue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue | 35 |
2 files changed, 25 insertions, 16 deletions
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue index 1524b313f9f..3006ba83f98 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue @@ -86,12 +86,13 @@ export default { :img-css-classes="imgCssClasses" :img-src="avatarUrl(assignee)" :img-size="iconSize" - class="js-no-trigger" + class="js-no-trigger author-link" tooltip-placement="bottom" + data-qa-selector="assignee_link" > <span class="js-assignee-tooltip"> <span class="bold d-block">{{ __('Assignee') }}</span> {{ assignee.name }} - <span class="text-white-50">@{{ assignee.username }}</span> + <span v-if="assignee.username" class="text-white-50">@{{ assignee.username }}</span> </span> </user-avatar-link> <span @@ -100,6 +101,7 @@ export default { :title="assigneesCounterTooltip" class="avatar-counter" data-placement="bottom" + data-qa-selector="avatar_counter_content" >{{ assigneeCounterLabel }}</span > </div> 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 caf13bc898b..1662e7923b7 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 @@ -4,6 +4,7 @@ import { GlIcon, GlTooltip, GlTooltipDirective } from '@gitlab/ui'; import { sprintf } from '~/locale'; import IssueMilestone from './issue_milestone.vue'; import IssueAssignees from './issue_assignees.vue'; +import IssueDueDate from '~/boards/components/issue_due_date.vue'; import relatedIssuableMixin from '../../mixins/related_issuable_mixin'; import CiIcon from '../ci_icon.vue'; @@ -15,6 +16,8 @@ export default { CiIcon, GlIcon, GlTooltip, + IssueWeight: () => import('ee_component/boards/components/issue_card_weight.vue'), + IssueDueDate, }, directives: { GlTooltip: GlTooltipDirective, @@ -38,13 +41,6 @@ export default { }, ); }, - heightStyle() { - return { - minHeight: '32px', - width: '0px', - visibility: 'hidden', - }; - }, iconClasses() { return `${this.iconClass} ic-${this.iconName}`; }, @@ -60,7 +56,9 @@ export default { }" 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"> + <div + class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 flex-xl-nowrap gl-min-h-7" + > <!-- Title area: Status icon (XL) and title --> <div class="item-title d-flex align-items-xl-center mb-xl-0"> <div ref="iconElementXL"> @@ -125,8 +123,21 @@ export default { /> <!-- Flex order for slots is defined in the parent component: e.g. related_issues_block.vue --> - <slot name="dueDate"></slot> - <slot name="weight"></slot> + <span v-if="weight > 0" class="order-md-1"> + <issue-weight + :weight="weight" + class="item-weight gl-display-flex gl-align-items-center" + tag-name="span" + /> + </span> + + <span v-if="dueDate" class="order-md-1"> + <issue-due-date + :date="dueDate" + tooltip-placement="top" + css-class="item-due-date gl-display-flex gl-align-items-center" + /> + </span> <issue-assignees v-if="hasAssignees" @@ -159,9 +170,5 @@ export default { > <icon :size="16" class="btn-item-remove-icon" name="close" /> </button> - - <!-- This element serves to set the issue card's height at a minimum of 32 px. --> - <!-- It fixes #59594: when the remove button is missing, issues have inconsistent heights. --> - <span :style="heightStyle"></span> </div> </template> |