From 89fd312220134ba5fc532e26c553bc49378e5182 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 9 Mar 2023 14:35:15 +0100
Subject: [PATCH 01/10] feat(webapp): filter button style change

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

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index d5f1ac3d0..673425d12 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -40,7 +40,7 @@
               <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
             </base-button>
             <span v-if="postsFilter['categories_some']">
-              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+              <base-button class="my-filter-button my-filter-button-selected" right @click="showFilter = !showFilter" filled>
                 {{ $t('contribution.filterMasonryGrid.myTopics') }}
               </base-button>
               <base-button
@@ -48,12 +48,13 @@
                 @click="resetCategories"
                 icon="close"
                 :title="$t('filter-menu.deleteFilter')"
-                style="margin-left: -8px"
+                size="small"
+                circle
                 filled
               />
             </span>
             <span v-if="postsFilter['author']">
-              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+              <base-button class="my-filter-button my-filter-button-selected" right @click="showFilter = !showFilter" filled>
                 {{ $t('contribution.filterMasonryGrid.myFriends') }}
               </base-button>
               <base-button
@@ -61,7 +62,8 @@
                 @click="resetByFollowed"
                 icon="close"
                 :title="$t('filter-menu.deleteFilter')"
-                style="margin-left: -8px"
+                size="small"
+                circle
                 filled
               />
             </span>
@@ -307,6 +309,17 @@ export default {
   float: right;
 }
 
+.my-filter-button-selected {
+  padding-right: 30px;
+  margin-left: 8px;
+}
+
+.base-button.filter-remove {
+  position: relative;
+  margin-left: -31px;
+  top: -5px;
+}
+
 .base-button.--circle.post-add-button-bottom {
   height: 54px;
   width: 54px;
@@ -335,6 +348,7 @@ export default {
   align-items: center;
 }
 .filterButtonMenu {
+  width: 70%;
   position: fixed;
   z-index: 6;
   margin-top: -35px;

From f34e41957150454a4e295d4a531cb757f0191672 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 07:02:55 +0100
Subject: [PATCH 02/10] Fix linting.

---
 webapp/pages/index.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 673425d12..592c320f8 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -40,7 +40,12 @@
               <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
             </base-button>
             <span v-if="postsFilter['categories_some']">
-              <base-button class="my-filter-button my-filter-button-selected" right @click="showFilter = !showFilter" filled>
+              <base-button
+                class="my-filter-button my-filter-button-selected"
+                right
+                @click="showFilter = !showFilter"
+                filled
+              >
                 {{ $t('contribution.filterMasonryGrid.myTopics') }}
               </base-button>
               <base-button
@@ -54,7 +59,12 @@
               />
             </span>
             <span v-if="postsFilter['author']">
-              <base-button class="my-filter-button my-filter-button-selected" right @click="showFilter = !showFilter" filled>
+              <base-button
+                class="my-filter-button my-filter-button-selected"
+                right
+                @click="showFilter = !showFilter"
+                filled
+              >
                 {{ $t('contribution.filterMasonryGrid.myFriends') }}
               </base-button>
               <base-button

From 6b1a01f66f866d6f91ab7687d1f0e8d95d1cf794 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 07:36:26 +0100
Subject: [PATCH 03/10] Change style of postsInMyGroups filter button

---
 webapp/pages/index.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 9170174fc..501c6c4aa 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -83,7 +83,12 @@
             </span>
 
             <span v-if="postsFilter['postsInMyGroups']">
-              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+              <base-button 
+                class="my-filter-button my-filter-button-selected" 
+                right 
+                @click="showFilter = !showFilter" 
+                filled
+              >
                 {{ $t('contribution.filterMasonryGrid.myGroups') }}
               </base-button>
               <base-button
@@ -91,7 +96,8 @@
                 @click="resetByGroups"
                 icon="close"
                 :title="$t('filter-menu.deleteFilter')"
-                style="margin-left: -8px"
+                size="small"
+                circle
                 filled
               />
             </span>

From ba6a05ff69120071af8ba265dc3c8122b70ec509 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 07:37:09 +0100
Subject: [PATCH 04/10] Upgrade filterButtonMenu size

---
 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 501c6c4aa..6b0743590 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -383,7 +383,7 @@ export default {
   align-items: center;
 }
 .filterButtonMenu {
-  width: 70%;
+  width: 81%;
   position: fixed;
   z-index: 6;
   margin-top: -35px;

From e7d43e5019b2d0fd0fe0f770b5485ab35ccaf681 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 07:38:48 +0100
Subject: [PATCH 05/10] Fix linting

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

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 6b0743590..85d480cb4 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -83,10 +83,10 @@
             </span>
 
             <span v-if="postsFilter['postsInMyGroups']">
-              <base-button 
-                class="my-filter-button my-filter-button-selected" 
-                right 
-                @click="showFilter = !showFilter" 
+              <base-button
+                class="my-filter-button my-filter-button-selected"
+                right
+                @click="showFilter = !showFilter"
                 filled
               >
                 {{ $t('contribution.filterMasonryGrid.myGroups') }}

From 22f06de83da03f64c4862b1186ceef752190cfd8 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 10:13:30 +0100
Subject: [PATCH 06/10] Create component for the filter buttons

---
 webapp/components/FilterMenu/HeaderButton.vue | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 webapp/components/FilterMenu/HeaderButton.vue

diff --git a/webapp/components/FilterMenu/HeaderButton.vue b/webapp/components/FilterMenu/HeaderButton.vue
new file mode 100644
index 000000000..871b32bf1
--- /dev/null
+++ b/webapp/components/FilterMenu/HeaderButton.vue
@@ -0,0 +1,56 @@
+<template>
+  <span>
+    <base-button
+      class="my-filter-button my-filter-button-selected"
+      right
+      @click="clickButton"
+      filled
+    >
+      {{ title }}
+    </base-button>
+    <base-button
+      class="filter-remove"
+      @click="clickRemove"
+      icon="close"
+      :title="titleRemove"
+      size="small"
+      circle
+      filled
+    />
+  </span>
+</template>
+<script>
+export default {
+  name: 'HeaderButton',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    clickButton: {
+      type: Function,
+      required: true,
+    },
+    titleRemove: {
+      type: String,
+      required: true,
+    },
+    clickRemove: {
+      type: Function,
+      required: true,
+    },
+  },
+}
+</script>
+<style lang="scss">
+.my-filter-button-selected {
+  padding-right: 30px;
+}
+
+.base-button.filter-remove {
+  position: relative;
+  margin-left: -31px;
+  top: -5px;
+  margin-right: 8px;
+}
+</style>

From baa49414aa7eb6837f72d5896318251e754200b3 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 10:13:51 +0100
Subject: [PATCH 07/10] Use header-button component

---
 webapp/pages/index.vue | 95 ++++++++++++------------------------------
 1 file changed, 27 insertions(+), 68 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 85d480cb4..0fced8ee1 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -43,65 +43,30 @@
               &nbsp;
               <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
             </base-button>
-            <span v-if="postsFilter['categories_some']">
-              <base-button
-                class="my-filter-button my-filter-button-selected"
-                right
-                @click="showFilter = !showFilter"
-                filled
-              >
-                {{ $t('contribution.filterMasonryGrid.myTopics') }}
-              </base-button>
-              <base-button
-                class="filter-remove"
-                @click="resetCategories"
-                icon="close"
-                :title="$t('filter-menu.deleteFilter')"
-                size="small"
-                circle
-                filled
-              />
-            </span>
-            <span v-if="postsFilter['author']">
-              <base-button
-                class="my-filter-button my-filter-button-selected"
-                right
-                @click="showFilter = !showFilter"
-                filled
-              >
-                {{ $t('contribution.filterMasonryGrid.myFriends') }}
-              </base-button>
-              <base-button
-                class="filter-remove"
-                @click="resetByFollowed"
-                icon="close"
-                :title="$t('filter-menu.deleteFilter')"
-                size="small"
-                circle
-                filled
-              />
-            </span>
 
-            <span v-if="postsFilter['postsInMyGroups']">
-              <base-button
-                class="my-filter-button my-filter-button-selected"
-                right
-                @click="showFilter = !showFilter"
-                filled
-              >
-                {{ $t('contribution.filterMasonryGrid.myGroups') }}
-              </base-button>
-              <base-button
-                class="filter-remove"
-                @click="resetByGroups"
-                icon="close"
-                :title="$t('filter-menu.deleteFilter')"
-                size="small"
-                circle
-                filled
-              />
-            </span>
+            <header-button
+              v-if="postsFilter['categories_some']"
+              :title="$t('contribution.filterMasonryGrid.myTopics')"
+              :clickButton="openFilterMenu"
+              :titleRemove="$t('filter-menu.deleteFilter')"
+              :clickRemove="resetCategories"
+            />
 
+            <header-button
+              v-if="postsFilter['author']"
+              :title="$t('contribution.filterMasonryGrid.myFriends')"
+              :clickButton="openFilterMenu"
+              :titleRemove="$t('filter-menu.deleteFilter')"
+              :clickRemove="resetByFollowed"
+            />
+
+            <header-button
+              v-if="postsFilter['postsInMyGroups']"
+              :title="$t('contribution.filterMasonryGrid.myGroups')"
+              :clickButton="openFilterMenu"
+              :titleRemove="$t('filter-menu.deleteFilter')"
+              :clickRemove="resetByGroups"
+            />
             <div id="my-filter" v-if="showFilter">
               <div @mouseleave="showFilter = false">
                 <filter-menu-component @showFilterMenu="showFilterMenu" />
@@ -160,6 +125,7 @@ import HcEmpty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+import HeaderButton from '~/components/FilterMenu/HeaderButton'
 import { mapGetters, mapMutations } from 'vuex'
 import { DonationsQuery } from '~/graphql/Donations'
 import { filterPosts } from '~/graphql/PostQuery.js'
@@ -177,6 +143,7 @@ export default {
     MasonryGrid,
     MasonryGridItem,
     FilterMenuComponent,
+    HeaderButton,
   },
   mixins: [postListActions],
   data() {
@@ -243,6 +210,9 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    openFilterMenu() {
+      this.showFilter = !this.showFilter
+    },
     showFilterMenu(e) {
       if (!e || (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button'))) {
         if (!this.showFilter) return
@@ -344,17 +314,6 @@ export default {
   float: right;
 }
 
-.my-filter-button-selected {
-  padding-right: 30px;
-  margin-left: 8px;
-}
-
-.base-button.filter-remove {
-  position: relative;
-  margin-left: -31px;
-  top: -5px;
-}
-
 .base-button.--circle.post-add-button-bottom {
   height: 54px;
   width: 54px;

From 6858fa58ab2e9136173c08ea3d258d7154f8c4f8 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 10:31:07 +0100
Subject: [PATCH 08/10] Add small margin to the top

---
 webapp/components/FilterMenu/HeaderButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/FilterMenu/HeaderButton.vue b/webapp/components/FilterMenu/HeaderButton.vue
index 871b32bf1..780e29ade 100644
--- a/webapp/components/FilterMenu/HeaderButton.vue
+++ b/webapp/components/FilterMenu/HeaderButton.vue
@@ -45,6 +45,7 @@ export default {
 <style lang="scss">
 .my-filter-button-selected {
   padding-right: 30px;
+  margin-top: 4px;
 }
 
 .base-button.filter-remove {

From 50e5a4e8aaa94bae2e1b53782abaa4baa6b05455 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 10:31:32 +0100
Subject: [PATCH 09/10] Change margin on small screens

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

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 0fced8ee1..6ed96e493 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -350,6 +350,11 @@ export default {
   border-radius: 7px;
   background-color: #f5f4f6;
 }
+@media screen and (max-width: 656px) {
+  .filterButtonMenu {
+    margin-top: -50px;
+  }
+}
 #my-filter {
   background-color: white;
   box-shadow: rgb(189 189 189) 1px 9px 15px 1px;

From 644febaa0f336405b198bc20240e14017bb7a994 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 10:38:08 +0100
Subject: [PATCH 10/10] Remove border radius of filterMenu background

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

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 6ed96e493..6f5268a0d 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -342,12 +342,11 @@ export default {
   align-items: center;
 }
 .filterButtonMenu {
-  width: 81%;
+  width: 95%;
   position: fixed;
   z-index: 6;
   margin-top: -35px;
   padding: 20px 10px 5px 10px;
-  border-radius: 7px;
   background-color: #f5f4f6;
 }
 @media screen and (max-width: 656px) {