IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

use EmotionButton in filter menu

Browse Source
This commit is contained in:
Alina Beck 2020-01-15 11:42:12 +03:00
parent 90d1e50b9e
commit f53bcba13c
2 changed files with 42 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/components/EmotionButton/EmotionButton.vue
View File

@ -4,12 +4,13 @@
<img :src="emojiPath" /> <img :src="emojiPath" />
</base-button> </base-button>
<label class="label" :for="emotion">{{ $t(`contribution.emotions-label.${emotion}`) }}</label> <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> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'EmotionButton',
props: { props: {
emojiPath: { emojiPath: {
type: String, type: String,
@ -43,13 +44,13 @@ export default {
} }
> .label { > .label {
margin-top: $space-xx-small; margin-top: $space-x-small;
font-size: $font-size-small; font-size: $font-size-small;
cursor: pointer; cursor: pointer;
} }
> .count { > .count {
margin: $space-xx-small 0; margin: $space-x-small 0;
} }
} }
</style> </style>

79
webapp/components/FilterPosts/GeneralFilterMenuItems.vue
View File

@ -6,54 +6,42 @@
</ds-flex> </ds-flex>
<ds-flex :gutter="{ lg: 'large' }"> <ds-flex :gutter="{ lg: 'large' }">
<ds-flex-item <ds-flex-item
:width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }" :width="{ base: '100%', sm: '100%', md: '10%', lg: '10%' }"
class="categories-menu-item" class="follow-filter"
> >
<ds-flex> <base-button
<ds-flex-item width="10%" /> name="filter-by-followed-authors-only"
<ds-space margin-bottom="xx-small" /> icon="user-plus"
<ds-flex-item width="100%"> circle
<div class="follow-filter-button"> :filled="filteredByUsersFollowed"
<base-button @click="toggleFilteredByFollowed(user.id)"
name="filter-by-followed-authors-only" v-tooltip="{
icon="user-plus" content: this.$t('contribution.filterFollow'),
circle placement: 'left',
:filled="filteredByUsersFollowed" delay: { show: 500 },
@click="toggleFilteredByFollowed(user.id)" }"
v-tooltip="{ />
content: this.$t('contribution.filterFollow'), <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
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>
</ds-flex-item> </ds-flex-item>
<div v-for="emotion in emotionsArray" :key="emotion"> <emotion-button
<ds-flex-item :width="{ lg: '100%' }"> v-for="emotion in emotionsArray"
<base-button @click="toogleFilteredByEmotions(emotion)" class="emotions-buttons" circle> :key="emotion"
<img :src="iconPath(emotion)" width="40" /> :emojiPath="iconPath(emotion)"
</base-button> :emotion="emotion"
<ds-space margin-bottom="x-small" /> @toggleEmotion="toogleFilteredByEmotions(emotion)"
<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>
<ds-space margin-bottom="large" /> <ds-space margin-bottom="large" />
</ds-flex> </ds-flex>
</ds-space> </ds-space>
</template> </template>
<script> <script>
import { mapGetters, mapMutations } from 'vuex' import { mapGetters, mapMutations } from 'vuex'
import EmotionButton from '~/components/EmotionButton/EmotionButton'
export default { export default {
components: {
EmotionButton,
},
props: { props: {
user: { type: Object, required: true }, user: { type: Object, required: true },
}, },
@ -91,13 +79,22 @@ export default {
display: block; 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) { @media only screen and (max-width: 960px) {
#filter-posts-header { #filter-posts-header {
text-align: center; text-align: center;
} }
.follow-filter-button {
float: left;
}
} }
.text-center { .text-center {