From f3b088f862bf53a61080e447c37a6f970ec36b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 28 May 2019 20:51:14 +0200
Subject: [PATCH] Move the filter menu into the index page

A filter makes sense only on the news feed page in my opinion. As a
comparison: The way how full text search is implemented makes sense in
the menu bar, which is always visible. Why? The search results are shown
in a popover. Therefore those are different from the news feed. The news
feed however is only visible on the index page. Therefore I believe, it
makes sense to put the filter menu there and only there.
---
 webapp/components/FilterMenu/FilterMenu.vue | 37 +++++++++------------
 webapp/layouts/default.vue                  |  3 --
 webapp/pages/index.vue                      |  5 +++
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index e3efbf327..f06f6f37e 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -1,26 +1,21 @@
 <template>
-  <dropdown>
-    <a
-      slot="default"
-      class="filter-menu"
-      href="#"
-    >
-      <ds-icon
-        name="filter"
-      />
-      Filter
-    </a>
-  </dropdown>
+  <ds-card>
+    <ds-form>
+    <ds-radio buttons v-model="filter" label="Filter" :options="['friends', 'friends-of-a-friend', 'all']" />
+    </ds-form>
+  </ds-card>
 </template>
 
 <script>
-export default {}
-</script>
-
-<style>
-.filter-menu {
-  display: flex;
-  align-items: center;
-  height: 100%;
+import Dropdown from '~/components/Dropdown'
+export default {
+  components: {
+    Dropdown
+  },
+  data() {
+    return {
+      filter: 'all'
+    }
+  }
 }
-</style>
+</script>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index df4cf5828..7708d6d2e 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -19,7 +19,6 @@
           />
         </div>
         <div class="main-navigation-right">
-          <filter-menu />
           <no-ssr>
             <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
           </no-ssr>
@@ -99,7 +98,6 @@ import Modal from '~/components/Modal'
 import NotificationMenu from '~/components/notifications/NotificationMenu'
 import Dropdown from '~/components/Dropdown'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
-import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import seo from '~/mixins/seo'
 
 export default {
@@ -110,7 +108,6 @@ export default {
     Modal,
     NotificationMenu,
     HcAvatar,
-    FilterMenu,
   },
   mixins: [seo],
   data() {
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index a45a99656..cc22a10b5 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -1,5 +1,8 @@
 <template>
   <div>
+    <ds-flex-item>
+      <filter-menu />
+    </ds-flex-item>
     <ds-flex v-if="Post && Post.length" :width="{ base: '100%' }" gutter="base">
       <hc-post-card
         v-for="(post, index) in uniq(Post)"
@@ -24,6 +27,7 @@
 </template>
 
 <script>
+import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import gql from 'graphql-tag'
 import uniqBy from 'lodash/uniqBy'
 import HcPostCard from '~/components/PostCard'
@@ -31,6 +35,7 @@ import HcLoadMore from '~/components/LoadMore.vue'
 
 export default {
   components: {
+    FilterMenu,
     HcPostCard,
     HcLoadMore,
   },