diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
commit | f64a639bcfa1fc2bc89ca7db268f594306edfd7c (patch) | |
tree | a2c3c2ebcc3b45e596949db485d6ed18ffaacfa1 /app/assets/javascripts/issuable_show/components/issuable_header.vue | |
parent | bfbc3e0d6583ea1a91f627528bedc3d65ba4b10f (diff) |
Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40
Diffstat (limited to 'app/assets/javascripts/issuable_show/components/issuable_header.vue')
-rw-r--r-- | app/assets/javascripts/issuable_show/components/issuable_header.vue | 32 |
1 files changed, 28 insertions, 4 deletions
diff --git a/app/assets/javascripts/issuable_show/components/issuable_header.vue b/app/assets/javascripts/issuable_show/components/issuable_header.vue index de17f7e7f6b..d7da533d055 100644 --- a/app/assets/javascripts/issuable_show/components/issuable_header.vue +++ b/app/assets/javascripts/issuable_show/components/issuable_header.vue @@ -3,6 +3,7 @@ import { GlIcon, GlButton, GlTooltipDirective, GlAvatarLink, GlAvatarLabeled } f import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { isExternal } from '~/lib/utils/url_utility'; +import { n__, sprintf } from '~/locale'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; export default { @@ -45,6 +46,11 @@ export default { required: false, default: false, }, + taskCompletionStatus: { + type: Object, + required: false, + default: null, + }, }, computed: { authorId() { @@ -53,6 +59,18 @@ export default { isAuthorExternal() { return isExternal(this.author.webUrl); }, + taskStatusString() { + const { count, completedCount } = this.taskCompletionStatus; + + return sprintf( + n__( + '%{completedCount} of %{count} task completed', + '%{completedCount} of %{count} tasks completed', + count, + ), + { completedCount, count }, + ); + }, }, mounted() { this.toggleSidebarButtonEl = document.querySelector('.js-toggle-right-sidebar-button'); @@ -74,8 +92,8 @@ export default { <gl-icon v-if="statusIcon" :name="statusIcon" class="d-block d-sm-none" /> <span class="d-none d-sm-block"><slot name="status-badge"></slot></span> </div> - <div class="issuable-meta gl-display-flex gl-align-items-center"> - <div class="gl-display-inline-block"> + <div class="issuable-meta gl-display-flex gl-align-items-center d-md-inline-block"> + <div v-if="blocked || confidential" class="gl-display-inline-block"> <div v-if="blocked" data-testid="blocked" class="issuable-warning-icon inline"> <gl-icon name="lock" :aria-label="__('Blocked')" /> </div> @@ -95,13 +113,13 @@ export default { :data-name="author.name" :href="author.webUrl" target="_blank" - class="js-user-link gl-ml-2" + class="js-user-link gl-vertical-align-middle gl-ml-2" > <gl-avatar-labeled :size="24" :src="author.avatarUrl" :label="author.name" - class="d-none d-sm-inline-flex gl-ml-1" + class="d-none d-sm-inline-flex gl-mx-1" > <template #meta> <gl-icon v-if="isAuthorExternal" name="external-link" /> @@ -109,6 +127,12 @@ export default { </gl-avatar-labeled> <strong class="author d-sm-none d-inline">@{{ author.username }}</strong> </gl-avatar-link> + <span + v-if="taskCompletionStatus" + data-testid="task-status" + class="gl-display-none gl-md-display-block gl-lg-display-inline-block" + >{{ taskStatusString }}</span + > </div> <gl-button data-testid="sidebar-toggle" |