IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2026-01-14 08:54:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Extract FollowingFilter as own component

Browse Source 
Co-authored-by: Alina Beck <alina.beck@mail.com>
This commit is contained in:
mattwr18 2020-03-16 13:34:26 +01:00
parent b19a2a8dea
commit 0f03d09723
12 changed files with 104 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/components/FilterMenu/CategoriesFilter.vue
View File

@ -1,10 +1,10 @@
<template>
<section class="categories-filter">
<h4 class="title">{{ $t('filter-menu.categories.header') }}</h4>
<h4 class="title">{{ $t('filter-menu.categories') }}</h4>
<labeled-button
:filled="!filteredCategoryIds.length"
icon="check"
:label="$t('filter-menu.categories.all')"
:label="$t('filter-menu.all')"
@click="resetCategories"
/>
<div class="divider" />

4
webapp/components/FilterMenu/FilterMenu.vue
View File

@ -12,6 +12,8 @@
</base-button>
<template slot="popover">
<ds-container>
<h4 class="title">{{ $t('filter-menu.filter-by') }}</h4>
<following-filter />
<categories-filter />
<general-filter />
<language-filter />
@ -22,6 +24,7 @@
<script>
import Dropdown from '~/components/Dropdown'
import { mapGetters } from 'vuex'
import FollowingFilter from './FollowingFilter'
import CategoriesFilter from './CategoriesFilter'
import GeneralFilter from './GeneralFilter'
import LanguageFilter from './LanguageFilter'
@ -29,6 +32,7 @@ import LanguageFilter from './LanguageFilter'
export default {
components: {
Dropdown,
FollowingFilter,
CategoriesFilter,
GeneralFilter,
LanguageFilter,

50
webapp/components/FilterMenu/FollowingFilter.vue Normal file
View File

@ -0,0 +1,50 @@
<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>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
export default {
components: {
LabeledButton,
},
computed: {
...mapGetters({
filteredByUsersFollowed: 'posts/filteredByUsersFollowed',
currentUser: 'auth/user',
}),
},
methods: {
...mapMutations({
toggleFilteredByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
}),
},
}
</script>
<style lang="scss">
.following-filter {
display: flex;
flex-wrap: wrap;
margin-top: $space-small;
> .labeled-button {
margin-top: $space-small;
width: 5%;
}
}
</style>

33
webapp/components/FilterMenu/GeneralFilter.vue
View File

@ -1,19 +1,7 @@
<template>
<section class="general-filter">
<h4 class="title">{{ $t('filter-menu.general.header') }}</h4>
<section class="emotion-filter">
<h4 class="title">{{ $t('filter-menu.emotions') }}</h4>
<div class="divider" />
<labeled-button
data-test="filter-by-followed"
:filled="filteredByUsersFollowed"
icon="user-plus"
:label="$t('filter-menu.followers.label')"
@click="toggleFilteredByFollowed(currentUser.id)"
v-tooltip="{
content: this.$t('contribution.filterFollow'),
placement: 'left',
delay: { show: 500 },
}"
/>
<emotion-button
v-for="emotion in emotionsArray"
:key="emotion"
@ -26,12 +14,10 @@
<script>
import { mapGetters, mapMutations } from 'vuex'
import EmotionButton from '~/components/EmotionButton/EmotionButton'
import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
export default {
components: {
EmotionButton,
LabeledButton,
},
data() {
return {
@ -40,14 +26,12 @@ export default {
},
computed: {
...mapGetters({
filteredByUsersFollowed: 'posts/filteredByUsersFollowed',
filteredByEmotions: 'posts/filteredByEmotions',
currentUser: 'auth/user',
}),
},
methods: {
...mapMutations({
toggleFilteredByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
}),
iconPath(emotion) {
@ -60,7 +44,7 @@ export default {
}
</script>
<style lang="scss">
.general-filter {
.emotion-filter {
display: flex;
flex-wrap: wrap;
margin-top: $space-base;
@ -70,10 +54,6 @@ export default {
margin-bottom: $space-base;
}
> .labeled-button {
width: 11%;
}
> .divider {
border-left: $border-size-base solid $border-color-soft;
margin: 0px $space-base 0px 76px;
@ -81,16 +61,11 @@ export default {
}
@media only screen and (max-width: 630px) {
.general-filter {
.emotion-filter {
> .title {
text-align: center;
}
> .labeled-button {
width: 100%;
margin-bottom: $space-small;
}
> .divider {
border-top: $border-size-base solid $border-color-soft;
}

4
webapp/components/FilterMenu/LanguageFilter.vue
View File

@ -1,7 +1,7 @@
<template>
<ds-space margin-top="large">
<ds-flex id="filter-menu-header">
<ds-heading tag="h4">{{ $t('filter-menu.language.header') }}</ds-heading>
<ds-heading tag="h4">{{ $t('filter-menu.languages') }}</ds-heading>
<ds-space margin-bottom="large" />
</ds-flex>
<ds-flex :gutter="{ lg: 'small' }">
@ -19,7 +19,7 @@
@click="resetLanguages"
/>
<ds-flex-item>
<label class="language-labels">{{ $t('filter-menu.language.all') }}</label>
<label class="language-labels">{{ $t('filter-menu.all') }}</label>
</ds-flex-item>
<ds-space />
</ds-flex-item>

18
webapp/locales/de.json
View File

@ -337,20 +337,14 @@
"title": "Deine Filterblase"
},
"filter-menu": {
"categories": {
"all": "Alle",
"header": "Themenkategorien"
},
"followers": {
"all": "Alle",
"categories": "Themenkategorien",
"following": {
"header": "Filtern nach...",
"label": "Benutzern, denen ich folge"
},
"general": {
"header": "Filtern nach …"
},
"language": {
"all": "Alle",
"header": "Sprachen"
}
"emotions": "Emotionen",
"languages": "Sprachen"
},
"followButton": {
"follow": "Folgen",

20
webapp/locales/en.json
View File

@ -337,20 +337,12 @@
"title": "Your filter bubble"
},
"filter-menu": {
"categories": {
"all": "All",
"header": "Categories of Content"
},
"followers": {
"label": "Users I follow"
},
"general": {
"header": "Filter by …"
},
"language": {
"all": "All",
"header": "Languages"
}
"all": "All",
"categories": "Categories of Content",
"emotions": "Emotions",
"filter-by": "Filter by...",
"following": "Users I follow",
"languages": "Languages"
},
"followButton": {
"follow": "Follow",

20
webapp/locales/es.json
View File

@ -335,20 +335,12 @@
"title": "Su burbuja de filtro"
},
"filter-menu": {
"categories": {
"all": "Todas",
"header": "Categorías de contenido"
},
"followers": {
"label": "Usuarios que sigo"
},
"general": {
"header": "Filtrar por...."
},
"language": {
"all": "Todos",
"header": "Idiomas"
}
"all": "Todas",
"categories": "Categorías de contenido",
"emotions": "Emociones",
"filter-by": "Filtrar por...",
"following": "Usuarios que sigo",
"languages": "Idiomas"
},
"followButton": {
"follow": "Seguir",

20
webapp/locales/fr.json
View File

@ -324,20 +324,12 @@
"title": "Votre bulle de filtre"
},
"filter-menu": {
"categories": {
"all": "Toutes",
"header": "Catégories de contenu"
},
"followers": {
"label": "Utilisateurs que je suis"
},
"general": {
"header": "Filtrer par ...."
},
"language": {
"all": "Tous",
"header": "Langues"
}
"all": "Toutes",
"categories": "Catégories de contenu",
"emotions": "Émotions",
"filter-by": "Filtrer par...",
"following": "Utilisateurs que je suis",
"languages": "Langues"
},
"followButton": {
"follow": "Suivre",

20
webapp/locales/it.json
View File

@ -329,20 +329,12 @@
"title": ""
},
"filter-menu": {
"categories": {
"all": "",
"header": ""
},
"followers": {
"label": ""
},
"general": {
"header": ""
},
"language": {
"all": "",
"header": ""
}
"all": "",
"categories": "",
"emotions": "",
"filter-by": "",
"following": "",
"languages": ""
},
"followButton": {
"follow": "",

20
webapp/locales/pt.json
View File

@ -320,20 +320,12 @@
"title": "Sua bolha de filtro"
},
"filter-menu": {
"categories": {
"all": "Todos",
"header": "Categorias de Conteúdo"
},
"followers": {
"label": "Usuários que eu sigo"
},
"general": {
"header": "Filtrar por …"
},
"language": {
"all": "Todos",
"header": "Idiomas"
}
"all": "Todos",
"categories": "Categorias de Conteúdo",
"emotions": "Emoções",
"filter-by": "Filtrar por...",
"following": "Usuários que eu sigo",
"languages": "Idiomas"
},
"followButton": {
"follow": "Seguir",

20
webapp/locales/ru.json
View File

@ -335,20 +335,12 @@
"title": "Ваш фильтр пузыря"
},
"filter-menu": {
"categories": {
"all": "Все",
"header": "Категории"
},
"followers": {
"label": "Мои подписки"
},
"general": {
"header": "Другие фильтры"
},
"language": {
"all": "Все",
"header": "Языки"
}
"all": "Все",
"categories": "Категории",
"emotions": "",
"filter-by": "Другие фильтры",
"following": "Мои подписки",
"languages": "Языки"
},
"followButton": {
"follow": "Подписаться",