wip commit, add basic popover for emoji reaction select

This commit is contained in:
Shpuld Shpuldson 2019-11-15 16:29:25 +02:00
parent d007502629
commit de945ba3e9
5 changed files with 138 additions and 3 deletions

View File

@ -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

View File

@ -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>

View File

@ -1,5 +1,6 @@
import Attachment from '../attachment/attachment.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue'
import ReactButton from '../react_button/react_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
import Poll from '../poll/poll.vue'
import ExtraButtons from '../extra_buttons/extra_buttons.vue'
@ -289,6 +290,7 @@ const Status = {
components: {
Attachment,
FavoriteButton,
ReactButton,
RetweetButton,
ExtraButtons,
PostStatusForm,

View File

@ -356,12 +356,12 @@
<div class="emoji-reactions">
<button
class="emoji-reaction btn btn-default"
v-for="(users, emoji) in emojiReactions"
:key="emoji"
class="emoji-reaction btn btn-default"
>
<span>{{users.length}}</span>
<span>{{emoji}}</span>
<span>{{ users.length }}</span>
<span>{{ emoji }}</span>
</button>
</div>
@ -393,6 +393,10 @@
:logged-in="loggedIn"
:status="status"
/>
<ReactButton
:logged-in="loggedIn"
:status="status"
/>
<extra-buttons
:status="status"
@onError="showError"

View File

@ -632,6 +632,7 @@
"repeat": "Repeat",
"reply": "Reply",
"favorite": "Favorite",
"add_reaction": "Add Reaction",
"user_settings": "User Settings"
},
"upload":{