diff options
Diffstat (limited to 'app/assets/javascripts/boards/components')
14 files changed, 245 insertions, 42 deletions
diff --git a/app/assets/javascripts/boards/components/board_add_new_column_form.vue b/app/assets/javascripts/boards/components/board_add_new_column_form.vue index c4a2f83ab50..1899d42fa4d 100644 --- a/app/assets/javascripts/boards/components/board_add_new_column_form.vue +++ b/app/assets/javascripts/boards/components/board_add_new_column_form.vue @@ -102,7 +102,7 @@ export default { data-qa-selector="board_add_new_list" > <div - class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base" + class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-gray-50" > <h3 class="gl-font-size-h2 gl-px-5 gl-py-5 gl-m-0" data-testid="board-add-column-form-title"> {{ $options.i18n.newList }} diff --git a/app/assets/javascripts/boards/components/board_blocked_icon.vue b/app/assets/javascripts/boards/components/board_blocked_icon.vue index b81edb4dfe6..3f8a596abd8 100644 --- a/app/assets/javascripts/boards/components/board_blocked_icon.vue +++ b/app/assets/javascripts/boards/components/board_blocked_icon.vue @@ -1,7 +1,7 @@ <script> import { GlIcon, GlLink, GlPopover, GlLoadingIcon } from '@gitlab/ui'; import { blockingIssuablesQueries, issuableTypes } from '~/boards/constants'; -import { TYPE_ISSUE } from '~/graphql_shared/constants'; +import { TYPE_ISSUE, TYPE_EPIC } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { truncate } from '~/lib/utils/text_utility'; import { __, n__, s__, sprintf } from '~/locale'; @@ -10,10 +10,12 @@ export default { i18n: { issuableType: { [issuableTypes.issue]: __('issue'), + [issuableTypes.epic]: __('epic'), }, }, graphQLIdType: { [issuableTypes.issue]: TYPE_ISSUE, + [issuableTypes.epic]: TYPE_EPIC, }, referenceFormatter: { [issuableTypes.issue]: (r) => r.split('/')[1], @@ -40,7 +42,7 @@ export default { type: String, required: true, validator(value) { - return [issuableTypes.issue].includes(value); + return [issuableTypes.issue, issuableTypes.epic].includes(value); }, }, }, @@ -53,14 +55,21 @@ export default { return blockingIssuablesQueries[this.issuableType].query; }, variables() { + if (this.isEpic) { + return { + fullPath: this.item.group.fullPath, + iid: Number(this.item.iid), + }; + } return { id: convertToGraphQLId(this.$options.graphQLIdType[this.issuableType], this.item.id), }; }, update(data) { this.skip = true; + const issuable = this.isEpic ? data?.group?.issuable : data?.issuable; - return data?.issuable?.blockingIssuables?.nodes || []; + return issuable?.blockingIssuables?.nodes || []; }, error(error) { const message = sprintf(s__('Boards|Failed to fetch blocking %{issuableType}s'), { @@ -77,13 +86,16 @@ export default { }; }, computed: { + isEpic() { + return this.issuableType === issuableTypes.epic; + }, displayedIssuables() { const { defaultDisplayLimit, referenceFormatter } = this.$options; return this.blockingIssuables.slice(0, defaultDisplayLimit).map((i) => { return { ...i, title: truncate(i.title, this.$options.textTruncateWidth), - reference: referenceFormatter[this.issuableType](i.reference), + reference: this.isEpic ? i.reference : referenceFormatter[this.issuableType](i.reference), }; }); }, @@ -106,6 +118,9 @@ export default { }, ); }, + blockIcon() { + return this.issuableType === issuableTypes.issue ? 'issue-block' : 'entity-blocked'; + }, glIconId() { return `blocked-icon-${this.uniqueId}`; }, @@ -153,8 +168,8 @@ export default { <gl-icon :id="glIconId" ref="icon" - name="issue-block" - class="issue-blocked-icon gl-mr-2 gl-cursor-pointer" + :name="blockIcon" + class="issue-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500" data-testid="issue-blocked-icon" @mouseenter="handleMouseEnter" /> diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 3638fdd2ca5..44c16324950 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -30,6 +30,11 @@ export default { default: 0, required: false, }, + showWorkItemTypeIcon: { + type: Boolean, + default: false, + required: false, + }, }, computed: { ...mapState(['selectedBoardItems', 'activeId']), @@ -81,10 +86,10 @@ export default { data-qa-selector="board_card" :class="[ { - 'multi-select': multiSelectVisible, + 'multi-select gl-bg-blue-50 gl-border-blue-200': multiSelectVisible, 'gl-cursor-grab': isDraggable, 'is-disabled': isDisabled, - 'is-active': isActive, + 'is-active gl-bg-blue-50': isActive, 'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading, }, colorClass, @@ -95,9 +100,15 @@ export default { :data-item-path="item.referencePath" :style="cardStyle" data-testid="board_card" - class="board-card gl-p-5 gl-rounded-base" + class="board-card gl-p-5 gl-rounded-base gl-line-height-normal gl-relative gl-mb-3" @click="toggleIssue($event)" > - <board-card-inner :list="list" :item="item" :update-filters="true" /> + <board-card-inner + :list="list" + :item="item" + :update-filters="true" + :index="index" + :show-work-item-type-icon="showWorkItemTypeIcon" + /> </li> </template> diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index 8dc521317cd..92a623d65d4 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/app/assets/javascripts/boards/components/board_card_inner.vue @@ -15,6 +15,8 @@ import { updateHistory } from '~/lib/utils/url_utility'; import { sprintf, __, n__ } from '~/locale'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; +import BoardCardMoveToPosition from '~/boards/components/board_card_move_to_position.vue'; +import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue'; import { ListType } from '../constants'; import eventHub from '../eventhub'; import BoardBlockedIcon from './board_blocked_icon.vue'; @@ -34,6 +36,10 @@ export default { IssueCardWeight: () => import('ee_component/boards/components/issue_card_weight.vue'), BoardBlockedIcon, GlSprintf, + BoardCardMoveToPosition, + WorkItemTypeIcon, + IssueHealthStatus: () => + import('ee_component/related_items_tree/components/issue_health_status.vue'), }, directives: { GlTooltip: GlTooltipDirective, @@ -55,6 +61,15 @@ export default { required: false, default: false, }, + index: { + type: Number, + required: true, + }, + showWorkItemTypeIcon: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -202,7 +217,7 @@ export default { <template> <div> <div class="gl-display-flex" dir="auto"> - <h4 class="board-card-title gl-mb-0 gl-mt-0"> + <h4 class="board-card-title gl-mb-0 gl-mt-0 gl-mr-3 gl-font-base gl-overflow-break-word"> <board-blocked-icon v-if="item.blocked" :item="item" @@ -215,7 +230,7 @@ export default { v-gl-tooltip name="eye-slash" :title="__('Confidential')" - class="confidential-icon gl-mr-2" + class="confidential-icon gl-mr-2 gl-text-orange-500 gl-cursor-help" :aria-label="__('Confidential')" /> <gl-icon @@ -223,24 +238,25 @@ export default { v-gl-tooltip name="spam" :title="__('This issue is hidden because its author has been banned')" - class="gl-mr-2 hidden-icon" + class="gl-mr-2 hidden-icon gl-text-orange-500 gl-cursor-help" data-testid="hidden-icon" /> <a :href="item.path || item.webUrl || ''" :title="item.title" :class="{ 'gl-text-gray-400!': item.isLoading }" - class="js-no-trigger" + class="js-no-trigger gl-text-body gl-hover-text-gray-900" @mousemove.stop >{{ item.title }}</a > </h4> + <board-card-move-to-position :item="item" :list="list" :index="index" /> </div> <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap"> <template v-for="label in orderedLabels"> <gl-label :key="label.id" - class="js-no-trigger" + class="js-no-trigger gl-mt-2 gl-mr-2" :background-color="label.color" :title="label.title" :description="label.description" @@ -260,9 +276,14 @@ export default { <gl-loading-icon v-if="item.isLoading" size="lg" class="gl-mt-5" /> <span v-if="item.referencePath" - class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3" + class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3 gl-text-secondary" :class="{ 'gl-font-base': isEpicBoard }" > + <work-item-type-icon + v-if="showWorkItemTypeIcon" + :work-item-type="item.type" + show-tooltip-on-hover + /> <tooltip-on-truncate v-if="showReferencePath" :title="itemReferencePath" @@ -321,7 +342,10 @@ export default { </p> </gl-tooltip> - <span ref="countBadge" class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3"> + <span + ref="countBadge" + class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3 gl-text-secondary gl-cursor-help" + > <span v-if="allowSubEpics" class="gl-mr-3"> <gl-icon name="epic" /> {{ totalEpicsCount }} @@ -339,7 +363,7 @@ export default { <span v-if="shouldRenderEpicProgress" ref="progressBadge" - class="board-card-info gl-pl-0" + class="board-card-info gl-pl-0 gl-text-secondary gl-cursor-help" > <span class="gl-mr-3" data-testid="epic-progress"> <gl-icon name="progress" /> @@ -359,10 +383,11 @@ export default { :weight="item.weight" @click="filterByWeight(item.weight)" /> + <issue-health-status v-if="item.healthStatus" :health-status="item.healthStatus" /> </span> </span> </div> - <div class="board-card-assignee gl-display-flex gl-gap-3"> + <div class="board-card-assignee gl-display-flex gl-gap-3 gl-mb-n2"> <user-avatar-link v-for="assignee in cappedAssignees" :key="assignee.id" @@ -370,7 +395,7 @@ export default { :img-alt="avatarUrlTitle(assignee)" :img-src="avatarUrl(assignee)" :img-size="avatarSize" - class="js-no-trigger" + class="js-no-trigger user-avatar-link" tooltip-placement="bottom" :enforce-gl-avatar="true" > @@ -384,7 +409,7 @@ export default { v-if="shouldRenderCounter" v-gl-tooltip :title="assigneeCounterTooltip" - class="avatar-counter" + class="avatar-counter gl-bg-gray-400 gl-cursor-help gl-font-weight-bold gl-ml-n4 gl-border-0 gl-line-height-24" data-placement="bottom" >{{ assigneeCounterLabel }}</span > diff --git a/app/assets/javascripts/boards/components/board_card_move_to_position.vue b/app/assets/javascripts/boards/components/board_card_move_to_position.vue new file mode 100644 index 00000000000..ff938219475 --- /dev/null +++ b/app/assets/javascripts/boards/components/board_card_move_to_position.vue @@ -0,0 +1,128 @@ +<script> +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { mapActions, mapGetters, mapState } from 'vuex'; +import { s__ } from '~/locale'; + +import Tracking from '~/tracking'; + +export default { + i18n: { + moveToStartText: s__('Boards|Move to start of list'), + moveToEndText: s__('Boards|Move to end of list'), + }, + name: 'BoardCardMoveToPosition', + components: { + GlDropdown, + GlDropdownItem, + }, + mixins: [Tracking.mixin()], + props: { + item: { + type: Object, + required: true, + validator: (item) => ['id', 'iid', 'referencePath'].every((key) => item[key]), + }, + list: { + type: Object, + required: false, + default: () => ({}), + }, + index: { + type: Number, + required: true, + }, + }, + computed: { + ...mapState(['pageInfoByListId']), + ...mapGetters(['getBoardItemsByList']), + tracking() { + return { + category: 'boards:list', + label: 'move_to_position', + property: `type_card`, + }; + }, + listItems() { + return this.getBoardItemsByList(this.list.id); + }, + listHasNextPage() { + return this.pageInfoByListId[this.list.id]?.hasNextPage; + }, + lengthOfListItemsInBoard() { + return this.listItems?.length; + }, + itemIdentifier() { + return `${this.item.id}-${this.item.iid}-${this.index}`; + }, + isFirstItemInList() { + return this.index === 0; + }, + isLastItemInList() { + return this.index === this.lengthOfListItemsInBoard - 1; + }, + }, + methods: { + ...mapActions(['moveItem']), + moveToStart() { + this.track('click_toggle_button', { + label: 'move_to_start', + }); + /** in case it is the first in the list don't call any action/mutation * */ + if (this.isFirstItemInList) { + return; + } + this.moveToPosition({ + positionInList: 0, + }); + }, + moveToEnd() { + this.track('click_toggle_button', { + label: 'move_to_end', + }); + /** in case it is the last in the list don't call any action/mutation * */ + if (this.isLastItemInList) { + return; + } + this.moveToPosition({ + positionInList: -1, + }); + }, + moveToPosition({ positionInList }) { + this.moveItem({ + itemId: this.item.id, + itemIid: this.item.iid, + itemPath: this.item.referencePath, + fromListId: this.list.id, + toListId: this.list.id, + positionInList, + atIndex: this.index, + allItemsLoadedInList: !this.listHasNextPage, + }); + }, + }, +}; +</script> + +<template> + <gl-dropdown + ref="dropdown" + :key="itemIdentifier" + icon="ellipsis_v" + :text="s__('Boards|Move card')" + :text-sr-only="true" + class="move-to-position gl-display-block gl-mb-2 gl-ml-2 gl-mt-n3 gl-mr-n3" + category="tertiary" + :tabindex="index" + no-caret + @keydown.esc.native="$emit('hide')" + > + <div> + <gl-dropdown-item @click.stop="moveToStart"> + {{ $options.i18n.moveToStartText }} + </gl-dropdown-item> + <gl-dropdown-item @click.stop="moveToEnd"> + {{ $options.i18n.moveToEndText }} + </gl-dropdown-item> + </div> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue index bcf5b12b209..8fc76c02e14 100644 --- a/app/assets/javascripts/boards/components/board_column.vue +++ b/app/assets/javascripts/boards/components/board_column.vue @@ -76,7 +76,7 @@ export default { <div :class="{ 'is-draggable': isListDraggable, - 'is-collapsed': list.collapsed, + 'is-collapsed gl-w-10': list.collapsed, 'board-type-assignee': list.listType === 'assignee', }" :data-list-id="list.id" @@ -84,7 +84,7 @@ export default { data-qa-selector="board_list" > <div - class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base" + class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-gray-50" :class="{ 'board-column-highlighted': highlighted }" > <board-list-header :list="list" :disabled="disabled" /> diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue index 8868b9b2f3e..d99afa8455d 100644 --- a/app/assets/javascripts/boards/components/board_content.vue +++ b/app/assets/javascripts/boards/components/board_content.vue @@ -75,7 +75,7 @@ export default { v-if="!isSwimlanesOn" ref="list" v-bind="draggableOptions" - class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap" + class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-scroll" @end="moveList" > <board-column diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue index d25169b5b9d..00b4e6c96a9 100644 --- a/app/assets/javascripts/boards/components/board_content_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue @@ -57,6 +57,9 @@ export default { labelsFilterBasePath: { default: '', }, + canUpdate: { + default: false, + }, }, inheritAttrs: false, computed: { @@ -163,6 +166,7 @@ export default { :full-path="fullPath" :initial-assignees="activeBoardItem.assignees" :allow-multiple-assignees="multipleAssigneesFeatureAvailable" + :editable="canUpdate" @assignees-updated="setAssignees" /> <sidebar-dropdown-widget diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index 66388f4eb43..edf1a5ee7e6 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/app/assets/javascripts/boards/components/board_list.vue @@ -66,7 +66,7 @@ export default { }, }, computed: { - ...mapState(['pageInfoByListId', 'listsFlags', 'filterParams']), + ...mapState(['pageInfoByListId', 'listsFlags', 'filterParams', 'isUpdateIssueOrderInProgress']), ...mapGetters(['isEpicBoard']), listItemsCount() { return this.isEpicBoard ? this.list.epicsCount : this.boardList?.issuesCount; @@ -132,6 +132,9 @@ export default { return this.canMoveIssue ? options : {}; }, + disableScrollingWhenMutationInProgress() { + return this.hasNextPage && this.isUpdateIssueOrderInProgress; + }, }, watch: { boardItems() { @@ -265,7 +268,7 @@ export default { <template> <div v-show="!list.collapsed" - class="board-list-component gl-relative gl-h-full gl-display-flex gl-flex-direction-column" + class="board-list-component gl-relative gl-h-full gl-display-flex gl-flex-direction-column gl-min-h-0" data-qa-selector="board_list_cards_area" > <div @@ -285,9 +288,13 @@ export default { v-bind="treeRootOptions" :data-board="list.id" :data-board-type="list.listType" - :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }" + :class="{ + 'bg-danger-100': boardItemsSizeExceedsMax, + 'gl-overflow-hidden': disableScrollingWhenMutationInProgress, + 'gl-overflow-y-auto': !disableScrollingWhenMutationInProgress, + }" draggable=".board-card" - class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0" + class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0 gl-overflow-x-hidden" data-testid="tree-root-wrapper" @start="handleDragOnStart" @end="handleDragOnEnd" @@ -301,9 +308,14 @@ export default { :item="item" :data-draggable-item-type="$options.draggableItemTypes.card" :disabled="disabled" + :show-work-item-type-icon="!isEpicBoard" /> <gl-intersection-observer @appear="onReachingListBottom"> - <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1"> + <li + v-if="showCount" + class="board-list-count gl-text-center gl-text-secondary gl-py-4" + data-issue-id="-1" + > <gl-loading-icon v-if="loadingMore" size="sm" diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index e3012f5b36d..230fa4e1e0f 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -252,7 +252,7 @@ export default { <header :class="{ 'gl-h-full': list.collapsed, - 'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader, + 'board-inner gl-rounded-top-left-base gl-rounded-top-right-base gl-bg-gray-50': isSwimlanesHeader, }" :style="headerStyle" class="board-header gl-relative" @@ -267,14 +267,15 @@ export default { 'gl-py-2': list.collapsed && isSwimlanesHeader, 'gl-flex-direction-column': list.collapsed, }" - class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3" + class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 gl-h-9" > <gl-button v-gl-tooltip.hover :aria-label="chevronTooltip" :title="chevronTooltip" :icon="chevronIcon" - class="board-title-caret no-drag gl-cursor-pointer" + class="board-title-caret no-drag gl-cursor-pointer gl-hover-bg-gray-50" + :class="{ 'gl-mt-1': list.collapsed, 'gl-mr-2': !list.collapsed }" category="tertiary" size="small" data-testid="board-title-caret" @@ -307,6 +308,7 @@ export default { 'gl-display-none': list.collapsed && isSwimlanesHeader, 'gl-flex-grow-0 gl-my-3 gl-mx-0': list.collapsed, 'gl-flex-grow-1': !list.collapsed, + 'gl-rotate-90': list.collapsed, }" > <!-- EE start --> @@ -324,7 +326,7 @@ export default { <span v-if="listType === 'assignee'" v-show="!list.collapsed" - class="gl-ml-2 gl-font-weight-normal gl-text-gray-500" + class="gl-ml-2 gl-font-weight-normal gl-text-secondary" > @{{ listAssignee }} </span> @@ -345,7 +347,7 @@ export default { v-if="isSwimlanesHeader && list.collapsed" ref="collapsedInfo" aria-hidden="true" - class="board-header-collapsed-info-icon gl-cursor-pointer gl-text-gray-500" + class="board-header-collapsed-info-icon gl-cursor-pointer gl-text-secondary gl-hover-text-gray-900" > <gl-icon name="information" /> </span> @@ -369,14 +371,14 @@ export default { <!-- EE end --> <div - class="issue-count-badge gl-display-inline-flex gl-pr-2 no-drag gl-text-gray-500" + class="issue-count-badge gl-display-inline-flex gl-pr-2 no-drag gl-text-secondary" data-testid="issue-count-badge" :class="{ 'gl-display-none!': list.collapsed && isSwimlanesHeader, 'gl-p-0': list.collapsed, }" > - <span class="gl-display-inline-flex"> + <span class="gl-display-inline-flex" :class="{ 'gl-rotate-90': list.collapsed }"> <gl-tooltip :target="() => $refs.itemCount" :title="itemsTooltipLabel" /> <span ref="itemCount" class="gl-display-inline-flex gl-align-items-center"> <gl-icon class="gl-mr-2" :name="countIcon" :size="16" /> diff --git a/app/assets/javascripts/boards/components/board_new_item.vue b/app/assets/javascripts/boards/components/board_new_item.vue index 600917683cd..084b7519d1f 100644 --- a/app/assets/javascripts/boards/components/board_new_item.vue +++ b/app/assets/javascripts/boards/components/board_new_item.vue @@ -69,7 +69,7 @@ export default { </script> <template> - <div class="board-new-issue-form"> + <div class="board-new-issue-form gl-z-index-3 gl-m-3"> <div class="board-card position-relative gl-p-5 rounded"> <gl-form @submit.prevent="handleFormSubmit" @reset="handleFormCancel"> <label :for="inputFieldId" class="gl-font-weight-bold">{{ __('Title') }}</label> diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue index 73ec008c2b6..b09b1d48ca5 100644 --- a/app/assets/javascripts/boards/components/issue_due_date.vue +++ b/app/assets/javascripts/boards/components/issue_due_date.vue @@ -1,6 +1,6 @@ <script> import { GlTooltip, GlIcon } from '@gitlab/ui'; -import dateFormat from 'dateformat'; +import dateFormat from '~/lib/dateformat'; import { getDayDifference, getTimeago, @@ -85,7 +85,11 @@ export default { <template> <span> - <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number"> + <span + ref="issueDueDate" + :class="cssClass" + class="board-card-info gl-mr-3 gl-text-secondary gl-cursor-help" + > <gl-icon :class="{ 'text-danger': isPastDue }" class="board-card-info-icon gl-mr-2" diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue index 9312db06efe..bc12717a92d 100644 --- a/app/assets/javascripts/boards/components/issue_time_estimate.vue +++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue @@ -36,7 +36,7 @@ export default { <template> <span> - <span ref="issueTimeEstimate" class="board-card-info card-number"> + <span ref="issueTimeEstimate" class="board-card-info gl-mr-3 gl-text-secondary gl-cursor-help"> <gl-icon name="hourglass" class="board-card-info-icon gl-mr-2" /> <time class="board-card-info-text">{{ timeEstimate }}</time> </span> diff --git a/app/assets/javascripts/boards/components/item_count.vue b/app/assets/javascripts/boards/components/item_count.vue index a11c23e5625..dab82abb646 100644 --- a/app/assets/javascripts/boards/components/item_count.vue +++ b/app/assets/javascripts/boards/components/item_count.vue @@ -30,7 +30,9 @@ export default { {{ itemsSize }} </span> <span v-if="isMaxLimitSet" class="max-issue-size"> - {{ maxIssueCount }} + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + {{ `/ ${maxIssueCount}` }} + <!-- eslint-enable @gitlab/vue-require-i18n-strings --> </span> </div> </template> |