summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/boards/components
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2022-09-19 23:18:09 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2022-09-19 23:18:09 +0000
commit6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde (patch)
treedc4d20fe6064752c0bd323187252c77e0a89144b /app/assets/javascripts/boards/components
parent9868dae7fc0655bd7ce4a6887d4e6d487690eeed (diff)
downloadgitlab-ce-6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde.tar.gz
Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/boards/components')
-rw-r--r--app/assets/javascripts/boards/components/board_add_new_column_form.vue2
-rw-r--r--app/assets/javascripts/boards/components/board_blocked_icon.vue27
-rw-r--r--app/assets/javascripts/boards/components/board_card.vue19
-rw-r--r--app/assets/javascripts/boards/components/board_card_inner.vue47
-rw-r--r--app/assets/javascripts/boards/components/board_card_move_to_position.vue128
-rw-r--r--app/assets/javascripts/boards/components/board_column.vue4
-rw-r--r--app/assets/javascripts/boards/components/board_content.vue2
-rw-r--r--app/assets/javascripts/boards/components/board_content_sidebar.vue4
-rw-r--r--app/assets/javascripts/boards/components/board_list.vue22
-rw-r--r--app/assets/javascripts/boards/components/board_list_header.vue16
-rw-r--r--app/assets/javascripts/boards/components/board_new_item.vue2
-rw-r--r--app/assets/javascripts/boards/components/issue_due_date.vue8
-rw-r--r--app/assets/javascripts/boards/components/issue_time_estimate.vue2
-rw-r--r--app/assets/javascripts/boards/components/item_count.vue4
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>