wip commit, add basic popover for emoji reaction select
This commit is contained in:
parent
d007502629
commit
de945ba3e9
50
src/components/react_button/react_button.js
Normal file
50
src/components/react_button/react_button.js
Normal 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
|
78
src/components/react_button/react_button.vue
Normal file
78
src/components/react_button/react_button.vue
Normal 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>
|
@ -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,
|
||||
|
@ -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"
|
||||
|
@ -632,6 +632,7 @@
|
||||
"repeat": "Repeat",
|
||||
"reply": "Reply",
|
||||
"favorite": "Favorite",
|
||||
"add_reaction": "Add Reaction",
|
||||
"user_settings": "User Settings"
|
||||
},
|
||||
"upload":{
|
||||
|
Loading…
Reference in New Issue
Block a user