diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 12:26:25 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 12:26:25 +0000 |
commit | a09983ae35713f5a2bbb100981116d31ce99826e (patch) | |
tree | 2ee2af7bd104d57086db360a7e6d8c9d5d43667a /app/assets/javascripts/boards/components | |
parent | 18c5ab32b738c0b6ecb4d0df3994000482f34bd8 (diff) | |
download | gitlab-ce-a09983ae35713f5a2bbb100981116d31ce99826e.tar.gz |
Add latest changes from gitlab-org/gitlab@13-2-stable-ee
Diffstat (limited to 'app/assets/javascripts/boards/components')
7 files changed, 75 insertions, 225 deletions
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js deleted file mode 100644 index 517a13ceb27..00000000000 --- a/app/assets/javascripts/boards/components/board.js +++ /dev/null @@ -1,192 +0,0 @@ -import $ from 'jquery'; -import Sortable from 'sortablejs'; -import Vue from 'vue'; -import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip } from '@gitlab/ui'; -import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits'; -import { s__, __, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; -import Tooltip from '~/vue_shared/directives/tooltip'; -import AccessorUtilities from '../../lib/utils/accessor'; -import BoardBlankState from './board_blank_state.vue'; -import BoardDelete from './board_delete'; -import BoardList from './board_list.vue'; -import IssueCount from './issue_count.vue'; -import boardsStore from '../stores/boards_store'; -import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options'; -import { ListType } from '../constants'; -import { isScopedLabel } from '~/lib/utils/common_utils'; - -/** - * Please don't edit this file, have a look at: - * ./board_column.vue - * https://gitlab.com/gitlab-org/gitlab/-/issues/212300 - * - * This file here will be deleted soon - * @deprecated - */ -export default Vue.extend({ - components: { - BoardBlankState, - BoardDelete, - BoardList, - Icon, - GlButtonGroup, - IssueCount, - GlDeprecatedButton, - GlLabel, - GlTooltip, - }, - directives: { - Tooltip, - }, - mixins: [isWipLimitsOn], - props: { - list: { - type: Object, - default: () => ({}), - required: false, - }, - disabled: { - type: Boolean, - required: true, - }, - issueLinkBase: { - type: String, - required: true, - }, - rootPath: { - type: String, - required: true, - }, - boardId: { - type: String, - required: true, - }, - // Does not do anything but is used - // to support the API of the new board_column.vue - canAdminList: { - type: Boolean, - required: false, - default: false, - }, - }, - data() { - return { - detailIssue: boardsStore.detail, - filter: boardsStore.filter, - }; - }, - computed: { - isLoggedIn() { - return Boolean(gon.current_user_id); - }, - showListHeaderButton() { - return ( - !this.disabled && this.list.type !== ListType.closed && this.list.type !== ListType.blank - ); - }, - issuesTooltip() { - const { issuesSize } = this.list; - - return sprintf(__('%{issuesSize} issues'), { issuesSize }); - }, - // Only needed to make karma pass. - weightCountToolTip() {}, // eslint-disable-line vue/return-in-computed-property - caretTooltip() { - return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand'); - }, - isNewIssueShown() { - return this.list.type === ListType.backlog || this.showListHeaderButton; - }, - isSettingsShown() { - return ( - this.list.type !== ListType.backlog && - this.showListHeaderButton && - this.list.isExpanded && - this.isWipLimitsOn - ); - }, - showBoardListAndBoardInfo() { - return this.list.type !== ListType.blank && this.list.type !== ListType.promotion; - }, - uniqueKey() { - // eslint-disable-next-line @gitlab/require-i18n-strings - return `boards.${this.boardId}.${this.list.type}.${this.list.id}`; - }, - }, - watch: { - filter: { - handler() { - this.list.page = 1; - this.list.getIssues(true).catch(() => { - // TODO: handle request error - }); - }, - deep: true, - }, - }, - mounted() { - const instance = this; - - const sortableOptions = getBoardSortableDefaultOptions({ - disabled: this.disabled, - group: 'boards', - draggable: '.is-draggable', - handle: '.js-board-handle', - onEnd(e) { - sortableEnd(); - - const sortable = this; - - if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) { - const order = sortable.toArray(); - const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10)); - - instance.$nextTick(() => { - boardsStore.moveList(list, order); - }); - } - }, - }); - - Sortable.create(this.$el.parentNode, sortableOptions); - }, - created() { - if ( - this.list.isExpandable && - AccessorUtilities.isLocalStorageAccessSafe() && - !this.isLoggedIn - ) { - const isCollapsed = localStorage.getItem(`${this.uniqueKey}.expanded`) === 'false'; - - this.list.isExpanded = !isCollapsed; - } - }, - methods: { - showScopedLabels(label) { - return boardsStore.scopedLabels.enabled && isScopedLabel(label); - }, - - showNewIssueForm() { - this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm; - }, - toggleExpanded() { - if (this.list.isExpandable) { - this.list.isExpanded = !this.list.isExpanded; - - if (AccessorUtilities.isLocalStorageAccessSafe() && !this.isLoggedIn) { - localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded); - } - - if (this.isLoggedIn) { - this.list.update(); - } - - // When expanding/collapsing, the tooltip on the caret button sometimes stays open. - // Close all tooltips manually to prevent dangling tooltips. - $('.tooltip').tooltip('hide'); - } - }, - }, - template: '#js-board-template', -}); diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue index f0497ea0b64..6ac7fdce6a7 100644 --- a/app/assets/javascripts/boards/components/board_content.vue +++ b/app/assets/javascripts/boards/components/board_content.vue @@ -54,7 +54,7 @@ export default { <div> <div v-if="!isSwimlanesOn" - class="boards-list w-100 py-3 px-2 text-nowrap" + class="boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap" data-qa-selector="boards_list" > <board-column @@ -77,6 +77,7 @@ export default { :can-admin-list="canAdminList" :disabled="disabled" :board-id="boardId" + :group-id="groupId" /> </div> </template> 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" /> diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue index c72fb7b30f9..02ac45f8ef9 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.vue +++ b/app/assets/javascripts/boards/components/board_new_issue.vue @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; import { getMilestone } from 'ee_else_ce/boards/boards_util'; import ListIssue from 'ee_else_ce/boards/models/issue'; import eventHub from '../eventhub'; @@ -11,7 +11,7 @@ export default { name: 'BoardNewIssue', components: { ProjectSelect, - GlDeprecatedButton, + GlButton, }, props: { groupId: { @@ -120,21 +120,18 @@ export default { /> <project-select v-if="groupId" :group-id="groupId" :list="list" /> <div class="clearfix prepend-top-10"> - <gl-deprecated-button + <gl-button ref="submit-button" :disabled="disabled" class="float-left" variant="success" + category="primary" type="submit" - >{{ __('Submit issue') }}</gl-deprecated-button - > - <gl-deprecated-button - class="float-right" - type="button" - variant="default" - @click="cancel" - >{{ __('Cancel') }}</gl-deprecated-button + >{{ __('Submit issue') }}</gl-button > + <gl-button class="float-right" type="button" variant="default" @click="cancel">{{ + __('Cancel') + }}</gl-button> </div> </form> </div> diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue index 80db9930259..dbe3e0790f6 100644 --- a/app/assets/javascripts/boards/components/boards_selector.vue +++ b/app/assets/javascripts/boards/components/boards_selector.vue @@ -233,7 +233,7 @@ export default { </script> <template> - <div class="boards-switcher js-boards-selector append-right-10"> + <div class="boards-switcher js-boards-selector gl-mr-3"> <span class="boards-selector-wrapper js-boards-selector-wrapper"> <gl-dropdown data-qa-selector="boards_dropdown" diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index f2e198eaedb..d90928f35b6 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -153,7 +153,7 @@ export default { v-gl-tooltip name="issue-block" :title="__('Blocked issue')" - class="issue-blocked-icon append-right-4" + class="issue-blocked-icon gl-mr-2" :aria-label="__('Blocked issue')" /> <icon @@ -161,7 +161,7 @@ export default { v-gl-tooltip name="eye-slash" :title="__('Confidential')" - class="confidential-icon append-right-4" + class="confidential-icon gl-mr-2" :aria-label="__('Confidential')" /> <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{ diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue index a42e691dcf3..8eae8e4726f 100644 --- a/app/assets/javascripts/boards/components/modal/header.vue +++ b/app/assets/javascripts/boards/components/modal/header.vue @@ -72,7 +72,7 @@ export default { <button ref="selectAllBtn" type="button" - class="btn btn-success btn-inverted prepend-left-10" + class="btn btn-success btn-inverted gl-ml-3" @click="toggleAll" > {{ selectAllText }} |