From b9067d79962eecf342140bc7a9ef4b06cfa1b62b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 23 Jan 2023 20:28:20 +0100
Subject: [PATCH 1/8] filter menu in content page

---
 webapp/components/FilterMenu/FilterMenu.vue   | 34 ++----------
 .../FilterMenu/FilterMenuComponent.vue        | 46 ++++++++++++++++
 webapp/layouts/default.vue                    |  2 +-
 webapp/pages/index.vue                        | 54 ++++++++++++++++++-
 4 files changed, 103 insertions(+), 33 deletions(-)
 create mode 100644 webapp/components/FilterMenu/FilterMenuComponent.vue

diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 28cda6669..2d4d836d5 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -11,15 +11,7 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </base-button>
     <template slot="popover">
-      <div class="filter-menu-options">
-        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
-        <following-filter />
-        <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
-      </div>
-      <div class="filter-menu-options">
-        <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
-        <order-by-filter />
-      </div>
+      <filter-menu-component :showMobileMenu="showMobileMenu" />
     </template>
   </dropdown>
 </template>
@@ -27,21 +19,12 @@
 <script>
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
-import FollowingFilter from './FollowingFilter'
-import OrderByFilter from './OrderByFilter'
-import CategoriesFilter from './CategoriesFilter'
+import FilterMenuComponent from './FilterMenuComponent'
 
 export default {
   components: {
     Dropdown,
-    FollowingFilter,
-    OrderByFilter,
-    CategoriesFilter,
-  },
-  data() {
-    return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-    }
+    FilterMenuComponent,
   },
   props: {
     placement: { type: String },
@@ -55,14 +38,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.filter-menu-options {
-  max-width: $size-max-width-filter-menu;
-  padding: $space-small $space-x-small;
-
-  > .title {
-    font-size: $font-size-large;
-  }
-}
-</style>
diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
new file mode 100644
index 000000000..3f22aaed8
--- /dev/null
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="filter-menu-options">
+      <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+      <following-filter />
+      <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
+    </div>
+    <div class="filter-menu-options">
+      <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
+      <order-by-filter />
+    </div>
+  </div>
+</template>
+
+<script>
+import FollowingFilter from './FollowingFilter'
+import OrderByFilter from './OrderByFilter'
+import CategoriesFilter from './CategoriesFilter'
+
+export default {
+  components: {
+    FollowingFilter,
+    OrderByFilter,
+    CategoriesFilter,
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
+}
+</script>
+
+<style lang="scss">
+.filter-menu-options {
+  max-width: $size-max-width-filter-menu;
+  padding: $space-small $space-x-small;
+
+  > .title {
+    font-size: $font-size-large;
+  }
+}
+</style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 06c3315cd..82cd2f598 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -5,7 +5,7 @@
     </div>
     <ds-container>
       <div class="main-container">
-        <nuxt />
+        <nuxt :showMobileMenu="showMobileMenu" />
       </div>
     </ds-container>
     <page-footer v-if="!showMobileMenu" />
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index aacdc4344..79291c623 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -4,6 +4,39 @@
       <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
         <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
+      <!--Filter Button-->
+
+      <ds-grid-item
+        v-if="categoriesActive"
+        :row-span="1"
+        column-span="fullWidth"
+        style="z-index: 1"
+      >
+        <span v-if="Object.keys(postsFilter).length !== 0">
+          <ds-chip
+            v-for="filter in postsFilter.categories_some.id_in"
+            @remove="removeFilter"
+            removable
+            :key="filter"
+            color="inverse"
+            size="large"
+          >
+            {{ filter }}
+          </ds-chip>
+        </span>
+        <ds-button :icon="filterButtonIcon" right @click="showFilter = !showFilter">
+          {{ filterButtonText }}
+        </ds-button>
+
+        <div
+          style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
+          v-if="showFilter"
+        >
+          <filter-menu-component :showMobileMenu="showMobileMenu" />
+        </div>
+      </ds-grid-item>
+      <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
+
       <!-- donation info -->
       <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
         <donation-info :goal="goal" :progress="progress" />
@@ -65,7 +98,7 @@ import { mapGetters, mapMutations } from 'vuex'
 import { DonationsQuery } from '~/graphql/Donations'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import UpdateQuery from '~/components/utils/UpdateQuery'
-
+import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
 export default {
   components: {
     DonationInfo,
@@ -74,11 +107,16 @@ export default {
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,
+    FilterMenuComponent,
   },
   mixins: [postListActions],
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
   data() {
     const { hashtag = null } = this.$route.query
     return {
+      showFilter: false,
       showDonations: true,
       goal: 15000,
       progress: 7000,
@@ -88,6 +126,7 @@ export default {
       offset: 0,
       pageSize: 12,
       hashtag,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
     }
   },
   computed: {
@@ -95,6 +134,16 @@ export default {
       postsFilter: 'posts/filter',
       orderBy: 'posts/orderBy',
     }),
+    filterButtonIcon() {
+      if (Object.keys(this.postsFilter).length === 0) {
+        return this.showFilter ? 'angle-down' : 'angle-up'
+      }
+      return 'filter'
+    },
+    filterButtonText() {
+      if (this.postsFilter.author) return 'Beiträge von Freunden filtern'
+      return 'Beiträge filtern'
+    },
     finalFilters() {
       let filter = this.postsFilter
       if (this.hashtag) {
@@ -124,6 +173,9 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    removeFilter() {
+      alert('Filter löschen')
+    },
     clearSearch() {
       this.$router.push({ path: '/' })
       this.hashtag = null

From 8759c4a41c1f06a90c45c264bb995cd2b8e9f52a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 24 Jan 2023 08:11:19 +0100
Subject: [PATCH 2/8] find key in object change

---
 webapp/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 79291c623..09e51f7cc 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -12,7 +12,7 @@
         column-span="fullWidth"
         style="z-index: 1"
       >
-        <span v-if="Object.keys(postsFilter).length !== 0">
+        <span v-if="postsFilter['categories_some']">
           <ds-chip
             v-for="filter in postsFilter.categories_some.id_in"
             @remove="removeFilter"

From 983e7e12f4da95d8224348ff590b24950d56c47a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 09:27:30 +0100
Subject: [PATCH 3/8] filter for themen and friends in content page per button,
 close funktion

---
 webapp/locales/de.json |  6 ++++-
 webapp/locales/en.json |  6 ++++-
 webapp/pages/index.vue | 56 +++++++++++++++++++++++++++---------------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index d3062584a..1acec03b0 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -267,7 +267,11 @@
       "happy": "Glücklich",
       "surprised": "Erstaunt"
     },
-    "filterALL": "Alle Beiträge anzeigen",
+    "filterMasonryGrid": {
+      "noFilter":"Beiträge filtern",
+      "myTheme":"Meine Themen",
+      "myFriends":"Beiträge von meinen Freunden"
+    },
     "filterFollow": "Beiträge von Benutzern filtern, denen ich folge",
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
     "languageSelectLabel": "Sprache Deines Beitrags",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index c4bb105cc..b47bb95be 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -267,7 +267,11 @@
       "happy": "Happy",
       "surprised": "Surprised"
     },
-    "filterALL": "View all contributions",
+    "filterMasonryGrid": {
+      "noFilter": "Filter Posts",
+      "myTheme": "My Themes",
+      "myFriends": "Posts From My Friends"
+    },
     "filterFollow": "Filter contributions from users I follow",
     "inappropriatePicture": "This image may be inappropriate for some people.",
     "languageSelectLabel": "Language of your contribution",
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 09e51f7cc..61a945e1f 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -12,27 +12,40 @@
         column-span="fullWidth"
         style="z-index: 1"
       >
-        <span v-if="postsFilter['categories_some']">
-          <ds-chip
-            v-for="filter in postsFilter.categories_some.id_in"
-            @remove="removeFilter"
-            removable
-            :key="filter"
-            color="inverse"
-            size="large"
+        <ds-button
+          class="my-filter-button"
+          v-if="!postsFilter['categories_some'] && !postsFilter['author']" 
+          :icon="filterButtonIcon" 
+          right 
+          @click="showFilter = !showFilter">
+          {{ $t('contribution.filterMasonryGrid.noFilter') }}
+        </ds-button>
+
+        <ds-button 
+          class="my-filter-button" 
+          v-if="postsFilter['categories_some']" 
+          :icon="filterButtonIcon" 
+          right 
+          @click="showFilter = !showFilter">
+          {{ $t('contribution.filterMasonryGrid.myTheme') }}
+        </ds-button>
+
+        <ds-button 
+          class="my-filter-button" 
+          v-if="postsFilter['author']" 
+          :icon="filterButtonIcon" 
+          right 
+          @click="showFilter = !showFilter"
           >
-            {{ filter }}
-          </ds-chip>
-        </span>
-        <ds-button :icon="filterButtonIcon" right @click="showFilter = !showFilter">
-          {{ filterButtonText }}
+          {{ $t('contribution.filterMasonryGrid.myFriends') }}
         </ds-button>
 
         <div
+          id="my-filter"
           style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
           v-if="showFilter"
         >
-          <filter-menu-component :showMobileMenu="showMobileMenu" />
+          <filter-menu-component :showMobileMenu="showMobileMenu"/>
         </div>
       </ds-grid-item>
       <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
@@ -140,10 +153,6 @@ export default {
       }
       return 'filter'
     },
-    filterButtonText() {
-      if (this.postsFilter.author) return 'Beiträge von Freunden filtern'
-      return 'Beiträge filtern'
-    },
     finalFilters() {
       let filter = this.postsFilter
       if (this.hashtag) {
@@ -167,14 +176,21 @@ export default {
       this.resetCategories()
       this.toggleCategory(this.categoryId)
     }
+     document.addEventListener('click', this.removeFilter)
   },
   methods: {
     ...mapMutations({
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
-    removeFilter() {
-      alert('Filter löschen')
+    removeFilter(e) {  
+      if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) {
+        if (!this.showFilter) return 
+        this.showFilter = false          
+      }     
+    },
+    beforeDestroy() {
+       document.removeEventListener('click', this.removeFilter);
     },
     clearSearch() {
       this.$router.push({ path: '/' })

From 5ceec78aee59c62d22a89fe445f33b9dad658ab7 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 09:28:28 +0100
Subject: [PATCH 4/8] fix: lint

---
 webapp/pages/index.vue | 48 ++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 61a945e1f..bf8bc49f1 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -14,29 +14,31 @@
       >
         <ds-button
           class="my-filter-button"
-          v-if="!postsFilter['categories_some'] && !postsFilter['author']" 
-          :icon="filterButtonIcon" 
-          right 
-          @click="showFilter = !showFilter">
+          v-if="!postsFilter['categories_some'] && !postsFilter['author']"
+          :icon="filterButtonIcon"
+          right
+          @click="showFilter = !showFilter"
+        >
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
         </ds-button>
 
-        <ds-button 
-          class="my-filter-button" 
-          v-if="postsFilter['categories_some']" 
-          :icon="filterButtonIcon" 
-          right 
-          @click="showFilter = !showFilter">
+        <ds-button
+          class="my-filter-button"
+          v-if="postsFilter['categories_some']"
+          :icon="filterButtonIcon"
+          right
+          @click="showFilter = !showFilter"
+        >
           {{ $t('contribution.filterMasonryGrid.myTheme') }}
         </ds-button>
 
-        <ds-button 
-          class="my-filter-button" 
-          v-if="postsFilter['author']" 
-          :icon="filterButtonIcon" 
-          right 
+        <ds-button
+          class="my-filter-button"
+          v-if="postsFilter['author']"
+          :icon="filterButtonIcon"
+          right
           @click="showFilter = !showFilter"
-          >
+        >
           {{ $t('contribution.filterMasonryGrid.myFriends') }}
         </ds-button>
 
@@ -45,7 +47,7 @@
           style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
           v-if="showFilter"
         >
-          <filter-menu-component :showMobileMenu="showMobileMenu"/>
+          <filter-menu-component :showMobileMenu="showMobileMenu" />
         </div>
       </ds-grid-item>
       <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
@@ -176,21 +178,21 @@ export default {
       this.resetCategories()
       this.toggleCategory(this.categoryId)
     }
-     document.addEventListener('click', this.removeFilter)
+    document.addEventListener('click', this.removeFilter)
   },
   methods: {
     ...mapMutations({
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
-    removeFilter(e) {  
+    removeFilter(e) {
       if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) {
-        if (!this.showFilter) return 
-        this.showFilter = false          
-      }     
+        if (!this.showFilter) return
+        this.showFilter = false
+      }
     },
     beforeDestroy() {
-       document.removeEventListener('click', this.removeFilter);
+      document.removeEventListener('click', this.removeFilter)
     },
     clearSearch() {
       this.$router.push({ path: '/' })

From 4a8f46605153806ec4570a10929328f461d78201 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 09:28:48 +0100
Subject: [PATCH 5/8] fix: locales

---
 webapp/locales/de.json | 10 +++++-----
 webapp/locales/en.json | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1acec03b0..46e18b8fd 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -267,12 +267,12 @@
       "happy": "Glücklich",
       "surprised": "Erstaunt"
     },
-    "filterMasonryGrid": {
-      "noFilter":"Beiträge filtern",
-      "myTheme":"Meine Themen",
-      "myFriends":"Beiträge von meinen Freunden"
-    },
     "filterFollow": "Beiträge von Benutzern filtern, denen ich folge",
+    "filterMasonryGrid": {
+      "myFriends": "Beiträge von meinen Freunden",
+      "myTheme": "Meine Themen",
+      "noFilter": "Beiträge filtern"
+    },
     "inappropriatePicture": "Dieses Bild kann für einige Menschen unangemessen sein.",
     "languageSelectLabel": "Sprache Deines Beitrags",
     "languageSelectText": "Sprache wählen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index b47bb95be..148303e89 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -267,12 +267,12 @@
       "happy": "Happy",
       "surprised": "Surprised"
     },
-    "filterMasonryGrid": {
-      "noFilter": "Filter Posts",
-      "myTheme": "My Themes",
-      "myFriends": "Posts From My Friends"
-    },
     "filterFollow": "Filter contributions from users I follow",
+    "filterMasonryGrid": {
+      "myFriends": "Posts From My Friends",
+      "myTheme": "My Themes",
+      "noFilter": "Filter Posts"
+    },
     "inappropriatePicture": "This image may be inappropriate for some people.",
     "languageSelectLabel": "Language of your contribution",
     "languageSelectText": "Select Language",

From fd6d2dacc5e1344d2711be2d253f71dd0c551917 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 12:20:39 +0100
Subject: [PATCH 6/8] add delete filter funktion

---
 webapp/pages/index.vue | 58 +++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index bf8bc49f1..28b9bfeb5 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -22,25 +22,36 @@
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
         </ds-button>
 
-        <ds-button
-          class="my-filter-button"
-          v-if="postsFilter['categories_some']"
-          :icon="filterButtonIcon"
-          right
-          @click="showFilter = !showFilter"
-        >
-          {{ $t('contribution.filterMasonryGrid.myTheme') }}
-        </ds-button>
+        <span v-if="postsFilter['categories_some']">
+          <ds-button class="my-filter-button" right @click="showFilter = !showFilter">
+            {{ $t('contribution.filterMasonryGrid.myTheme') }}
+          </ds-button>
+          <ds-button
+            class="filter-remove"
+            @click="resetCategories"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -14px"
+          ></ds-button>
+        </span>
 
-        <ds-button
-          class="my-filter-button"
-          v-if="postsFilter['author']"
-          :icon="filterButtonIcon"
-          right
-          @click="showFilter = !showFilter"
-        >
-          {{ $t('contribution.filterMasonryGrid.myFriends') }}
-        </ds-button>
+        <span v-if="postsFilter['author']">
+          <ds-button
+            v-if="postsFilter['author']"
+            class="my-filter-button"
+            right
+            @click="showFilter = !showFilter"
+          >
+            {{ $t('contribution.filterMasonryGrid.myFriends') }}
+          </ds-button>
+          <ds-button
+            class="filter-remove"
+            @click="resetByFollowed"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -14px"
+          ></ds-button>
+        </span>
 
         <div
           id="my-filter"
@@ -151,9 +162,9 @@ export default {
     }),
     filterButtonIcon() {
       if (Object.keys(this.postsFilter).length === 0) {
-        return this.showFilter ? 'angle-down' : 'angle-up'
+        return this.showFilter ? 'angle-up' : 'angle-down'
       }
-      return 'filter'
+      return 'close'
     },
     finalFilters() {
       let filter = this.postsFilter
@@ -178,21 +189,22 @@ export default {
       this.resetCategories()
       this.toggleCategory(this.categoryId)
     }
-    document.addEventListener('click', this.removeFilter)
+    document.addEventListener('click', this.showFilterMenu)
   },
   methods: {
     ...mapMutations({
+      resetByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
-    removeFilter(e) {
+    showFilterMenu(e) {
       if (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button')) {
         if (!this.showFilter) return
         this.showFilter = false
       }
     },
     beforeDestroy() {
-      document.removeEventListener('click', this.removeFilter)
+      document.removeEventListener('click', this.showFilterMenu)
     },
     clearSearch() {
       this.$router.push({ path: '/' })

From 6c5f042fb99007b035061a54a1bb4f11e56c1139 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 25 Jan 2023 16:15:51 +0100
Subject: [PATCH 7/8] style color change, position change

---
 webapp/pages/index.vue | 60 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 51 insertions(+), 9 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 28b9bfeb5..0519d22fe 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -10,9 +10,19 @@
         v-if="categoriesActive"
         :row-span="1"
         column-span="fullWidth"
-        style="z-index: 1"
+        class="filterButtonMenu"
       >
-        <ds-button
+        <base-button
+          class="my-filter-button"
+          v-if="!postsFilter['categories_some'] && !postsFilter['author']"
+          :icon="filterButtonIcon"
+          right
+          @click="showFilter = !showFilter"
+          filled
+        >
+          {{ $t('contribution.filterMasonryGrid.noFilter') }}
+        </base-button>
+        <!-- <ds-button
           class="my-filter-button"
           v-if="!postsFilter['categories_some'] && !postsFilter['author']"
           :icon="filterButtonIcon"
@@ -20,23 +30,47 @@
           @click="showFilter = !showFilter"
         >
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
-        </ds-button>
+        </ds-button> -->
 
         <span v-if="postsFilter['categories_some']">
-          <ds-button class="my-filter-button" right @click="showFilter = !showFilter">
+          <!-- <ds-button class="my-filter-button" right @click="showFilter = !showFilter">
             {{ $t('contribution.filterMasonryGrid.myTheme') }}
-          </ds-button>
-          <ds-button
+          </ds-button> -->
+          <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+            {{ $t('contribution.filterMasonryGrid.myTheme') }}
+          </base-button>
+          <base-button
+            class="filter-remove"
+            @click="resetCategories"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -6px"
+            filled
+          />
+
+          <!-- <ds-button
             class="filter-remove"
             @click="resetCategories"
             icon="close"
             title="Filter löschen"
             style="margin-left: -14px"
-          ></ds-button>
+          ></ds-button> -->
         </span>
 
         <span v-if="postsFilter['author']">
-          <ds-button
+          <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+            {{ $t('contribution.filterMasonryGrid.myFriends') }}
+          </base-button>
+          <base-button
+            class="filter-remove"
+            @click="resetByFollowed"
+            icon="close"
+            title="Filter löschen"
+            style="margin-left: -6px"
+            filled
+          />
+
+          <!-- <ds-button
             v-if="postsFilter['author']"
             class="my-filter-button"
             right
@@ -50,7 +84,7 @@
             icon="close"
             title="Filter löschen"
             style="margin-left: -14px"
-          ></ds-button>
+          ></ds-button> -->
         </span>
 
         <div
@@ -307,4 +341,12 @@ export default {
   display: flex;
   align-items: center;
 }
+.filterButtonMenu {
+  position: fixed;
+  z-index: 1;
+  margin-top: -35px;
+  padding: 20px 10px 5px 10px;
+  border-radius: 7px;
+  background-color: #fff;
+}
 </style>

From ede699855c7703d8cb4b72a232e13774460ecf24 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 26 Jan 2023 14:06:18 +0100
Subject: [PATCH 8/8] change style for remove filter

---
 webapp/pages/index.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 0519d22fe..921724f85 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -15,12 +15,13 @@
         <base-button
           class="my-filter-button"
           v-if="!postsFilter['categories_some'] && !postsFilter['author']"
-          :icon="filterButtonIcon"
           right
           @click="showFilter = !showFilter"
           filled
         >
           {{ $t('contribution.filterMasonryGrid.noFilter') }}
+          &nbsp;
+          <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
         </base-button>
         <!-- <ds-button
           class="my-filter-button"
@@ -44,7 +45,7 @@
             @click="resetCategories"
             icon="close"
             title="Filter löschen"
-            style="margin-left: -6px"
+            style="margin-left: -8px"
             filled
           />
 
@@ -66,7 +67,7 @@
             @click="resetByFollowed"
             icon="close"
             title="Filter löschen"
-            style="margin-left: -6px"
+            style="margin-left: -8px"
             filled
           />
 
@@ -343,7 +344,7 @@ export default {
 }
 .filterButtonMenu {
   position: fixed;
-  z-index: 1;
+  z-index: 6;
   margin-top: -35px;
   padding: 20px 10px 5px 10px;
   border-radius: 7px;