diff options
Diffstat (limited to 'app/assets/javascripts/search/sidebar/components/app.vue')
-rw-r--r-- | app/assets/javascripts/search/sidebar/components/app.vue | 81 |
1 files changed, 67 insertions, 14 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue index 9962f711892..532a66affd8 100644 --- a/app/assets/javascripts/search/sidebar/components/app.vue +++ b/app/assets/javascripts/search/sidebar/components/app.vue @@ -3,29 +3,46 @@ import { mapState, mapGetters } from 'vuex'; import ScopeLegacyNavigation from '~/search/sidebar/components/scope_legacy_navigation.vue'; import ScopeSidebarNavigation from '~/search/sidebar/components/scope_sidebar_navigation.vue'; +import SmallScreenDrawerNavigation from '~/search/sidebar/components/small_screen_drawer_navigation.vue'; import SidebarPortal from '~/super_sidebar/components/sidebar_portal.vue'; +import { toggleSuperSidebarCollapsed } from '~/super_sidebar/super_sidebar_collapsed_state_manager'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { SCOPE_ISSUES, SCOPE_MERGE_REQUESTS, SCOPE_BLOB, SCOPE_PROJECTS } from '../constants'; +import DomElementListener from '~/vue_shared/components/dom_element_listener.vue'; +import { + SCOPE_ISSUES, + SCOPE_MERGE_REQUESTS, + SCOPE_BLOB, + SCOPE_PROJECTS, + SCOPE_NOTES, + SCOPE_COMMITS, + SEARCH_TYPE_ADVANCED, +} from '../constants'; import IssuesFilters from './issues_filters.vue'; import MergeRequestsFilters from './merge_requests_filters.vue'; import BlobsFilters from './blobs_filters.vue'; import ProjectsFilters from './projects_filters.vue'; +import NotesFilters from './notes_filters.vue'; +import CommitsFilters from './commits_filters.vue'; export default { name: 'GlobalSearchSidebar', components: { IssuesFilters, - ScopeLegacyNavigation, - ScopeSidebarNavigation, - SidebarPortal, MergeRequestsFilters, BlobsFilters, ProjectsFilters, + NotesFilters, + ScopeLegacyNavigation, + ScopeSidebarNavigation, + SidebarPortal, + DomElementListener, + SmallScreenDrawerNavigation, + CommitsFilters, }, mixins: [glFeatureFlagsMixin()], computed: { // useSidebarNavigation refers to whether the new left sidebar navigation is enabled - ...mapState(['useSidebarNavigation']), + ...mapState(['useSidebarNavigation', 'searchType']), ...mapGetters(['currentScope']), showIssuesFilters() { return this.currentScope === SCOPE_ISSUES; @@ -34,11 +51,25 @@ export default { return this.currentScope === SCOPE_MERGE_REQUESTS; }, showBlobFilters() { - return this.currentScope === SCOPE_BLOB; + return this.currentScope === SCOPE_BLOB && this.searchType === SEARCH_TYPE_ADVANCED; }, showProjectsFilters() { - // for now the feature flag is here. Since we have only one filter in projects scope - return this.currentScope === SCOPE_PROJECTS && this.glFeatures.searchProjectsHideArchived; + return this.currentScope === SCOPE_PROJECTS; + }, + showNotesFilters() { + return ( + this.currentScope === SCOPE_NOTES && + this.searchType === SEARCH_TYPE_ADVANCED && + this.glFeatures.searchNotesHideArchivedProjects + ); + }, + showCommitsFilters() { + // for now, the feature flag is placed here. Since we have only one filter in commits scope + return ( + this.currentScope === SCOPE_COMMITS && + this.searchType === SEARCH_TYPE_ADVANCED && + this.glFeatures.searchCommitsHideArchivedProjects + ); }, showScopeNavigation() { // showScopeNavigation refers to whether the scope navigation should be shown @@ -47,27 +78,49 @@ export default { return Boolean(this.currentScope); }, }, + methods: { + toggleFiltersFromSidebar() { + toggleSuperSidebarCollapsed(); + }, + }, }; </script> <template> <section v-if="useSidebarNavigation"> + <dom-element-listener selector="#js-open-mobile-filters" @click="toggleFiltersFromSidebar" /> <sidebar-portal> <scope-sidebar-navigation /> <issues-filters v-if="showIssuesFilters" /> <merge-requests-filters v-if="showMergeRequestFilters" /> <blobs-filters v-if="showBlobFilters" /> <projects-filters v-if="showProjectsFilters" /> + <notes-filters v-if="showNotesFilters" /> + <commits-filters v-if="showCommitsFilters" /> </sidebar-portal> </section> + <section v-else-if="showScopeNavigation" - class="search-sidebar gl-display-flex gl-flex-direction-column gl-md-mr-5 gl-mb-6 gl-mt-5" + class="gl-display-flex gl-flex-direction-column gl-lg-mr-0 gl-md-mr-5 gl-lg-mb-6 gl-lg-mt-5" > - <scope-legacy-navigation /> - <issues-filters v-if="showIssuesFilters" /> - <merge-requests-filters v-if="showMergeRequestFilters" /> - <blobs-filters v-if="showBlobFilters" /> - <projects-filters v-if="showProjectsFilters" /> + <div class="search-sidebar gl-display-none gl-lg-display-block"> + <scope-legacy-navigation /> + <issues-filters v-if="showIssuesFilters" /> + <merge-requests-filters v-if="showMergeRequestFilters" /> + <blobs-filters v-if="showBlobFilters" /> + <projects-filters v-if="showProjectsFilters" /> + <notes-filters v-if="showNotesFilters" /> + <commits-filters v-if="showCommitsFilters" /> + </div> + <small-screen-drawer-navigation class="gl-lg-display-none"> + <scope-legacy-navigation /> + <issues-filters v-if="showIssuesFilters" /> + <merge-requests-filters v-if="showMergeRequestFilters" /> + <blobs-filters v-if="showBlobFilters" /> + <projects-filters v-if="showProjectsFilters" /> + <notes-filters v-if="showNotesFilters" /> + <commits-filters v-if="showCommitsFilters" /> + </small-screen-drawer-navigation> </section> </template> |