diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_list_header.vue')
| -rw-r--r-- | app/assets/javascripts/boards/components/board_list_header.vue | 78 |
1 files changed, 61 insertions, 17 deletions
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index eb12617a66e..02a04cb4e46 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -5,10 +5,11 @@ import { GlLabel, GlTooltip, GlIcon, + GlSprintf, GlTooltipDirective, } from '@gitlab/ui'; import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits'; -import { s__, __, sprintf } from '~/locale'; +import { n__, s__ } from '~/locale'; import AccessorUtilities from '../../lib/utils/accessor'; import BoardDelete from './board_delete'; import IssueCount from './issue_count.vue'; @@ -25,6 +26,7 @@ export default { GlLabel, GlTooltip, GlIcon, + GlSprintf, IssueCount, }, directives: { @@ -82,10 +84,20 @@ export default { this.listType !== ListType.promotion ); }, - issuesTooltip() { + showMilestoneListDetails() { + return ( + this.list.type === 'milestone' && + this.list.milestone && + (this.list.isExpanded || !this.isSwimlanesHeader) + ); + }, + showAssigneeListDetails() { + return this.list.type === 'assignee' && (this.list.isExpanded || !this.isSwimlanesHeader); + }, + issuesTooltipLabel() { const { issuesSize } = this.list; - return sprintf(__('%{issuesSize} issues'), { issuesSize }); + return n__(`%d issue`, `%d issues`, issuesSize); }, chevronTooltip() { return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand'); @@ -111,6 +123,9 @@ export default { // eslint-disable-next-line @gitlab/require-i18n-strings return `boards.${this.boardId}.${this.listType}.${this.list.id}`; }, + collapsedTooltipTitle() { + return this.listTitle || this.listAssignee; + }, }, methods: { showScopedLabels(label) { @@ -147,7 +162,7 @@ export default { 'has-border': list.label && list.label.color, 'gl-relative': list.isExpanded, 'gl-h-full': !list.isExpanded, - 'board-inner gl-rounded-base gl-border-b-0': isSwimlanesHeader, + 'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader, }" :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }" class="board-header gl-relative" @@ -157,7 +172,9 @@ export default { <h3 :class="{ 'user-can-drag': !disabled && !list.preset, - 'gl-border-b-0': !list.isExpanded, + 'gl-py-3': !list.isExpanded && !isSwimlanesHeader, + 'gl-border-b-0': !list.isExpanded || isSwimlanesHeader, + 'gl-py-2': !list.isExpanded && isSwimlanesHeader, }" class="board-title gl-m-0 gl-display-flex js-board-handle" > @@ -167,21 +184,17 @@ export default { :aria-label="chevronTooltip" :title="chevronTooltip" :icon="chevronIcon" - class="board-title-caret no-drag" + class="board-title-caret no-drag gl-cursor-pointer" variant="link" @click="toggleExpanded" /> <!-- The following is only true in EE and if it is a milestone --> - <span - v-if="list.type === 'milestone' && list.milestone" - aria-hidden="true" - class="gl-mr-2 milestone-icon" - > + <span v-if="showMilestoneListDetails" aria-hidden="true" class="gl-mr-2 milestone-icon"> <gl-icon name="timer" /> </span> <a - v-if="list.type === 'assignee'" + v-if="showAssigneeListDetails" :href="list.assignee.path" class="user-avatar-link js-no-trigger" > @@ -195,7 +208,10 @@ export default { width="20" /> </a> - <div class="board-title-text"> + <div + class="board-title-text" + :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }" + > <span v-if="list.type !== 'label'" v-gl-tooltip.hover @@ -208,7 +224,7 @@ export default { {{ list.title }} </span> <span v-if="list.type === 'assignee'" class="board-title-sub-text gl-ml-2"> - @{{ list.assignee.username }} + @{{ listAssignee }} </span> <gl-label v-if="list.type === 'label'" @@ -220,6 +236,33 @@ export default { :title="list.label.title" /> </div> + + <span + v-if="isSwimlanesHeader && !list.isExpanded" + ref="collapsedInfo" + aria-hidden="true" + class="board-header-collapsed-info-icon gl-mt-2 gl-cursor-pointer gl-text-gray-700" + > + <gl-icon name="information" /> + </span> + <gl-tooltip v-if="isSwimlanesHeader && !list.isExpanded" :target="() => $refs.collapsedInfo"> + <div class="gl-font-weight-bold gl-pb-2">{{ collapsedTooltipTitle }}</div> + <div v-if="list.maxIssueCount !== 0"> + • + <gl-sprintf :message="__('%{issuesSize} with a limit of %{maxIssueCount}')"> + <template #issuesSize>{{ issuesTooltipLabel }}</template> + <template #maxIssueCount>{{ list.maxIssueCount }}</template> + </gl-sprintf> + </div> + <div v-else>• {{ issuesTooltipLabel }}</div> + <div v-if="weightFeatureAvailable"> + • + <gl-sprintf :message="__('%{totalWeight} total weight')"> + <template #totalWeight>{{ list.totalWeight }}</template> + </gl-sprintf> + </div> + </gl-tooltip> + <board-delete v-if="canAdminList && !list.preset && list.id" :list="list" @@ -229,7 +272,7 @@ export default { v-gl-tooltip.hover.bottom :class="{ 'gl-display-none': !list.isExpanded }" :aria-label="__('Delete list')" - class="board-delete no-drag gl-pr-0 gl-shadow-none gl-mr-3" + class="board-delete no-drag gl-pr-0 gl-shadow-none! gl-mr-3" :title="__('Delete list')" icon="remove" size="small" @@ -238,10 +281,11 @@ export default { </board-delete> <div v-if="showBoardListAndBoardInfo" - class="issue-count-badge gl-pr-0 no-drag text-secondary" + class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary" + :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }" > <span class="gl-display-inline-flex"> - <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltip" /> + <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" /> <span ref="issueCount" class="issue-count-badge-count"> <gl-icon class="gl-mr-2" name="issues" /> <issue-count :issues-size="list.issuesSize" :max-issue-count="list.maxIssueCount" /> |