diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue | 26 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/common.scss | 2 |
2 files changed, 26 insertions, 2 deletions
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 b90f441b8ec..5e41a155ef6 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 @@ -122,9 +122,14 @@ export default { this.$store.subscribeAction({ after: this.handleVuexActionDispatch, }); + + document.addEventListener('click', this.handleDocumentClick); + }, + beforeDestroy() { + document.removeEventListener('click', this.handleDocumentClick); }, methods: { - ...mapActions(['setInitialState']), + ...mapActions(['setInitialState', 'toggleDropdownContents']), /** * This method differentiates between * dispatched actions and calls necessary method. @@ -138,6 +143,22 @@ export default { this.handleDropdownClose(state.labels.filter(label => label.touched)); } }, + /** + * This method listens for document-wide click event + * and toggle dropdown if user clicks anywhere outside + * the dropdown while dropdown is visible. + */ + handleDocumentClick({ target }) { + if ( + this.showDropdownButton && + this.showDropdownContents && + !target?.classList.contains('js-sidebar-dropdown-toggle') && + !this.$refs.dropdownButtonCollapsed?.$el.contains(target) && + !this.$refs.dropdownContents?.$el.contains(target) + ) { + this.toggleDropdownContents(); + } + }, handleDropdownClose(labels) { // Only emit label updates if there are any labels to update // on UI. @@ -156,6 +177,7 @@ export default { <div v-if="!dropdownOnly"> <dropdown-value-collapsed v-if="allowLabelCreate" + ref="dropdownButtonCollapsed" :labels="selectedLabels" @onValueClick="handleCollapsedValueClick" /> @@ -167,7 +189,7 @@ export default { <slot></slot> </dropdown-value> <dropdown-button v-show="showDropdownButton" /> - <dropdown-contents v-if="showDropdownButton && showDropdownContents" /> + <dropdown-contents v-if="showDropdownButton && showDropdownContents" ref="dropdownContents" /> </div> </div> </template> diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 408ca249be2..20846502e85 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -413,6 +413,7 @@ img.emoji { .prepend-left-20 { margin-left: 20px; } .prepend-left-32 { margin-left: 32px; } .prepend-left-64 { margin-left: 64px; } +.append-right-2 { margin-right: 2px; } .append-right-4 { margin-right: 4px; } .append-right-5 { margin-right: 5px; } .append-right-8 { margin-right: 8px; } @@ -424,6 +425,7 @@ img.emoji { .append-right-48 { margin-right: 48px; } .prepend-right-32 { margin-right: 32px; } .append-bottom-0 { margin-bottom: 0; } +.append-bottom-2 { margin-bottom: 2px; } .append-bottom-4 { margin-bottom: $gl-padding-4; } .append-bottom-5 { margin-bottom: 5px; } .append-bottom-8 { margin-bottom: $grid-size; } |