From e400a10c4598fed84c18378aaca6d9aa16b75155 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 16 Mar 2020 14:40:26 +0100
Subject: [PATCH] chore: rename/refactor filter, make responsive

- Make the emotions filter similar in style to CategoriesFilter
---
 .../{GeneralFilter.vue => EmotionsFilter.vue} | 29 +++++++++++++---
 webapp/components/FilterMenu/FilterMenu.vue   | 17 +++++++---
 .../components/FilterMenu/FollowingFilter.vue | 34 +++++++++++--------
 webapp/locales/de.json                        |  6 ++--
 webapp/store/posts.js                         |  5 +++
 5 files changed, 65 insertions(+), 26 deletions(-)
 rename webapp/components/FilterMenu/{GeneralFilter.vue => EmotionsFilter.vue} (71%)

diff --git a/webapp/components/FilterMenu/GeneralFilter.vue b/webapp/components/FilterMenu/EmotionsFilter.vue
similarity index 71%
rename from webapp/components/FilterMenu/GeneralFilter.vue
rename to webapp/components/FilterMenu/EmotionsFilter.vue
index 8f74bc292..4cbc16e57 100644
--- a/webapp/components/FilterMenu/GeneralFilter.vue
+++ b/webapp/components/FilterMenu/EmotionsFilter.vue
@@ -1,6 +1,12 @@
 <template>
   <section class="emotion-filter">
     <h4 class="title">{{ $t('filter-menu.emotions') }}</h4>
+    <labeled-button
+      :filled="!filteredByEmotions.length"
+      icon="check"
+      :label="$t('filter-menu.all')"
+      @click="resetEmotions"
+    />
     <div class="divider" />
     <emotion-button
       v-for="emotion in emotionsArray"
@@ -13,10 +19,12 @@
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 import EmotionButton from '~/components/EmotionButton/EmotionButton'
 
 export default {
   components: {
+    LabeledButton,
     EmotionButton,
   },
   data() {
@@ -32,6 +40,7 @@ export default {
   },
   methods: {
     ...mapMutations({
+      resetEmotions: 'posts/RESET_EMOTIONS',
       toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
     }),
     iconPath(emotion) {
@@ -48,6 +57,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   margin-top: $space-base;
+  width: 66%;
 
   > .title {
     width: 100%;
@@ -56,19 +66,30 @@ export default {
 
   > .divider {
     border-left: $border-size-base solid $border-color-soft;
-    margin: 0px $space-base 0px 76px;
+    margin: 0px $space-base;
   }
-}
 
-@media only screen and (max-width: 630px) {
-  .emotion-filter {
+  @media only screen and (max-width: 630px) {
+    width: 100%;
+
     > .title {
       text-align: center;
     }
 
+    .labeled-button {
+      width: 100%;
+      margin: $space-x-small 0;
+    }
+
     > .divider {
+      width: 100%;
+      margin: $space-small;
       border-top: $border-size-base solid $border-color-soft;
     }
+
+    > .emotion-button {
+      margin-top: $space-x-small;
+    }
   }
 }
 </style>
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index 306539d7f..2d5fb9a99 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -11,11 +11,11 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </base-button>
     <template slot="popover">
-      <ds-container>
+      <ds-container class="filter-menu">
         <h4 class="title">{{ $t('filter-menu.filter-by') }}</h4>
         <following-filter />
         <categories-filter />
-        <general-filter />
+        <emotions-filter />
         <language-filter />
       </ds-container>
     </template>
@@ -26,7 +26,7 @@ import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FollowingFilter from './FollowingFilter'
 import CategoriesFilter from './CategoriesFilter'
-import GeneralFilter from './GeneralFilter'
+import EmotionsFilter from './EmotionsFilter'
 import LanguageFilter from './LanguageFilter'
 
 export default {
@@ -34,7 +34,7 @@ export default {
     Dropdown,
     FollowingFilter,
     CategoriesFilter,
-    GeneralFilter,
+    EmotionsFilter,
     LanguageFilter,
   },
   props: {
@@ -48,3 +48,12 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+@media only screen and (max-width: 960px) {
+  .filter-menu {
+    > .title {
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index 6daf3e600..6ce6511e0 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -1,18 +1,18 @@
 <template>
-<section class="following-filter">
-  <labeled-button
-    data-test="filter-by-followed"
-    :filled="filteredByUsersFollowed"
-    icon="user-plus"
-    :label="$t('filter-menu.following')"
-    @click="toggleFilteredByFollowed(currentUser.id)"
-    v-tooltip="{
-      content: this.$t('contribution.filterFollow'),
-      placement: 'left',
-      delay: { show: 500 },
-    }"
-  />
-</section>
+  <section class="following-filter">
+    <labeled-button
+      data-test="filter-by-followed"
+      :filled="filteredByUsersFollowed"
+      icon="user-plus"
+      :label="$t('filter-menu.following')"
+      @click="toggleFilteredByFollowed(currentUser.id)"
+      v-tooltip="{
+        content: this.$t('contribution.filterFollow'),
+        placement: 'left',
+        delay: { show: 500 },
+      }"
+    />
+  </section>
 </template>
 
 <script>
@@ -46,5 +46,11 @@ export default {
     margin-top: $space-small;
     width: 5%;
   }
+
+  @media only screen and (max-width: 960px) {
+    .labeled-button {
+      width: 100%;
+    }
+  }
 }
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 271a03aa2..fd723840e 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -339,11 +339,9 @@
   "filter-menu": {
     "all": "Alle",
     "categories": "Themenkategorien",
-    "following": {
-      "header": "Filtern nach...",
-      "label": "Benutzern, denen ich folge"
-    },
     "emotions": "Emotionen",
+    "filter-by": "Filtern nach...",
+    "following": "Benutzern, denen ich folge",
     "languages": "Sprachen"
   },
   "followButton": {
diff --git a/webapp/store/posts.js b/webapp/store/posts.js
index eb7579ab3..4d1e6e097 100644
--- a/webapp/store/posts.js
+++ b/webapp/store/posts.js
@@ -48,6 +48,11 @@ export const mutations = {
     delete filter.categories_some
     state.filter = filter
   },
+  RESET_EMOTIONS(state) {
+    const filter = clone(state.filter)
+    delete filter.emotions_some
+    state.filter = filter
+  },
   RESET_LANGUAGES(state) {
     const filter = clone(state.filter)
     delete filter.language_in