ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use header-button component

Browse Source
This commit is contained in:
elweyn 2023-03-13 10:13:51 +01:00
parent 22f06de83d
commit baa49414aa
1 changed files with 27 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
webapp/pages/index.vue
View File

@ -43,65 +43,30 @@
   
<base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon> <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
</base-button> </base-button>
<span v-if="postsFilter['categories_some']">
<base-button
class="my-filter-button my-filter-button-selected"
right
@click="showFilter = !showFilter"
filled
>
{{ $t('contribution.filterMasonryGrid.myTopics') }}
</base-button>
<base-button
class="filter-remove"
@click="resetCategories"
icon="close"
:title="$t('filter-menu.deleteFilter')"
size="small"
circle
filled
/>
</span>
<span v-if="postsFilter['author']">
<base-button
class="my-filter-button my-filter-button-selected"
right
@click="showFilter = !showFilter"
filled
>
{{ $t('contribution.filterMasonryGrid.myFriends') }}
</base-button>
<base-button
class="filter-remove"
@click="resetByFollowed"
icon="close"
:title="$t('filter-menu.deleteFilter')"
size="small"
circle
filled
/>
</span>
<span v-if="postsFilter['postsInMyGroups']"> <header-button
<base-button v-if="postsFilter['categories_some']"
class="my-filter-button my-filter-button-selected" :title="$t('contribution.filterMasonryGrid.myTopics')"
right :clickButton="openFilterMenu"
@click="showFilter = !showFilter" :titleRemove="$t('filter-menu.deleteFilter')"
filled :clickRemove="resetCategories"
> />
{{ $t('contribution.filterMasonryGrid.myGroups') }}
</base-button>
<base-button
class="filter-remove"
@click="resetByGroups"
icon="close"
:title="$t('filter-menu.deleteFilter')"
size="small"
circle
filled
/>
</span>
<header-button
v-if="postsFilter['author']"
:title="$t('contribution.filterMasonryGrid.myFriends')"
:clickButton="openFilterMenu"
:titleRemove="$t('filter-menu.deleteFilter')"
:clickRemove="resetByFollowed"
/>
<header-button
v-if="postsFilter['postsInMyGroups']"
:title="$t('contribution.filterMasonryGrid.myGroups')"
:clickButton="openFilterMenu"
:titleRemove="$t('filter-menu.deleteFilter')"
:clickRemove="resetByGroups"
/>
<div id="my-filter" v-if="showFilter"> <div id="my-filter" v-if="showFilter">
<div @mouseleave="showFilter = false"> <div @mouseleave="showFilter = false">
<filter-menu-component @showFilterMenu="showFilterMenu" /> <filter-menu-component @showFilterMenu="showFilterMenu" />
@ -160,6 +125,7 @@ import HcEmpty from '~/components/Empty/Empty'
import PostTeaser from '~/components/PostTeaser/PostTeaser.vue' import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue' import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue' import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
import HeaderButton from '~/components/FilterMenu/HeaderButton'
import { mapGetters, mapMutations } from 'vuex' import { mapGetters, mapMutations } from 'vuex'
import { DonationsQuery } from '~/graphql/Donations' import { DonationsQuery } from '~/graphql/Donations'
import { filterPosts } from '~/graphql/PostQuery.js' import { filterPosts } from '~/graphql/PostQuery.js'
@ -177,6 +143,7 @@ export default {
MasonryGrid, MasonryGrid,
MasonryGridItem, MasonryGridItem,
FilterMenuComponent, FilterMenuComponent,
HeaderButton,
}, },
mixins: [postListActions], mixins: [postListActions],
data() { data() {
@ -243,6 +210,9 @@ export default {
resetCategories: 'posts/RESET_CATEGORIES', resetCategories: 'posts/RESET_CATEGORIES',
toggleCategory: 'posts/TOGGLE_CATEGORY', toggleCategory: 'posts/TOGGLE_CATEGORY',
}), }),
openFilterMenu() {
this.showFilter = !this.showFilter
},
showFilterMenu(e) { showFilterMenu(e) {
if (!e || (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button'))) { if (!e || (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button'))) {
if (!this.showFilter) return if (!this.showFilter) return
@ -344,17 +314,6 @@ export default {
float: right; float: right;
} }
.my-filter-button-selected {
padding-right: 30px;
margin-left: 8px;
}
.base-button.filter-remove {
position: relative;
margin-left: -31px;
top: -5px;
}
.base-button.--circle.post-add-button-bottom { .base-button.--circle.post-add-button-bottom {
height: 54px; height: 54px;
width: 54px; width: 54px;