fix/pinned-statuses-not-showing-on-bottom-of-tl
parent
d007502629
commit
de945ba3e9
@ -0,0 +1,50 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
const ReactButton = {
|
||||
props: ['status', 'loggedIn'],
|
||||
data () {
|
||||
return {
|
||||
animated: false,
|
||||
showTooltip: false,
|
||||
popperOptions: {
|
||||
modifiers: {
|
||||
preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openReactionSelect () {
|
||||
console.log('test')
|
||||
this.showTooltip = true
|
||||
},
|
||||
closeReactionSelect () {
|
||||
this.showTooltip = false
|
||||
},
|
||||
favorite () {
|
||||
if (!this.status.favorited) {
|
||||
this.$store.dispatch('favorite', { id: this.status.id })
|
||||
} else {
|
||||
this.$store.dispatch('unfavorite', { id: this.status.id })
|
||||
}
|
||||
this.animated = true
|
||||
setTimeout(() => {
|
||||
this.animated = false
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
emojis () {
|
||||
return this.$store.state.instance.emoji || []
|
||||
},
|
||||
classes () {
|
||||
return {
|
||||
'icon-smile': true,
|
||||
'animate-spin': this.animated
|
||||
}
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
}
|
||||
}
|
||||
|
||||
export default ReactButton
|
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<v-popover
|
||||
:popper-options="popperOptions"
|
||||
:open="showTooltip"
|
||||
trigger="manual"
|
||||
placement="top"
|
||||
class="react-button-popover"
|
||||
@close-group="closeReactionSelect"
|
||||
>
|
||||
<div slot="popover">
|
||||
<div class="reaction-picker">
|
||||
<span
|
||||
v-for="(emoji, key) in emojis"
|
||||
:key="key"
|
||||
class="emoji-reaction-button"
|
||||
>
|
||||
{{ emoji.replacement }}
|
||||
</span>
|
||||
<div class="reaction-bottom-fader" />
|
||||
</div>
|
||||
</div>
|
||||
<div @click.prevent="openReactionSelect" v-if="loggedIn">
|
||||
<i
|
||||
:class="classes"
|
||||
class="button-icon favorite-button fav-active"
|
||||
:title="$t('tool_tip.add_reaction')"
|
||||
/>
|
||||
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
|
||||
</div>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
||||
<script src="./react_button.js" ></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.reaction-picker {
|
||||
width: 10em;
|
||||
height: 8em;
|
||||
font-size: 1.5em;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5em;
|
||||
text-align:center;
|
||||
|
||||
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
||||
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
transition: mask-size 150ms;
|
||||
mask-size: 100% 20px, 100% 20px, auto;
|
||||
// Autoprefixed seem to ignore this one, and also syntax is different
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.emoji-reaction-button {
|
||||
flex-basis: 20%;
|
||||
line-height: 1.5em;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.fav-active {
|
||||
cursor: pointer;
|
||||
animation-duration: 0.6s;
|
||||
|
||||
&:hover {
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
}
|
||||
}
|
||||
|
||||
.favorite-button.icon-star {
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue