Add emotions buttons, get it filtering

This commit is contained in:
mattwr18 2019-09-06 15:45:56 +02:00
parent 3b5c02e276
commit 079864a7a9
2 changed files with 1 additions and 76 deletions

View File

@ -1,5 +1,5 @@
<template>
<ds-space>
<ds-space margin-top="large">
<ds-flex id="filter-posts-header">
<ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
<ds-space margin-bottom="large" />

View File

@ -1,75 +0,0 @@
<template>
<ds-space>
<ds-flex id="filter-posts-by-followers-header">
<ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
<ds-space margin-bottom="large" />
</ds-flex>
<ds-flex>
<ds-flex-item
:width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
class="categories-menu-item"
>
<ds-flex>
<ds-flex-item width="10%" />
<ds-flex-item width="100%">
<div class="follow-button">
<ds-button
v-tooltip="{
content: this.$t('contribution.filterFollow'),
placement: 'left',
delay: { show: 500 },
}"
name="filter-by-followed-authors-only"
icon="user-plus"
:primary="filteredByUsersFollowed"
@click="toggleFilteredByFollowed(user.id)"
/>
<ds-flex-item>
<label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
</ds-flex-item>
<ds-space />
</div>
</ds-flex-item>
</ds-flex>
</ds-flex-item>
<ds-space margin-bottom="large" />
</ds-flex>
</ds-space>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
props: {
user: { type: Object, required: true },
},
computed: {
...mapGetters({
filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
}),
},
methods: {
...mapMutations({
toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
}),
},
}
</script>
<style lang="scss">
#filter-posts-header {
display: block;
}
#filter-posts-by-followers-header {
display: block;
}
@media only screen and (max-width: 960px) {
#filter-posts-header {
text-align: center;
}
.follow-button {
float: left;
}
}
</style>