[refactor] updated layout/ui of filter menu

webapp/components/FilterMenu/CategoriesFilter.vue

@@ -1,26 +1,23 @@
 <template>
   <filter-menu-section :title="$t('filter-menu.categories')" class="categories-filter">
-    <template #filter-topics>
-      <li class="item item-all-topics">
-        <labeled-button
+    <template #filter-list>
+      <div class="item item-all-topics">
+        <base-button
           :filled="!filteredCategoryIds.length"
           :label="$t('filter-menu.all')"
           icon="check"
           @click="setResetCategories"
-        />
-      </li>
-      <li class="item item-save-topics">
-        <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
-      </li>
-    </template>
-
-    <template #filter-list>
+          size="small"
+        >
+        {{ $t('filter-menu.all') }}
+        </base-button>
+      </div>
       <div class="category-filter-list">
-        <ds-space margin="small" />
+        <!-- <ds-space margin="small" /> -->
         <base-button
           v-for="category in categories"
-          :key="category.id"
-          @click="toggleCategory(category.id)"
+          :key="category.id"          
+          @click="saveCategories(category.id)"
           :filled="filteredCategoryIds.includes(category.id)"
           :icon="category.icon"
           size="small"
@@ -39,7 +36,6 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import CategoryQuery from '~/graphql/CategoryQuery.js'
-import SaveCategories from '~/graphql/SaveCategories.js'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 import SortCategories from '~/mixins/sortCategoriesMixin.js'
@@ -69,19 +65,9 @@ export default {
       this.resetCategories()
       this.$emit('showFilterMenu')
     },
-    saveCategories() {
-      this.$apollo
-        .mutate({
-          mutation: SaveCategories(),
-          variables: { activeCategories: this.filteredCategoryIds },
-        })
-        .then(() => {
-          this.$emit('showFilterMenu')
-          this.$toast.success(this.$t('filter-menu.save.success'))
-        })
-        .catch(() => {
-          this.$toast.error(this.$t('filter-menu.save.error'))
-        })
+    saveCategories(categoryId) {
+      this.toggleCategory(categoryId)
+      this.$emit('updateCategories', categoryId)      
     },
   },
   apollo: {

webapp/components/FilterMenu/FilterMenuComponent.vue

@@ -1,10 +1,15 @@
 <template>
   <div>
     <div class="filter-menu-options">
-      <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+      <div class="filter-header">
+        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+        <div class="item-save-topics">
+          <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
+        </div>
+      </div>
       <post-type-filter />
       <following-filter />
-      <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
+      <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" @updateCategories="updateCategories" />
     </div>
     <div v-if="eventSetInPostTypeFilter" class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.eventsBy') }}</h2>
@@ -24,6 +29,8 @@ import PostTypeFilter from './PostTypeFilter'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
 import CategoriesFilter from './CategoriesFilter'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+import SaveCategories from '~/graphql/SaveCategories.js'
 
 export default {
   components: {
@@ -32,24 +39,52 @@ export default {
     OrderByFilter,
     CategoriesFilter,
     PostTypeFilter,
+    LabeledButton
   },
   data() {
     return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      categoriesActive: this.$env ? this.$env.CATEGORIES_ACTIVE : false,
     }
   },
   computed: {
     ...mapGetters({
       filteredPostTypes: 'posts/filteredPostTypes',
+      filteredCategoryIds: 'posts/filteredCategoryIds',
     }),
     eventSetInPostTypeFilter() {
-      return this.filteredPostTypes.includes('Event')
+      return this.filteredPostTypes ? this.filteredPostTypes.includes('Event') : null
     },
   },
+  methods: {
+    updateCategories(newCatId){
+      console.log(newCatId);
+    },
+    saveCategories(){      
+      this.$apollo
+        .mutate({
+          mutation: SaveCategories(),
+          variables: { activeCategories: this.filteredCategoryIds },
+        })
+        .then(() => {
+          this.$emit('showFilterMenu')
+          this.$toast.success(this.$t('filter-menu.save.success'))
+        })
+        .catch(() => {
+          this.$toast.error(this.$t('filter-menu.save.error'))
+        })
+    }
+  }
 }
 </script>
 
 <style lang="scss">
+.filter-header{
+  display: flex;
+  justify-content: space-between;
+  & .labeled-button{
+    margin-right: 2em;
+  } 
+}
 .filter-menu-options {
   max-width: $size-max-width-filter-menu;
   padding: $space-small $space-x-small;

webapp/components/FilterMenu/FilterMenuSection.vue

@@ -61,7 +61,6 @@ export default {
 
   > .filter-list {
     display: flex;
-    flex-wrap: wrap;
     flex-basis: 100%;
     flex-grow: 1;
 

webapp/components/FilterMenu/FollowingFilter.vue

@@ -12,6 +12,7 @@
           :filled="filteredByUsersFollowed"
           :title="$t('contribution.filterFollow')"
           @click="toggleFilteredByFollowed(currentUser.id)"
+          size="small"
         >
           {{ $t('contribution.filterFollow') }}
         </base-button>
@@ -23,6 +24,7 @@
           :filled="filteredByPostsInMyGroups"
           :title="$t('contribution.filterMyGroups')"
           @click="toggleFilteredByMyGroups()"
+          size="small"
         >
           {{ $t('contribution.filterMyGroups') }}
         </base-button>

webapp/components/FilterMenu/PostTypeFilter.vue

@@ -6,7 +6,7 @@
   >
     <template #filter-follower>
       <li class="item all-item">
-        <base-button
+        <labeled-button
           icon="check"
           :label="$t('filter-menu.all')"
           :filled="filteredPostTypes.length === 0"
@@ -14,7 +14,7 @@
           @click="togglePostType(null)"
         >
           {{ $t('filter-menu.all') }}
-        </base-button>
+        </labeled-button>
       </li>
       <li class="item article-item">
         <labeled-button