diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 15:44:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 15:44:42 +0000 |
commit | 4555e1b21c365ed8303ffb7a3325d773c9b8bf31 (patch) | |
tree | 5423a1c7516cffe36384133ade12572cf709398d /app/assets/javascripts/vue_shared/components/sidebar | |
parent | e570267f2f6b326480d284e0164a6464ba4081bc (diff) | |
download | gitlab-ce-4555e1b21c365ed8303ffb7a3325d773c9b8bf31.tar.gz |
Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar')
12 files changed, 85 insertions, 41 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue index 9b28ce0d881..94cf1f84ec3 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue @@ -61,6 +61,7 @@ export default { </script> <template> + <!-- eslint-disable @gitlab/vue-no-data-toggle --> <button ref="dropdownButton" :class="{ 'js-extra-options': showExtraOptions }" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue index e3704198ad0..d80b66fd9be 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue @@ -1,5 +1,5 @@ <script> -import { mapState } from 'vuex'; +import { mapGetters, mapState } from 'vuex'; import DropdownContentsCreateView from './dropdown_contents_create_view.vue'; import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue'; @@ -18,6 +18,7 @@ export default { }, computed: { ...mapState(['showDropdownContentsCreateView']), + ...mapGetters(['isDropdownVariantSidebar']), dropdownContentsView() { if (this.showDropdownContentsCreateView) { return 'dropdown-contents-create-view'; @@ -25,11 +26,8 @@ export default { return 'dropdown-contents-labels-view'; }, directionStyle() { - if (this.renderOnTop) { - return { bottom: '100%' }; - } - - return {}; + const bottom = this.isDropdownVariantSidebar ? '3rem' : '2rem'; + return this.renderOnTop ? { bottom } : {}; }, }, }; @@ -37,7 +35,7 @@ export default { <template> <div - class="labels-select-dropdown-contents w-100 mt-1 mb-3 py-2 rounded-top rounded-bottom position-absolute" + class="labels-select-dropdown-contents gl-w-full gl-my-2 gl-py-3 gl-rounded-base gl-absolute" data-qa-selector="labels_dropdown_content" :style="directionStyle" > diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue index 6065b6c160c..86788a84260 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue @@ -83,12 +83,13 @@ export default { const highlightedLabel = this.$refs.labelsListContainer.querySelector('.is-focused'); if (highlightedLabel) { - const rect = highlightedLabel.getBoundingClientRect(); - if (rect.bottom > this.$refs.labelsListContainer.clientHeight) { - highlightedLabel.scrollIntoView(false); - } - if (rect.top < 0) { - highlightedLabel.scrollIntoView(); + const container = this.$refs.labelsListContainer.getBoundingClientRect(); + const label = highlightedLabel.getBoundingClientRect(); + + if (label.bottom > container.bottom) { + this.$refs.labelsListContainer.scrollTop += label.bottom - container.bottom; + } else if (label.top < container.top) { + this.$refs.labelsListContainer.scrollTop -= container.top - label.top; } } }, @@ -177,7 +178,7 @@ export default { class="labels-fetch-loading gl-align-items-center w-100 h-100" size="md" /> - <ul v-else class="list-unstyled mb-0"> + <ul v-else class="list-unstyled gl-mb-0 gl-word-break-word"> <label-item v-for="(label, index) in visibleLabels" :key="label.id" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue index e431fd000a6..e8fdf4bb0c2 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue @@ -22,7 +22,7 @@ export default { const { label, highlight, isLabelSet } = props; const labelColorBox = h('span', { - class: 'dropdown-label-box', + class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3', style: { backgroundColor: label.color, }, @@ -33,7 +33,7 @@ export default { const checkedIcon = h(GlIcon, { class: { - 'mr-2 align-self-center': true, + 'gl-mr-3 gl-flex-shrink-0': true, hidden: !isLabelSet, }, props: { @@ -43,7 +43,7 @@ export default { const noIcon = h('span', { class: { - 'mr-3 pr-2': true, + 'gl-mr-5 gl-pr-3': true, hidden: isLabelSet, }, attrs: { @@ -56,7 +56,7 @@ export default { const labelLink = h( GlLink, { - class: 'd-flex align-items-baseline text-break-word label-item', + class: 'gl-display-flex gl-align-items-center label-item gl-text-black-normal', on: { click: () => { listeners.clickLabel(label); @@ -70,8 +70,8 @@ export default { 'li', { class: { - 'd-block': true, - 'text-left': true, + 'gl-display-block': true, + 'gl-text-left': true, 'is-focused': highlight, }, }, diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue index f547433f322..a4462895f6a 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue @@ -268,7 +268,7 @@ export default { this.$emit('toggleCollapse'); }, setContentIsOnViewport(showDropdownContents) { - if (!this.isDropdownVariantEmbedded || !showDropdownContents) { + if (!showDropdownContents) { this.contentIsOnViewport = true; return; @@ -276,8 +276,7 @@ export default { this.$nextTick(() => { if (this.$refs.dropdownContents) { - const offset = { top: 100 }; - this.contentIsOnViewport = isInViewport(this.$refs.dropdownContents.$el, offset); + this.contentIsOnViewport = isInViewport(this.$refs.dropdownContents.$el); } }); }, @@ -313,6 +312,7 @@ export default { <dropdown-contents v-show="dropdownButtonVisible && showDropdownContents" ref="dropdownContents" + :render-on-top="!contentIsOnViewport" /> </template> <template v-if="isDropdownVariantStandalone || isDropdownVariantEmbedded"> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql new file mode 100644 index 00000000000..93b9833bb7d --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql @@ -0,0 +1,18 @@ +#import "~/graphql_shared/fragments/user.fragment.graphql" +#import "~/graphql_shared/fragments/user_availability.fragment.graphql" + +query issueAssignees($fullPath: ID!, $iid: String!) { + workspace: project(fullPath: $fullPath) { + __typename + issuable: issue(iid: $iid) { + __typename + id + assignees { + nodes { + ...User + ...UserAvailability + } + } + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql index 3885127fa8e..48787305459 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql @@ -13,12 +13,6 @@ query issueParticipants($fullPath: ID!, $iid: String!) { ...UserAvailability } } - assignees { - nodes { - ...User - ...UserAvailability - } - } } } } diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql new file mode 100644 index 00000000000..a2990d7171b --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql @@ -0,0 +1,14 @@ +#import "~/graphql_shared/fragments/issuable_timelogs.fragment.graphql" + +query timeTrackingReport($id: IssueID!) { + issuable: issue(id: $id) { + __typename + id + title + timelogs { + nodes { + ...TimelogFragment + } + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_assignees.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_assignees.query.graphql new file mode 100644 index 00000000000..53f7381760e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_assignees.query.graphql @@ -0,0 +1,16 @@ +#import "~/graphql_shared/fragments/user.fragment.graphql" +#import "~/graphql_shared/fragments/user_availability.fragment.graphql" + +query getMrAssignees($fullPath: ID!, $iid: String!) { + workspace: project(fullPath: $fullPath) { + issuable: mergeRequest(iid: $iid) { + id + assignees { + nodes { + ...User + ...UserAvailability + } + } + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql index 63482873b69..6adbd4098f2 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql @@ -11,12 +11,6 @@ query getMrParticipants($fullPath: ID!, $iid: String!) { ...UserAvailability } } - assignees { - nodes { - ...User - ...UserAvailability - } - } } } } diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql new file mode 100644 index 00000000000..753f1b345e3 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql @@ -0,0 +1,14 @@ +#import "~/graphql_shared/fragments/issuable_timelogs.fragment.graphql" + +query timeTrackingReport($id: MergeRequestID!) { + issuable: mergeRequest(id: $id) { + __typename + id + title + timelogs { + nodes { + ...TimelogFragment + } + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql index 3f40c0368d7..24de5ea4fe3 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql +++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql @@ -13,12 +13,6 @@ mutation issueSetAssignees($iid: String!, $assigneeUsernames: [String!]!, $fullP ...UserAvailability } } - participants { - nodes { - ...User - ...UserAvailability - } - } } } } |