diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
commit | 36a59d088eca61b834191dacea009677a96c052f (patch) | |
tree | e4f33972dab5d8ef79e3944a9f403035fceea43f /app/assets/javascripts/header_search | |
parent | a1761f15ec2cae7c7f7bbda39a75494add0dfd6f (diff) |
Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42
Diffstat (limited to 'app/assets/javascripts/header_search')
-rw-r--r-- | app/assets/javascripts/header_search/components/app.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/header_search/index.js | 16 |
2 files changed, 18 insertions, 2 deletions
diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue index 4406cacdf3f..adf304aebc7 100644 --- a/app/assets/javascripts/header_search/components/app.vue +++ b/app/assets/javascripts/header_search/components/app.vue @@ -120,9 +120,11 @@ export default { ...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']), openDropdown() { this.showDropdown = true; + this.$emit('toggleDropdown', this.showDropdown); }, closeDropdown() { this.showDropdown = false; + this.$emit('toggleDropdown', this.showDropdown); }, submitSearch() { return visitUrl(this.currentFocusedOption?.url || this.searchQuery); @@ -146,7 +148,7 @@ export default { v-outside="closeDropdown" role="search" :aria-label="$options.i18n.searchGitlab" - class="header-search gl-relative gl-rounded-base" + class="header-search gl-relative gl-rounded-base gl-w-full" :class="headerSearchActivityDescriptor" > <gl-search-box-by-type diff --git a/app/assets/javascripts/header_search/index.js b/app/assets/javascripts/header_search/index.js index 4af8513ecdb..b2c505d569f 100644 --- a/app/assets/javascripts/header_search/index.js +++ b/app/assets/javascripts/header_search/index.js @@ -7,6 +7,7 @@ Vue.use(Translate); export const initHeaderSearchApp = (search = '') => { const el = document.getElementById('js-header-search'); + let navBarEl = null; if (!el) { return false; @@ -19,8 +20,21 @@ export const initHeaderSearchApp = (search = '') => { return new Vue({ el, store: createStore({ searchPath, issuesPath, mrPath, autocompletePath, searchContext, search }), + mounted() { + navBarEl = document.querySelector('.header-content'); + }, render(createElement) { - return createElement(HeaderSearchApp); + return createElement(HeaderSearchApp, { + on: { + toggleDropdown: (isVisible = false) => { + if (isVisible) { + navBarEl?.classList.add('header-search-is-active'); + } else { + navBarEl?.classList.remove('header-search-is-active'); + } + }, + }, + }); }, }); }; |