From f53bcba13c80c47e2513788ee0a10531c3cc68bd Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 15 Jan 2020 11:42:12 +0300
Subject: [PATCH] use EmotionButton in filter menu

---
 .../EmotionButton/EmotionButton.vue           |  7 +-
 .../FilterPosts/GeneralFilterMenuItems.vue    | 79 +++++++++----------
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/webapp/components/EmotionButton/EmotionButton.vue b/webapp/components/EmotionButton/EmotionButton.vue
index 97eabd7df..b493a2f82 100644
--- a/webapp/components/EmotionButton/EmotionButton.vue
+++ b/webapp/components/EmotionButton/EmotionButton.vue
@@ -4,12 +4,13 @@
       <img :src="emojiPath" />
     </base-button>
     <label class="label" :for="emotion">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
-    <p v-if="count !== null" class="count">{{ emotionCount }}x</p>
+    <p v-if="emotionCount !== null" class="count">{{ emotionCount }}x</p>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'EmotionButton',
   props: {
     emojiPath: {
       type: String,
@@ -43,13 +44,13 @@ export default {
   }
 
   > .label {
-    margin-top: $space-xx-small;
+    margin-top: $space-x-small;
     font-size: $font-size-small;
     cursor: pointer;
   }
 
   > .count {
-    margin: $space-xx-small 0;
+    margin: $space-x-small 0;
   }
 }
 </style>
diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
index cf0b4c667..05f07166e 100644
--- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
@@ -6,54 +6,42 @@
     </ds-flex>
     <ds-flex :gutter="{ lg: 'large' }">
       <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
-        class="categories-menu-item"
+        :width="{ base: '100%', sm: '100%', md: '10%', lg: '10%' }"
+        class="follow-filter"
       >
-        <ds-flex>
-          <ds-flex-item width="10%" />
-          <ds-space margin-bottom="xx-small" />
-          <ds-flex-item width="100%">
-            <div class="follow-filter-button">
-              <base-button
-                name="filter-by-followed-authors-only"
-                icon="user-plus"
-                circle
-                :filled="filteredByUsersFollowed"
-                @click="toggleFilteredByFollowed(user.id)"
-                v-tooltip="{
-                  content: this.$t('contribution.filterFollow'),
-                  placement: 'left',
-                  delay: { show: 500 },
-                }"
-              />
-              <ds-space margin-bottom="x-small" />
-              <ds-flex-item>
-                <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
-              </ds-flex-item>
-              <ds-space />
-            </div>
-          </ds-flex-item>
-        </ds-flex>
+        <base-button
+          name="filter-by-followed-authors-only"
+          icon="user-plus"
+          circle
+          :filled="filteredByUsersFollowed"
+          @click="toggleFilteredByFollowed(user.id)"
+          v-tooltip="{
+            content: this.$t('contribution.filterFollow'),
+            placement: 'left',
+            delay: { show: 500 },
+          }"
+        />
+        <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
       </ds-flex-item>
-      <div v-for="emotion in emotionsArray" :key="emotion">
-        <ds-flex-item :width="{ lg: '100%' }">
-          <base-button @click="toogleFilteredByEmotions(emotion)" class="emotions-buttons" circle>
-            <img :src="iconPath(emotion)" width="40" />
-          </base-button>
-          <ds-space margin-bottom="x-small" />
-          <ds-flex-item class="emotions-mobile-space text-center">
-            <label class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
-          </ds-flex-item>
-        </ds-flex-item>
-      </div>
+      <emotion-button
+        v-for="emotion in emotionsArray"
+        :key="emotion"
+        :emojiPath="iconPath(emotion)"
+        :emotion="emotion"
+        @toggleEmotion="toogleFilteredByEmotions(emotion)"
+      />
       <ds-space margin-bottom="large" />
     </ds-flex>
   </ds-space>
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import EmotionButton from '~/components/EmotionButton/EmotionButton'
 
 export default {
+  components: {
+    EmotionButton,
+  },
   props: {
     user: { type: Object, required: true },
   },
@@ -91,13 +79,22 @@ export default {
   display: block;
 }
 
+.follow-filter.ds-flex-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: $space-base;
+
+  > .follow-label {
+    margin-top: $space-x-small;
+    text-align: center;
+  }
+}
+
 @media only screen and (max-width: 960px) {
   #filter-posts-header {
     text-align: center;
   }
-  .follow-filter-button {
-    float: left;
-  }
 }
 
 .text-center {