diff options
Diffstat (limited to 'app/assets/javascripts/search/sidebar')
5 files changed, 67 insertions, 33 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue b/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue index 38dccb9675d..4ddf695f61a 100644 --- a/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue +++ b/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue @@ -1,5 +1,5 @@ <script> -import { mapState } from 'vuex'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { confidentialFilterData } from '../constants/confidential_filter_data'; import RadioFilter from './radio_filter.vue'; @@ -8,10 +8,10 @@ export default { components: { RadioFilter, }, + mixins: [glFeatureFlagsMixin()], computed: { - ...mapState(['query']), - showDropdown() { - return Object.values(confidentialFilterData.scopes).includes(this.query.scope); + ffBasedXPadding() { + return this.glFeatures.searchPageVerticalNav ? 'gl-px-5' : 'gl-px-0'; }, }, confidentialFilterData, @@ -19,8 +19,8 @@ export default { </script> <template> - <div v-if="showDropdown"> - <radio-filter :filter-data="$options.confidentialFilterData" /> + <div> + <radio-filter :class="ffBasedXPadding" :filter-data="$options.confidentialFilterData" /> <hr class="gl-my-5 gl-border-gray-100" /> </div> </template> diff --git a/app/assets/javascripts/search/sidebar/components/results_filters.vue b/app/assets/javascripts/search/sidebar/components/results_filters.vue index 5b53f94bb53..9b993ab9a86 100644 --- a/app/assets/javascripts/search/sidebar/components/results_filters.vue +++ b/app/assets/javascripts/search/sidebar/components/results_filters.vue @@ -2,6 +2,8 @@ import { GlButton, GlLink } from '@gitlab/ui'; import { mapActions, mapState } from 'vuex'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { confidentialFilterData } from '../constants/confidential_filter_data'; +import { stateFilterData } from '../constants/state_filter_data'; import ConfidentialityFilter from './confidentiality_filter.vue'; import StatusFilter from './status_filter.vue'; @@ -22,6 +24,15 @@ export default { searchPageVerticalNavFeatureFlag() { return this.glFeatures.searchPageVerticalNav; }, + showConfidentialityFilter() { + return Object.values(confidentialFilterData.scopes).includes(this.urlQuery.scope); + }, + showStatusFilter() { + return Object.values(stateFilterData.scopes).includes(this.urlQuery.scope); + }, + ffBasedXPadding() { + return this.glFeatures.searchPageVerticalNav ? 'gl-px-5' : 'gl-px-0'; + }, }, methods: { ...mapActions(['applyQuery', 'resetQuery']), @@ -30,14 +41,14 @@ export default { </script> <template> - <form - :class="searchPageVerticalNavFeatureFlag ? 'gl-px-5' : 'gl-px-0'" - @submit.prevent="applyQuery" - > - <hr v-if="searchPageVerticalNavFeatureFlag" class="gl-my-5 gl-border-gray-100" /> - <status-filter /> - <confidentiality-filter /> - <div class="gl-display-flex gl-align-items-center gl-mt-4"> + <form class="gl-pt-5 gl-md-pt-0" @submit.prevent="applyQuery"> + <hr + v-if="searchPageVerticalNavFeatureFlag" + class="gl-my-5 gl-border-gray-100 gl-display-none gl-md-display-block" + /> + <status-filter v-if="showStatusFilter" /> + <confidentiality-filter v-if="showConfidentialityFilter" /> + <div class="gl-display-flex gl-align-items-center gl-mt-4" :class="ffBasedXPadding"> <gl-button category="primary" variant="confirm" type="submit" :disabled="!sidebarDirty"> {{ __('Apply') }} </gl-button> diff --git a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_navigation.vue index f5e1525090e..7a03306e2f9 100644 --- a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue +++ b/app/assets/javascripts/search/sidebar/components/scope_navigation.vue @@ -1,15 +1,23 @@ <script> -import { GlNav, GlNavItem } from '@gitlab/ui'; +import { GlNav, GlNavItem, GlIcon } from '@gitlab/ui'; import { mapActions, mapState } from 'vuex'; -import { formatNumber } from '~/locale'; +import { formatNumber, s__ } from '~/locale'; import Tracking from '~/tracking'; -import { NAV_LINK_DEFAULT_CLASSES, NUMBER_FORMATING_OPTIONS } from '../constants'; +import { + NAV_LINK_DEFAULT_CLASSES, + NUMBER_FORMATING_OPTIONS, + NAV_LINK_COUNT_DEFAULT_CLASSES, +} from '../constants'; export default { name: 'ScopeNavigation', + i18n: { + countOverLimitLabel: s__('GlobalSearch|Result count is over limit.'), + }, components: { GlNav, GlNavItem, + GlIcon, }, mixins: [Tracking.mixin()], computed: { @@ -20,9 +28,6 @@ export default { }, methods: { ...mapActions(['fetchSidebarCount']), - activeClasses(currentScope) { - return currentScope === this.urlQuery.scope ? 'gl-font-weight-bold' : ''; - }, showFormatedCount(count) { if (!count) { return '0'; @@ -30,17 +35,27 @@ export default { const countNumber = parseInt(count.replace(/,/g, ''), 10); return formatNumber(countNumber, NUMBER_FORMATING_OPTIONS); }, + isCountOverLimit(count) { + return count.includes('+'); + }, handleClick(scope) { this.track('click_menu_item', { label: `vertical_navigation_${scope}` }); }, - linkClasses(scope) { + linkClasses(isHighlighted) { + return [...this.$options.NAV_LINK_DEFAULT_CLASSES, { 'gl-font-weight-bold': isHighlighted }]; + }, + countClasses(isHighlighted) { return [ - { 'gl-font-weight-bold': scope === this.urlQuery.scope }, - ...this.$options.NAV_LINK_DEFAULT_CLASSES, + ...this.$options.NAV_LINK_COUNT_DEFAULT_CLASSES, + isHighlighted ? 'gl-text-gray-900' : 'gl-text-gray-500', ]; }, + isActive(scope, index) { + return this.urlQuery.scope ? this.urlQuery.scope === scope : index === 0; + }, }, NAV_LINK_DEFAULT_CLASSES, + NAV_LINK_COUNT_DEFAULT_CLASSES, }; </script> @@ -50,14 +65,20 @@ export default { <gl-nav-item v-for="(item, scope, index) in navigation" :key="scope" - :link-classes="linkClasses(scope)" + :link-classes="linkClasses(isActive(scope, index))" class="gl-mb-1" :href="item.link" - :active="urlQuery.scope ? urlQuery.scope === scope : index === 0" + :active="isActive(scope, index)" @click="handleClick(scope)" ><span>{{ item.label }}</span - ><span v-if="item.count" class="gl-font-sm gl-font-weight-normal"> - {{ showFormatedCount(item.count) }} + ><span v-if="item.count" :class="countClasses(isActive(scope, index))"> + {{ showFormatedCount(item.count) + }}<gl-icon + v-if="isCountOverLimit(item.count)" + name="plus" + :aria-label="$options.i18n.countOverLimitLabel" + :size="8" + /> </span> </gl-nav-item> </gl-nav> diff --git a/app/assets/javascripts/search/sidebar/components/status_filter.vue b/app/assets/javascripts/search/sidebar/components/status_filter.vue index 5cec2090906..eaf7d95822a 100644 --- a/app/assets/javascripts/search/sidebar/components/status_filter.vue +++ b/app/assets/javascripts/search/sidebar/components/status_filter.vue @@ -1,5 +1,5 @@ <script> -import { mapState } from 'vuex'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { stateFilterData } from '../constants/state_filter_data'; import RadioFilter from './radio_filter.vue'; @@ -8,10 +8,10 @@ export default { components: { RadioFilter, }, + mixins: [glFeatureFlagsMixin()], computed: { - ...mapState(['query']), - showDropdown() { - return Object.values(stateFilterData.scopes).includes(this.query.scope); + ffBasedXPadding() { + return this.glFeatures.searchPageVerticalNav ? 'gl-px-5' : 'gl-px-0'; }, }, stateFilterData, @@ -19,8 +19,8 @@ export default { </script> <template> - <div v-if="showDropdown"> - <radio-filter :filter-data="$options.stateFilterData" /> + <div> + <radio-filter :class="ffBasedXPadding" :filter-data="$options.stateFilterData" /> <hr class="gl-my-5 gl-border-gray-100" /> </div> </template> diff --git a/app/assets/javascripts/search/sidebar/constants/index.js b/app/assets/javascripts/search/sidebar/constants/index.js index 3621138afe4..a9c031f91a4 100644 --- a/app/assets/javascripts/search/sidebar/constants/index.js +++ b/app/assets/javascripts/search/sidebar/constants/index.js @@ -9,3 +9,5 @@ export const NAV_LINK_DEFAULT_CLASSES = [ 'gl-justify-content-space-between', 'gl-text-gray-900', ]; + +export const NAV_LINK_COUNT_DEFAULT_CLASSES = ['gl-font-sm', 'gl-font-weight-normal']; |