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 | 50 |
1 files changed, 32 insertions, 18 deletions
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index bb9a1b79d91..d85ba2038a7 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -17,7 +17,6 @@ import eventHub from '../eventhub'; import sidebarEventHub from '~/sidebar/event_hub'; import { inactiveId, LIST, ListType } from '../constants'; import { isScopedLabel } from '~/lib/utils/common_utils'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { components: { @@ -32,7 +31,6 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, - mixins: [glFeatureFlagMixin()], props: { list: { type: Object, @@ -121,12 +119,9 @@ export default { collapsedTooltipTitle() { return this.listTitle || this.listAssignee; }, - shouldDisplaySwimlanes() { - return this.glFeatures.boardsWithSwimlanes && this.isSwimlanesOn; - }, }, methods: { - ...mapActions(['updateList', 'setActiveId']), + ...mapActions(['setActiveId']), openSidebarSettings() { if (this.activeId === inactiveId) { sidebarEventHub.$emit('sidebar.closeAll'); @@ -160,11 +155,7 @@ export default { } }, updateListFunction() { - if (this.shouldDisplaySwimlanes || this.glFeatures.graphqlBoardLists) { - this.updateList({ listId: this.list.id, collapsed: !this.list.isExpanded }); - } else { - this.list.update(); - } + this.list.update(); }, }, }; @@ -188,8 +179,9 @@ export default { 'gl-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader, 'gl-border-b-0': !list.isExpanded || isSwimlanesHeader, 'gl-py-2': !list.isExpanded && isSwimlanesHeader, + 'gl-flex-direction-column': !list.isExpanded, }" - class="board-title gl-m-0 gl-display-flex js-board-handle" + class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 js-board-handle" > <gl-button v-if="list.isExpandable" @@ -202,7 +194,15 @@ export default { @click="toggleExpanded" /> <!-- The following is only true in EE and if it is a milestone --> - <span v-if="showMilestoneListDetails" aria-hidden="true" class="gl-mr-2 milestone-icon"> + <span + v-if="showMilestoneListDetails" + aria-hidden="true" + class="milestone-icon" + :class="{ + 'gl-mt-3 gl-rotate-90': !list.isExpanded, + 'gl-mr-2': list.isExpanded, + }" + > <gl-icon name="timer" /> </span> @@ -210,6 +210,9 @@ export default { v-if="showAssigneeListDetails" :href="list.assignee.path" class="user-avatar-link js-no-trigger" + :class="{ + 'gl-mt-3 gl-rotate-90': !list.isExpanded, + }" > <img v-gl-tooltip.hover.bottom @@ -223,20 +226,28 @@ export default { </a> <div class="board-title-text" - :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }" + :class="{ + 'gl-display-none': !list.isExpanded && isSwimlanesHeader, + 'gl-flex-grow-0 gl-my-3 gl-mx-0': !list.isExpanded, + 'gl-flex-grow-1': list.isExpanded, + }" > <span v-if="list.type !== 'label'" v-gl-tooltip.hover :class="{ - 'gl-display-inline-block': list.type === 'milestone', + 'gl-display-block': !list.isExpanded || list.type === 'milestone', }" :title="listTitle" - class="board-title-main-text block-truncated" + class="board-title-main-text gl-text-truncate" > {{ list.title }} </span> - <span v-if="list.type === 'assignee'" class="board-title-sub-text gl-ml-2"> + <span + v-if="list.type === 'assignee'" + class="gl-ml-2 gl-font-weight-normal gl-text-gray-500" + :class="{ 'gl-display-none': !list.isExpanded }" + > @{{ listAssignee }} </span> <gl-label @@ -279,7 +290,10 @@ export default { <div v-if="showBoardListAndBoardInfo" class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary" - :class="{ 'gl-display-none!': !list.isExpanded && isSwimlanesHeader }" + :class="{ + 'gl-display-none!': !list.isExpanded && isSwimlanesHeader, + 'gl-p-0': !list.isExpanded, + }" > <span class="gl-display-inline-flex"> <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" /> |