diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-14 21:08:55 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-14 21:08:55 +0300 |
commit | 3828d19ab2d68dd6cafa6f08221e1eee572671e7 (patch) | |
tree | afd36fcf20499d876493bf24bd9f0ee926454547 /app/assets/javascripts/issuable | |
parent | 3e764061b3209d4deee2a55851d5d564a9f19d8b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/issuable')
-rw-r--r-- | app/assets/javascripts/issuable/components/related_issuable_item.vue | 72 |
1 files changed, 33 insertions, 39 deletions
diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue index 608c1deac64..ded54d60d1d 100644 --- a/app/assets/javascripts/issuable/components/related_issuable_item.vue +++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue @@ -101,26 +101,22 @@ export default { :class="{ 'issuable-info-container': !canReorder, 'card-body': canReorder, - 'gl-pr-2': canRemove, }" - class="item-body d-flex align-items-center gl-py-3 gl-px-5" + class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-px-3 gl-py-2 py-xl-0 gl-mx-n2" > <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" + class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 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 gl-min-w-0"> - <div ref="iconElementXL"> - <gl-icon - v-if="hasState" - ref="iconElementXL" - class="gl-mr-3" - :class="iconClasses" - :name="iconName" - :title="stateTitle" - :aria-label="state" - /> - </div> + <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0"> + <gl-icon + v-if="hasState" + ref="iconElementXL" + :class="iconClasses" + :name="iconName" + :title="stateTitle" + :aria-label="state" + /> <gl-tooltip :target="() => $refs.iconElementXL"> <span v-safe-html="stateTitle"></span> </gl-tooltip> @@ -129,42 +125,46 @@ export default { v-gl-tooltip name="eye-slash" :title="__('Confidential')" - class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0" + class="confidential-icon" :aria-label="__('Confidential')" /> - <gl-link - :href="computedPath" - class="sortable-link gl-font-weight-normal" - @click="handleTitleClick" - > + <gl-link :href="computedPath" class="sortable-link" @click="handleTitleClick"> {{ title }} </gl-link> </div> <!-- Info area: meta, path, and assignees --> - <div class="item-info-area d-flex flex-xl-grow-1 flex-shrink-0"> + <div + class="item-info-area gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-gap-3 gl-ml-6 ml-xl-0" + > <!-- Meta area: path and attributes --> <!-- If there is no room beside the path, meta attributes are put ABOVE it (flex-wrap-reverse). --> <!-- See design: https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%2383-issue-mr-rows-cards-spec-previews/#artboard16 --> <div - class="item-meta d-flex flex-wrap-reverse justify-content-start justify-content-md-between" + class="item-meta gl-display-flex gl-md-justify-content-space-between gl-gap-3 gl-flex-wrap-wrap-reverse" > <!-- Path area: status icon (<XL), path, issue # --> <div - class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2" + class="item-path-area item-path-id gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3" > <gl-tooltip :target="() => $refs.iconElement"> <span v-safe-html="stateTitle"></span> </gl-tooltip> - <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{ - itemPath - }}</span> + <span + v-if="itemPath" + v-gl-tooltip + :title="itemPath" + class="path-id-text d-inline-block" + >{{ itemPath }}</span + > <span>{{ pathIdSeparator }}{{ itemId }}</span> </div> <!-- Attributes area: CI, epic count, weight, milestone --> <!-- They have a different order on large screen sizes --> - <div class="item-attributes-area d-flex align-items-center mt-2 mt-xl-0"> + <div + class="item-attributes-area gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3" + > <span v-if="hasPipeline" class="mr-ci-status order-md-last"> <a :href="pipelineStatus.details_path"> <ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" /> @@ -174,7 +174,7 @@ export default { <issue-milestone v-if="hasMilestone" :milestone="milestone" - class="d-flex align-items-center item-milestone order-md-first ml-md-0" + class="item-milestone gl-font-sm gl-display-flex gl-align-items-center order-md-first" /> <!-- Flex order for slots is defined in the parent component: e.g. related_issues_block.vue --> @@ -198,24 +198,17 @@ export default { <issue-assignees v-if="hasAssignees" :assignees="assignees" - class="item-assignees align-items-center align-self-end flex-shrink-0 order-md-2 d-none d-md-flex" + class="item-assignees gl-display-flex gl-align-items-center gl-align-self-end gl-flex-shrink-0 order-md-2" /> </div> </div> - - <!-- Assignees. On small layouts, these are put here, at the end of the card. --> - <issue-assignees - v-if="assignees.length !== 0" - :assignees="assignees" - class="item-assignees d-flex align-items-center align-self-end flex-shrink-0 d-md-none gl-ml-3" - /> </div> </div> <span v-if="isLocked" v-gl-tooltip - class="gl-px-3 gl-display-inline-block gl-cursor-not-allowed" + class="gl-display-inline-block gl-cursor-not-allowed" :title="lockedMessage" data-testid="lockIcon" > @@ -226,8 +219,9 @@ export default { v-gl-tooltip icon="close" category="tertiary" + size="small" :disabled="removeDisabled" - class="js-issue-item-remove-button gl-ml-3" + class="js-issue-item-remove-button" data-qa-selector="remove_related_issue_button" :title="__('Remove')" :aria-label="__('Remove')" |