usable-but-buggy: picker, adding/removing reaction on click, search, styles

This commit is contained in:
Shpuld Shpuldson 2020-01-13 23:34:39 +02:00
parent de945ba3e9
commit 33abbed5a1
7 changed files with 166 additions and 28 deletions

View file

@ -6,6 +6,7 @@ const ReactButton = {
return { return {
animated: false, animated: false,
showTooltip: false, showTooltip: false,
filterWord: '',
popperOptions: { popperOptions: {
modifiers: { modifiers: {
preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' } preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
@ -14,27 +15,25 @@ const ReactButton = {
} }
}, },
methods: { methods: {
openReactionSelect () { toggleReactionSelect () {
console.log('test') this.showTooltip = !this.showTooltip
this.showTooltip = true
}, },
closeReactionSelect () { closeReactionSelect () {
this.showTooltip = false this.showTooltip = false
}, },
favorite () { addReaction (event, emoji) {
if (!this.status.favorited) { this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
this.$store.dispatch('favorite', { id: this.status.id }) this.closeReactionSelect()
} else {
this.$store.dispatch('unfavorite', { id: this.status.id })
}
this.animated = true
setTimeout(() => {
this.animated = false
}, 500)
} }
}, },
computed: { computed: {
commonEmojis () {
return ['💖', '😠', '👀', '😂', '🔥']
},
emojis () { emojis () {
if (this.filterWord !== '') {
return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord))
}
return this.$store.state.instance.emoji || [] return this.$store.state.instance.emoji || []
}, },
classes () { classes () {

View file

@ -5,21 +5,37 @@
trigger="manual" trigger="manual"
placement="top" placement="top"
class="react-button-popover" class="react-button-popover"
@close-group="closeReactionSelect" @hide="closeReactionSelect"
> >
<div slot="popover"> <div slot="popover">
<div class="reaction-picker-filter">
<input v-model="filterWord" placeholder="Search...">
</div>
<div class="reaction-picker"> <div class="reaction-picker">
<span
v-for="emoji in commonEmojis"
:key="emoji"
class="emoji-reaction-button"
@click="addReaction($event, emoji)"
>
{{ emoji }}
</span>
<div class="reaction-picker-divider" />
<span <span
v-for="(emoji, key) in emojis" v-for="(emoji, key) in emojis"
:key="key" :key="key"
class="emoji-reaction-button" class="emoji-reaction-button"
@click="addReaction($event, emoji.replacement)"
> >
{{ emoji.replacement }} {{ emoji.replacement }}
</span> </span>
<div class="reaction-bottom-fader" /> <div class="reaction-bottom-fader" />
</div> </div>
</div> </div>
<div @click.prevent="openReactionSelect" v-if="loggedIn"> <div
v-if="loggedIn"
@click.prevent="toggleReactionSelect"
>
<i <i
:class="classes" :class="classes"
class="button-icon favorite-button fav-active" class="button-icon favorite-button fav-active"
@ -35,15 +51,28 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.reaction-picker-filter {
padding: 0.5em;
}
.reaction-picker-divider {
height: 1px;
width: 100%;
margin: 0.4em;
background-color: var(--border, $fallback--border);
}
.reaction-picker { .reaction-picker {
width: 10em; width: 10em;
height: 8em; height: 9em;
font-size: 1.5em; font-size: 1.5em;
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.5em; padding: 0.5em;
text-align: center; text-align: center;
align-content: flex-start;
user-select: none;
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, 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 bottom, white 0, transparent 100%) top no-repeat,

View file

@ -280,10 +280,7 @@ const Status = {
return this.mergedConfig.hidePostStats return this.mergedConfig.hidePostStats
}, },
emojiReactions () { emojiReactions () {
return { return this.status.emojiReactions
'🤔': [{ 'id': 'xyz..' }, { 'id': 'zyx...' }],
'🐻': [{ 'id': 'abc...' }]
}
}, },
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
}, },
@ -385,6 +382,22 @@ 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,13 +354,15 @@
</div> </div>
</transition> </transition>
<div class="emoji-reactions"> <div v-if="isFocused" class="emoji-reactions">
<button <button
v-for="(users, emoji) in emojiReactions" v-for="(users, emoji) in emojiReactions"
:key="emoji" :key="emoji"
class="emoji-reaction btn btn-default" class="emoji-reaction btn btn-default"
:class="{ 'picked-reaction': reactedWith(emoji) }"
@click="emojiOnClick(emoji, $event)"
> >
<span>{{ users.length }}</span> <span v-if="users">{{ users.length }}</span>
<span>{{ emoji }}</span> <span>{{ emoji }}</span>
</button> </button>
</div> </div>
@ -788,19 +790,33 @@ $status-margin: 0.75em;
.emoji-reactions { .emoji-reactions {
display: flex; display: flex;
margin-top: 0.75em; margin-top: 0.25em;
flex-wrap: wrap;
} }
.emoji-reaction { .emoji-reaction {
padding: 0 0.5em; padding: 0 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
margin-top: 0.5em;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box;
:first-child { :first-child {
margin-right: 0.25em; 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 {

View file

@ -1,4 +1,20 @@
import { remove, slice, each, findIndex, find, maxBy, minBy, merge, first, last, isArray, omitBy, findKey } from 'lodash' import {
remove,
slice,
each,
findIndex,
find,
maxBy,
minBy,
merge,
first,
last,
isArray,
omitBy,
flow,
filter,
keys
} from 'lodash'
import { set } from 'vue' import { set } from 'vue'
import apiService from '../services/api/api.service.js' import apiService from '../services/api/api.service.js'
// import parse from '../services/status_parser/status_parser.js' // import parse from '../services/status_parser/status_parser.js'
@ -512,8 +528,29 @@ export const mutations = {
}, },
addEmojiReactions (state, { id, emojiReactions, currentUser }) { addEmojiReactions (state, { id, emojiReactions, currentUser }) {
const status = state.allStatusesObject[id] const status = state.allStatusesObject[id]
status.emojiReactions = emojiReactions set(status, 'emojiReactions', emojiReactions)
status.reactedWithEmoji = findKey(emojiReactions, { id: currentUser.id }) const reactedWithEmoji = flow(keys, filter(reaction => find(reaction, { id: currentUser.id })))(emojiReactions)
set(status, 'reactedWithEmoji', reactedWithEmoji)
},
addOwnReaction (state, { id, emoji, currentUser }) {
const status = state.allStatusesObject[id]
status.emojiReactions = status.emojiReactions || {}
const listOfUsers = (status.emojiReactions && status.emojiReactions[emoji]) || []
const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
if (!hasSelfAlready) {
set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }]))
set(status, 'reactedWithEmoji', emoji)
}
},
removeOwnReaction (state, { id, emoji, currentUser }) {
const status = state.allStatusesObject[id]
const listOfUsers = status.emojiReactions[emoji] || []
const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
if (hasSelfAlready) {
const newUsers = filter(listOfUsers, user => user.id !== currentUser.id)
set(status.emojiReactions, emoji, newUsers)
set(status, 'reactedWith', emoji)
}
}, },
updateStatusWithPoll (state, { id, poll }) { updateStatusWithPoll (state, { id, poll }) {
const status = state.allStatusesObject[id] const status = state.allStatusesObject[id]
@ -616,6 +653,24 @@ const statuses = {
commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }) commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
}) })
}, },
reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
const currentUser = rootState.users.currentUser
commit('addOwnReaction', { id, emoji, currentUser })
rootState.api.backendInteractor.reactWithEmoji(id, emoji).then(
status => {
dispatch('fetchEmojiReactions', id)
}
)
},
unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
const currentUser = rootState.users.currentUser
commit('removeOwnReaction', { id, emoji, currentUser })
rootState.api.backendInteractor.unreactWithEmoji(id, emoji).then(
status => {
dispatch('fetchEmojiReactions', id)
}
)
},
fetchEmojiReactions ({ rootState, commit }, id) { fetchEmojiReactions ({ rootState, commit }, id) {
rootState.api.backendInteractor.fetchEmojiReactions(id).then( rootState.api.backendInteractor.fetchEmojiReactions(id).then(
emojiReactions => { emojiReactions => {

View file

@ -72,6 +72,8 @@ const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
const MASTODON_SEARCH_2 = `/api/v2/search` const MASTODON_SEARCH_2 = `/api/v2/search`
const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search' const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by` const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by`
const PLEROMA_EMOJI_REACT_URL = id => `/api/v1/pleroma/statuses/${id}/react_with_emoji`
const PLEROMA_EMOJI_UNREACT_URL = id => `/api/v1/pleroma/statuses/${id}/unreact_with_emoji`
const oldfetch = window.fetch const oldfetch = window.fetch
@ -869,6 +871,24 @@ const fetchEmojiReactions = ({ id }) => {
return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) }) return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) })
} }
const reactWithEmoji = ({ id, emoji, credentials }) => {
return promisedRequest({
url: PLEROMA_EMOJI_REACT_URL(id),
method: 'POST',
credentials,
payload: { emoji }
}).then(status => parseStatus(status))
}
const unreactWithEmoji = ({ id, emoji, credentials }) => {
return promisedRequest({
url: PLEROMA_EMOJI_UNREACT_URL(id),
method: 'POST',
credentials,
payload: { emoji }
}).then(parseStatus)
}
const reportUser = ({ credentials, userId, statusIds, comment, forward }) => { const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
return promisedRequest({ return promisedRequest({
url: MASTODON_REPORT_USER_URL, url: MASTODON_REPORT_USER_URL,
@ -1003,6 +1023,8 @@ const apiService = {
fetchFavoritedByUsers, fetchFavoritedByUsers,
fetchRebloggedByUsers, fetchRebloggedByUsers,
fetchEmojiReactions, fetchEmojiReactions,
reactWithEmoji,
unreactWithEmoji,
reportUser, reportUser,
updateNotificationSettings, updateNotificationSettings,
search2, search2,

View file

@ -144,6 +144,8 @@ const backendInteractorService = credentials => {
const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id }) const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id })
const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id }) const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id })
const fetchEmojiReactions = (id) => apiService.fetchEmojiReactions({ id }) const fetchEmojiReactions = (id) => apiService.fetchEmojiReactions({ id })
const reactWithEmoji = (id, emoji) => apiService.reactWithEmoji({ id, emoji, credentials })
const unreactWithEmoji = (id, emoji) => apiService.unreactWithEmoji({ id, emoji, credentials })
const reportUser = (params) => apiService.reportUser({ credentials, ...params }) const reportUser = (params) => apiService.reportUser({ credentials, ...params })
const favorite = (id) => apiService.favorite({ id, credentials }) const favorite = (id) => apiService.favorite({ id, credentials })
@ -212,6 +214,8 @@ const backendInteractorService = credentials => {
fetchFavoritedByUsers, fetchFavoritedByUsers,
fetchRebloggedByUsers, fetchRebloggedByUsers,
fetchEmojiReactions, fetchEmojiReactions,
reactWithEmoji,
unreactWithEmoji,
reportUser, reportUser,
favorite, favorite,
unfavorite, unfavorite,