Add a super basic keep reaction open button
Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
parent
26d541c5b9
commit
3e9955fe20
2 changed files with 26 additions and 6 deletions
|
@ -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(() => {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue