diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue')
8 files changed, 76 insertions, 20 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue index cf77aa37d14..c65266fce5a 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue @@ -19,6 +19,9 @@ export default { handleButtonClick(e) { if (this.isDropdownVariantStandalone || this.isDropdownVariantEmbedded) { this.toggleDropdownContents(); + } + + if (this.isDropdownVariantStandalone) { e.stopPropagation(); } }, @@ -31,9 +34,9 @@ export default { class="labels-select-dropdown-button js-dropdown-button w-100 text-left" @click="handleButtonClick" > - <span class="dropdown-toggle-text flex-fill"> + <span class="dropdown-toggle-text gl-pointer-events-none flex-fill"> {{ dropdownButtonText }} </span> - <gl-icon name="chevron-down" class="pull-right" /> + <gl-icon name="chevron-down" class="gl-pointer-events-none float-right" /> </gl-button> </template> 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 ef8218b5135..6839354fb3a 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 @@ -9,6 +9,13 @@ export default { DropdownContentsLabelsView, DropdownContentsCreateView, }, + props: { + renderOnTop: { + type: Boolean, + required: false, + default: false, + }, + }, computed: { ...mapState(['showDropdownContentsCreateView']), dropdownContentsView() { @@ -17,6 +24,13 @@ export default { } return 'dropdown-contents-labels-view'; }, + directionStyle() { + if (this.renderOnTop) { + return { bottom: '100%' }; + } + + return {}; + }, }, }; </script> @@ -24,6 +38,7 @@ export default { <template> <div class="labels-select-dropdown-contents w-100 mt-1 mb-3 py-2 rounded-top rounded-bottom position-absolute" + :style="directionStyle" > <component :is="dropdownContentsView" /> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue index 94671f8a109..55e2fb68275 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue @@ -105,13 +105,13 @@ export default { :disabled="disableCreate" category="primary" variant="success" - class="pull-left d-flex align-items-center" + class="float-left d-flex align-items-center" @click="handleCreateClick" > <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" /> {{ __('Create') }} </gl-button> - <gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView"> + <gl-button class="float-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView"> {{ __('Cancel') }} </gl-button> </div> 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 ef506d00d9a..0b763aa4b72 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 @@ -45,6 +45,16 @@ export default { } return this.labels; }, + showListContainer() { + if (this.isDropdownVariantSidebar) { + return !this.labelsFetchInProgress; + } + + return true; + }, + showNoMatchingResultsMessage() { + return !this.labelsFetchInProgress && !this.visibleLabels.length; + }, }, watch: { searchKey(value) { @@ -132,6 +142,7 @@ export default { <div v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded" class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!" + data-testid="dropdown-title" > <span class="flex-grow-1">{{ labelsListTitle }}</span> <gl-button @@ -146,7 +157,12 @@ export default { <div class="dropdown-input" @click.stop="() => {}"> <gl-search-box-by-type v-model="searchKey" :autofocus="true" /> </div> - <div v-show="!labelsFetchInProgress" ref="labelsListContainer" class="dropdown-content"> + <div + v-show="showListContainer" + ref="labelsListContainer" + class="dropdown-content" + data-testid="dropdown-content" + > <smart-virtual-list :length="visibleLabels.length" :remain="$options.LIST_BUFFER_SIZE" @@ -163,12 +179,16 @@ export default { @clickLabel="handleLabelClick(label)" /> </li> - <li v-show="!visibleLabels.length" class="p-2 text-center"> + <li v-show="showNoMatchingResultsMessage" class="gl-p-3 gl-text-center"> {{ __('No matching results') }} </li> </smart-virtual-list> </div> - <div v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded" class="dropdown-footer"> + <div + v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded" + class="dropdown-footer" + data-testid="dropdown-footer" + > <ul class="list-unstyled"> <li v-if="allowLabelCreate"> <gl-link diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue index 081c892e09f..2d6a4a9758c 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue @@ -1,10 +1,10 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon } from '@gitlab/ui'; export default { components: { - GlDeprecatedButton, + GlButton, GlLoadingIcon, }, props: { @@ -23,16 +23,16 @@ export default { </script> <template> - <div class="title hide-collapsed append-bottom-10"> + <div class="title hide-collapsed gl-mb-3"> {{ __('Labels') }} <template v-if="allowLabelEdit"> <gl-loading-icon v-show="labelsSelectInProgress" inline /> - <gl-deprecated-button + <gl-button variant="link" - class="pull-right js-sidebar-dropdown-toggle" + class="float-right js-sidebar-dropdown-toggle" data-qa-selector="labels_edit_button" @click="toggleDropdownContents" - >{{ __('Edit') }}</gl-deprecated-button + >{{ __('Edit') }}</gl-button > </template> </div> 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 258a87e62b9..248e9929833 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 @@ -2,6 +2,7 @@ import $ from 'jquery'; import Vue from 'vue'; import Vuex, { mapState, mapActions, mapGetters } from 'vuex'; +import { isInViewport } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; import DropdownValueCollapsed from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue'; @@ -100,6 +101,11 @@ export default { default: __('Manage group labels'), }, }, + data() { + return { + contentIsOnViewport: true, + }; + }, computed: { ...mapState(['showDropdownButton', 'showDropdownContents']), ...mapGetters([ @@ -117,6 +123,9 @@ export default { selectedLabels, }); }, + showDropdownContents(showDropdownContents) { + this.setContentIsOnViewport(showDropdownContents); + }, }, mounted() { this.setInitialState({ @@ -203,6 +212,20 @@ export default { handleCollapsedValueClick() { this.$emit('toggleCollapse'); }, + setContentIsOnViewport(showDropdownContents) { + if (!this.isDropdownVariantEmbedded || !showDropdownContents) { + this.contentIsOnViewport = true; + + return; + } + + this.$nextTick(() => { + if (this.$refs.dropdownContents) { + const offset = { top: 100 }; + this.contentIsOnViewport = isInViewport(this.$refs.dropdownContents.$el, offset); + } + }); + }, }, }; </script> @@ -239,6 +262,7 @@ export default { <dropdown-contents v-if="dropdownButtonVisible && showDropdownContents" ref="dropdownContents" + :render-on-top="!contentIsOnViewport" /> </template> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js index e6053628eca..e624bd1eaee 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js @@ -1,4 +1,4 @@ -import flash from '~/flash'; +import { deprecatedCreateFlash as flash } from '~/flash'; import { __ } from '~/locale'; import axios from '~/lib/utils/axios_utils'; import * as types from './mutation_types'; @@ -56,6 +56,3 @@ export const createLabel = ({ state, dispatch }, label) => { export const updateSelectedLabels = ({ commit }, labels) => commit(types.UPDATE_SELECTED_LABELS, { labels }); - -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js index e035a866048..5a30e29cad3 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js @@ -50,6 +50,3 @@ export const isDropdownVariantStandalone = state => state.variant === DropdownVa * @param {object} state */ export const isDropdownVariantEmbedded = state => state.variant === DropdownVariant.Embedded; - -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; |