mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
1e6a74b8ce
* After creating the post, the author of it automatically observes it to get notifications when there are interactions * a user that comments a post, automatically observes that post to get notifications when there are more interactions on that post * mutation that switches the state of the obeservation of a post on and off * remove duplicate code * fix unit tests * add metric observed users count to posts * change naming * Add follow post entry to post menu * Add FollowButton (WIP), show unfollow in menu when already followed * Follow/unfollow post => observe * Update slashed bell * Add requests to observe/unobserve posts * Add ObserveButton functionality * Rename isObservedByMe * Add observingUsersCount; simplify ObserveButton and menu entries * Fix locales * Add snapshot test for ObserveButton (WIP) * Remove empty routes push * Add test for ObserveButton * Add test for ContentMenu, improve ObserveButton test * Remove unneeded fields from PostQuery --------- Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
40 lines
898 B
Vue
40 lines
898 B
Vue
<template>
|
|
<ds-space margin="xx-small" class="text-align-center">
|
|
<base-button :loading="loading" :filled="isObserved" icon="bell" circle @click="toggle" />
|
|
<ds-space margin-bottom="xx-small" />
|
|
<ds-text color="soft" class="observe-button-text">
|
|
<ds-heading style="display: inline" tag="h3">{{ count }}x</ds-heading>
|
|
{{ $t('observeButton.observed') }}
|
|
</ds-text>
|
|
</ds-space>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
count: { type: Number, default: 0 },
|
|
postId: { type: String, default: null },
|
|
isObserved: { type: Boolean, default: false },
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
}
|
|
},
|
|
methods: {
|
|
toggle() {
|
|
this.$emit('toggleObservePost', this.postId, !this.isObserved)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.observe-button-text {
|
|
user-select: none;
|
|
}
|
|
.text-align-center {
|
|
text-align: center;
|
|
}
|
|
</style>
|