Merge pull request #1338 from Human-Connection/1335-filter_bubble_indicator

Implement visual feedback if filter is active

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -54,6 +54,7 @@ describe('FilterPosts.vue', () => {
       'postsFilter/TOGGLE_CATEGORY': jest.fn(),
     }
     getters = {
+      'postsFilter/isActive': () => false,
       'auth/user': () => {
         return { id: 'u34' }
       },
@@ -63,7 +64,7 @@ describe('FilterPosts.vue', () => {
     const openFilterPosts = () => {
       const store = new Vuex.Store({ mutations, getters })
       const wrapper = mount(FilterPosts, { mocks, localVue, propsData, store })
-      menuToggle = wrapper.findAll('a').at(0)
+      menuToggle = wrapper.findAll('button').at(0)
       menuToggle.trigger('click')
       return wrapper
     }
@@ -81,13 +82,13 @@ describe('FilterPosts.vue', () => {
 
     it('starts with all categories button active', () => {
       const wrapper = openFilterPosts()
-      allCategoriesButton = wrapper.findAll('button').at(0)
+      allCategoriesButton = wrapper.findAll('button').at(1)
       expect(allCategoriesButton.attributes().class).toContain('ds-button-primary')
     })
 
     it('calls TOGGLE_CATEGORY when clicked', () => {
       const wrapper = openFilterPosts()
-      environmentAndNatureButton = wrapper.findAll('button').at(1)
+      environmentAndNatureButton = wrapper.findAll('button').at(2)
       environmentAndNatureButton.trigger('click')
       expect(mutations['postsFilter/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4')
     })
@@ -95,7 +96,7 @@ describe('FilterPosts.vue', () => {
     it('sets category button attribute `primary` when corresponding category is filtered', () => {
       getters['postsFilter/filteredCategoryIds'] = jest.fn(() => ['cat9'])
       const wrapper = openFilterPosts()
-      democracyAndPoliticsButton = wrapper.findAll('button').at(3)
+      democracyAndPoliticsButton = wrapper.findAll('button').at(4)
       expect(democracyAndPoliticsButton.attributes().class).toContain('ds-button-primary')
     })
 

webapp/components/FilterPosts/FilterPosts.vue

@@ -1,9 +1,15 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
-    <a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()">
-      <ds-icon style="margin: 12px 0px 0px 10px;" name="filter" size="large" />
-      <ds-icon style="margin: 7px 0px 0px 2px" size="xx-small" name="angle-down" />
-    </a>
+    <ds-button
+      slot="default"
+      icon="filter"
+      :primary="filterActive"
+      :ghost="!filterActive"
+      slot-scope="{ toggleMenu }"
+      @click.prevent="toggleMenu()"
+    >
+      <ds-icon size="xx-small" name="angle-down" />
+    </ds-button>
     <template slot="popover">
       <filter-posts-menu-items :chunk="chunk" :user="currentUser" />
     </template>
@@ -28,6 +34,7 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
+      filterActive: 'postsFilter/isActive',
     }),
     chunk() {
       return _.chunk(this.categories, 2)

webapp/layouts/default.vue

@@ -3,7 +3,7 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
-          <ds-flex class="main-navigation-flex">
+          <ds-flex class="main-navigation-flex" centered>
             <ds-flex-item :width="{ lg: '3.5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
               <a @click="redirectToRoot">
@@ -293,6 +293,11 @@ export default {
   padding-top: 6rem;
   padding-bottom: 5rem;
 }
+
+.main-navigation-flex {
+  align-items: center;
+}
+
 .main-navigation {
   a {
     color: $text-color-soft;

webapp/store/postsFilter.js

@@ -2,11 +2,16 @@ import get from 'lodash/get'
 import update from 'lodash/update'
 import xor from 'lodash/xor'
 import isEmpty from 'lodash/isEmpty'
+import isEqual from 'lodash/isEqual'
 import clone from 'lodash/clone'
 
+const defaultFilter = {}
+
 export const state = () => {
   return {
-    filter: {},
+    filter: {
+      ...defaultFilter,
+    },
   }
 }
 
@@ -38,6 +43,9 @@ export const mutations = {
 }
 
 export const getters = {
+  isActive(state) {
+    return !isEqual(state.filter, defaultFilter)
+  },
   postsFilter(state) {
     return state.filter
   },

webapp/store/postsFilter.spec.js

@@ -4,6 +4,15 @@ let state
 let testAction
 
 describe('getters', () => {
+  describe('isActive', () => {
+    it('returns true if filter differs from default setting', () => {
+      state = { filter: {} }
+      expect(getters.isActive(state)).toEqual(false)
+      state = { filter: { categories_some: { id_in: [24] } } }
+      expect(getters.isActive(state)).toEqual(true)
+    })
+  })
+
   describe('filteredCategoryIds', () => {
     it('returns category ids if filter is set', () => {
       state = { filter: { categories_some: { id_in: [24] } } }