Add a super basic keep reaction open button

Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
Sam Therapy 2022-02-19 17:17:36 -06:00
parent 26d541c5b9
commit 3e9955fe20
Signed by: sam
GPG key ID: 4D8B07C18F31ACBD
2 changed files with 26 additions and 6 deletions

View file

@ -1,3 +1,4 @@
import Checkbox from '../checkbox/checkbox.vue'
import Popover from '../popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
@ -8,21 +9,26 @@ const ReactButton = {
props: ['status'],
data () {
return {
filterWord: ''
filterWord: '',
keepReactOpen: false
}
},
components: {
Popover
Popover,
Checkbox
},
methods: {
addReaction (event, emoji, close) {
addReaction (event, emoji, close, keepReactOpen) {
const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
if (existingReaction && existingReaction.me) {
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
} else {
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
}
close()
this.keepReactOpen = keepReactOpen
if (!keepReactOpen) {
close()
}
},
focusInput () {
this.$nextTick(() => {

View file

@ -16,13 +16,18 @@
:placeholder="$t('emoji.search_emoji')"
>
</div>
<div class="keep-open">
<Checkbox v-model="keepReactOpen">
{{ $t('emoji.keep_open') }}
</Checkbox>
</div>
<div class="reaction-picker">
<span
v-for="emoji in commonEmojis"
:key="emoji.replacement"
class="emoji-button"
:title="emoji.displayText"
@click="addReaction($event, emoji.replacement, close)"
@click="addReaction($event, emoji.replacement, close, keepReactOpen)"
>
{{ emoji.replacement }}
</span>
@ -32,7 +37,7 @@
:key="key"
class="emoji-button"
:title="emoji.displayText"
@click="addReaction($event, emoji.replacement, close)"
@click="addReaction($event, emoji.replacement, close, keepReactOpen)"
>
{{ emoji.replacement }}
</span>
@ -124,6 +129,15 @@
color: var(--text, $fallback--text);
}
}
.keep-open,
.too-many-emoji {
padding: 7px;
line-height: normal;
}
.keep-open-label {
padding: 0 7px;
display: flex;
}
}
</style>