diff options
| -rw-r--r-- | src/components/react_button/react_button.js | 50 | ||||
| -rw-r--r-- | src/components/react_button/react_button.vue | 78 | ||||
| -rw-r--r-- | src/components/status/status.js | 2 | ||||
| -rw-r--r-- | src/components/status/status.vue | 10 | ||||
| -rw-r--r-- | src/i18n/en.json | 1 |
5 files changed, 138 insertions, 3 deletions
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js new file mode 100644 index 00000000..d1d15d93 --- /dev/null +++ b/src/components/react_button/react_button.js @@ -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 diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue new file mode 100644 index 00000000..93638770 --- /dev/null +++ b/src/components/react_button/react_button.vue @@ -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> diff --git a/src/components/status/status.js b/src/components/status/status.js index 8268e615..8c6fc0cf 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -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, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index aae58a5e..d455ccf6 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -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" diff --git a/src/i18n/en.json b/src/i18n/en.json index ad3e671d..febbf2ea 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -632,6 +632,7 @@ "repeat": "Repeat", "reply": "Reply", "favorite": "Favorite", + "add_reaction": "Add Reaction", "user_settings": "User Settings" }, "upload":{ |