Ocelot-Social/webapp/components/ObserveButton.vue
Ulf Gebhardt 4b3a26d517
feat(webapp): shout comments (#8600)
* shout comments

* fix notifications

* Remove whitespace for empty category sections

* Overhaul post actions

* Adjust spacing

* Allow fine-grained size control for icons and circle buttons via css variables; adjust comments layout

* Adjust spacing

* Add test for ActionButton (WIP)

* Rename import

* Remove text and add count bubble

* Use filled icons to indicate active states

* Adjust sizes and orientation

* Remove unused properties, add test

* Fix ObserveButton test

* Fix ShoutButton test

* fix tests

* Adapt styles

* Adjust style for larger numbers

* Remove unused icon

* Fix test structure

* Remove unused class names

---------

Co-authored-by: Maximilian Harz <maxharz@gmail.com>
2025-05-31 00:13:15 +02:00

32 lines
596 B
Vue

<template>
<action-button
:loading="false"
:count="count"
:text="$t('observeButton.observed')"
:filled="isObserved"
icon="bell"
circle
@click="toggle"
/>
</template>
<script>
import ActionButton from '~/components/ActionButton.vue'
export default {
components: {
ActionButton,
},
props: {
count: { type: Number, default: 0 },
postId: { type: String, default: null },
isObserved: { type: Boolean, default: false },
},
methods: {
toggle() {
this.$emit('toggleObservePost', this.postId, !this.isObserved)
},
},
}
</script>