clean up code, fix prediction bug

This commit is contained in:
Shpuld Shpuldson 2020-01-14 10:06:14 +02:00
parent b32888194c
commit b10b92a876
7 changed files with 122 additions and 89 deletions

View file

@ -0,0 +1,30 @@
const EmojiReactions = {
name: 'EmojiReactions',
props: ['status'],
computed: {
emojiReactions () {
return this.status.emojiReactions
}
},
methods: {
reactedWith (emoji) {
return this.status.reactedWithEmoji.includes(emoji)
},
reactWith (emoji) {
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
},
unreact (emoji) {
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
},
emojiOnClick (emoji, event) {
if (this.reactedWith(emoji)) {
this.unreact(emoji)
} else {
this.reactWith(emoji)
}
}
}
}
export default EmojiReactions

View file

@ -0,0 +1,51 @@
<template>
<div class="emoji-reactions">
<button
v-for="(users, emoji) in emojiReactions"
:key="emoji"
class="emoji-reaction btn btn-default"
:class="{ 'picked-reaction': reactedWith(emoji) }"
@click="emojiOnClick(emoji, $event)"
>
<span v-if="users">{{ users.length }}</span>
<span>{{ emoji }}</span>
</button>
</div>
</template>
<script src="./emoji_reactions.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
.emoji-reactions {
display: flex;
margin-top: 0.25em;
flex-wrap: wrap;
}
.emoji-reaction {
padding: 0 0.5em;
margin-right: 0.5em;
margin-top: 0.5em;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
:first-child {
margin-right: 0.25em;
}
:last-child {
width: 1.5em;
}
&:focus {
outline: none;
}
}
.picked-reaction {
border: 1px solid var(--link, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: calc(0.5em - 1px);
}
</style>

View file

@ -15,8 +15,9 @@ const ReactButton = {
} }
}, },
methods: { methods: {
toggleReactionSelect () { openReactionSelect () {
this.showTooltip = !this.showTooltip this.showTooltip = true
this.filterWord = ''
}, },
closeReactionSelect () { closeReactionSelect () {
this.showTooltip = false this.showTooltip = false

View file

@ -9,13 +9,16 @@
> >
<div slot="popover"> <div slot="popover">
<div class="reaction-picker-filter"> <div class="reaction-picker-filter">
<input v-model="filterWord" placeholder="Search..."> <input
v-model="filterWord"
:placeholder="$t('emoji.search_emoji')"
>
</div> </div>
<div class="reaction-picker"> <div class="reaction-picker">
<span <span
v-for="emoji in commonEmojis" v-for="emoji in commonEmojis"
:key="emoji" :key="emoji"
class="emoji-reaction-button" class="emoji-button"
@click="addReaction($event, emoji)" @click="addReaction($event, emoji)"
> >
{{ emoji }} {{ emoji }}
@ -24,7 +27,7 @@
<span <span
v-for="(emoji, key) in emojis" v-for="(emoji, key) in emojis"
:key="key" :key="key"
class="emoji-reaction-button" class="emoji-button"
@click="addReaction($event, emoji.replacement)" @click="addReaction($event, emoji.replacement)"
> >
{{ emoji.replacement }} {{ emoji.replacement }}
@ -34,11 +37,11 @@
</div> </div>
<div <div
v-if="loggedIn" v-if="loggedIn"
@click.prevent="toggleReactionSelect" @click.prevent="openReactionSelect"
> >
<i <i
:class="classes" :class="classes"
class="button-icon favorite-button fav-active" class="button-icon add-reaction-button"
:title="$t('tool_tip.add_reaction')" :title="$t('tool_tip.add_reaction')"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
@ -58,7 +61,7 @@
.reaction-picker-divider { .reaction-picker-divider {
height: 1px; height: 1px;
width: 100%; width: 100%;
margin: 0.4em; margin: 0.5em;
background-color: var(--border, $fallback--border); background-color: var(--border, $fallback--border);
} }
@ -82,26 +85,27 @@
// Autoprefixed seem to ignore this one, and also syntax is different // Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor; -webkit-mask-composite: xor;
mask-composite: exclude; mask-composite: exclude;
}
.emoji-reaction-button { .emoji-button {
cursor: pointer;
flex-basis: 20%; flex-basis: 20%;
line-height: 1.5em; line-height: 1.5em;
align-content: center; align-content: center;
}
.fav-active {
cursor: pointer;
animation-duration: 0.6s;
&:hover { &:hover {
color: $fallback--cOrange; transform: scale(1.25);
color: var(--cOrange, $fallback--cOrange); }
} }
} }
.favorite-button.icon-star { .add-reaction-button {
color: $fallback--cOrange; cursor: pointer;
color: var(--cOrange, $fallback--cOrange);
&:hover {
color: $fallback--text;
color: var(--text, $fallback--text);
} }
}
</style> </style>

View file

@ -12,6 +12,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
import AvatarList from '../avatar_list/avatar_list.vue' import AvatarList from '../avatar_list/avatar_list.vue'
import Timeago from '../timeago/timeago.vue' import Timeago from '../timeago/timeago.vue'
import StatusPopover from '../status_popover/status_popover.vue' import StatusPopover from '../status_popover/status_popover.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import fileType from 'src/services/file_type/file_type.service' import fileType from 'src/services/file_type/file_type.service'
import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js' import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
@ -311,9 +312,6 @@ const Status = {
hidePostStats () { hidePostStats () {
return this.mergedConfig.hidePostStats return this.mergedConfig.hidePostStats
}, },
emojiReactions () {
return this.status.emojiReactions
},
...mapGetters(['mergedConfig']), ...mapGetters(['mergedConfig']),
...mapState({ ...mapState({
betterShadow: state => state.interface.browserSupport.cssFilter, betterShadow: state => state.interface.browserSupport.cssFilter,
@ -334,7 +332,8 @@ const Status = {
LinkPreview, LinkPreview,
AvatarList, AvatarList,
Timeago, Timeago,
StatusPopover StatusPopover,
EmojiReactions
}, },
methods: { methods: {
visibilityIcon (visibility) { visibilityIcon (visibility) {
@ -418,22 +417,6 @@ const Status = {
setMedia () { setMedia () {
const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
return () => this.$store.dispatch('setMedia', attachments) return () => this.$store.dispatch('setMedia', attachments)
},
reactedWith (emoji) {
return this.status.reactedWithEmoji.includes(emoji)
},
reactWith (emoji) {
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
},
unreact (emoji) {
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
},
emojiOnClick (emoji, event) {
if (this.reactedWith(emoji)) {
this.unreact(emoji)
} else {
this.reactWith(emoji)
}
} }
}, },
watch: { watch: {

View file

@ -354,18 +354,10 @@
</div> </div>
</transition> </transition>
<div v-if="isFocused" class="emoji-reactions"> <EmojiReactions
<button v-if="isFocused"
v-for="(users, emoji) in emojiReactions" :status="status"
:key="emoji" />
class="emoji-reaction btn btn-default"
:class="{ 'picked-reaction': reactedWith(emoji) }"
@click="emojiOnClick(emoji, $event)"
>
<span v-if="users">{{ users.length }}</span>
<span>{{ emoji }}</span>
</button>
</div>
<div <div
v-if="!noHeading && !isPreview" v-if="!noHeading && !isPreview"
@ -789,37 +781,6 @@ $status-margin: 0.75em;
} }
} }
.emoji-reactions {
display: flex;
margin-top: 0.25em;
flex-wrap: wrap;
}
.emoji-reaction {
padding: 0 0.5em;
margin-right: 0.5em;
margin-top: 0.5em;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
:first-child {
margin-right: 0.25em;
}
:last-child {
width: 1.5em;
}
&:focus {
outline: none;
}
}
.picked-reaction {
border: 1px solid var(--link, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: calc(0.5em - 1px);
}
.button-icon.icon-reply { .button-icon.icon-reply {
&:not(.button-icon-disabled):hover, &:not(.button-icon-disabled):hover,
&.button-icon-active { &.button-icon-active {

View file

@ -537,7 +537,10 @@ export const mutations = {
addEmojiReactions (state, { id, emojiReactions, currentUser }) { addEmojiReactions (state, { id, emojiReactions, currentUser }) {
const status = state.allStatusesObject[id] const status = state.allStatusesObject[id]
set(status, 'emojiReactions', emojiReactions) set(status, 'emojiReactions', emojiReactions)
const reactedWithEmoji = flow(keys, filter(reaction => find(reaction, { id: currentUser.id })))(emojiReactions) const reactedWithEmoji = flow(
keys,
filter(reaction => find(reaction, { id: currentUser.id }))
)(emojiReactions)
set(status, 'reactedWithEmoji', reactedWithEmoji) set(status, 'reactedWithEmoji', reactedWithEmoji)
}, },
addOwnReaction (state, { id, emoji, currentUser }) { addOwnReaction (state, { id, emoji, currentUser }) {
@ -547,7 +550,7 @@ export const mutations = {
const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id }) const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
if (!hasSelfAlready) { if (!hasSelfAlready) {
set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }])) set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }]))
set(status, 'reactedWithEmoji', emoji) set(status, 'reactedWithEmoji', [...status.reactedWithEmoji, emoji])
} }
}, },
removeOwnReaction (state, { id, emoji, currentUser }) { removeOwnReaction (state, { id, emoji, currentUser }) {
@ -557,7 +560,7 @@ export const mutations = {
if (hasSelfAlready) { if (hasSelfAlready) {
const newUsers = filter(listOfUsers, user => user.id !== currentUser.id) const newUsers = filter(listOfUsers, user => user.id !== currentUser.id)
set(status.emojiReactions, emoji, newUsers) set(status.emojiReactions, emoji, newUsers)
set(status, 'reactedWith', emoji) set(status, 'reactedWithEmoji', status.reactedWithEmoji.filter(e => e !== emoji))
} }
}, },
updateStatusWithPoll (state, { id, poll }) { updateStatusWithPoll (state, { id, poll }) {