* upstream/develop: (33 commits) add emoji reactions to changelog fix emoji reaction classes broken in develop review changes Fix password and email update remove unnecessary anonymous function Apply suggestion to src/services/api/api.service.js remove logs/commented code remove favs count from react button remove mock data change emoji reactions to use new format Added polyfills for EventTarget (needed for Safari) and CustomEvent (needed for IE) Fix missing TWKN when logged in, but server is set to private mode. Fix follower request fetching Add domain mutes to changelog Implement domain mutes v2 change changelog to reflect actual release history of frontend Fix #750 , fix error messages and captcha resetting Optimize Notifications Rendering update CHANGELOG Use last seen notif instead of first unseen notif for sinceId ...test-shm
commit
f0c4bb1193
@ -0,0 +1,15 @@
|
||||
import ProgressButton from '../progress_button/progress_button.vue'
|
||||
|
||||
const DomainMuteCard = {
|
||||
props: ['domain'],
|
||||
components: {
|
||||
ProgressButton
|
||||
},
|
||||
methods: {
|
||||
unmuteDomain () {
|
||||
return this.$store.dispatch('unmuteDomain', this.domain)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DomainMuteCard
|
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="domain-mute-card">
|
||||
<div class="domain-mute-card-domain">
|
||||
{{ domain }}
|
||||
</div>
|
||||
<ProgressButton
|
||||
:click="unmuteDomain"
|
||||
class="btn btn-default"
|
||||
>
|
||||
{{ $t('domain_mute_card.unmute') }}
|
||||
<template slot="progress">
|
||||
{{ $t('domain_mute_card.unmute_progress') }}
|
||||
</template>
|
||||
</ProgressButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./domain_mute_card.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.domain-mute-card {
|
||||
flex: 1 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.6em 1em 0.6em 0;
|
||||
|
||||
&-domain {
|
||||
margin-right: 1em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,32 @@
|
||||
|
||||
const EmojiReactions = {
|
||||
name: 'EmojiReactions',
|
||||
props: ['status'],
|
||||
computed: {
|
||||
emojiReactions () {
|
||||
return this.status.emoji_reactions
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reactedWith (emoji) {
|
||||
const user = this.$store.state.users.currentUser
|
||||
const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
|
||||
return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
|
||||
},
|
||||
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
|
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="emoji-reactions">
|
||||
<button
|
||||
v-for="(reaction) in emojiReactions"
|
||||
:key="reaction.emoji"
|
||||
class="emoji-reaction btn btn-default"
|
||||
:class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
|
||||
@click="emojiOnClick(reaction.emoji, $event)"
|
||||
>
|
||||
<span class="reaction-emoji">{{ reaction.emoji }}</span>
|
||||
<span>{{ reaction.count }}</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;
|
||||
.reaction-emoji {
|
||||
width: 1.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
&: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>
|
@ -0,0 +1,43 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
const ReactButton = {
|
||||
props: ['status', 'loggedIn'],
|
||||
data () {
|
||||
return {
|
||||
showTooltip: false,
|
||||
filterWord: '',
|
||||
popperOptions: {
|
||||
modifiers: {
|
||||
preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openReactionSelect () {
|
||||
this.showTooltip = true
|
||||
this.filterWord = ''
|
||||
},
|
||||
closeReactionSelect () {
|
||||
this.showTooltip = false
|
||||
},
|
||||
addReaction (event, emoji) {
|
||||
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
|
||||
this.closeReactionSelect()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
commonEmojis () {
|
||||
return ['❤️', '😠', '👀', '😂', '🔥']
|
||||
},
|
||||
emojis () {
|
||||
if (this.filterWord !== '') {
|
||||
return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord))
|
||||
}
|
||||
return this.$store.state.instance.emoji || []
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
}
|
||||
}
|
||||
|
||||
export default ReactButton
|
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<v-popover
|
||||
:popper-options="popperOptions"
|
||||
:open="showTooltip"
|
||||
trigger="manual"
|
||||
placement="top"
|
||||
class="react-button-popover"
|
||||
@hide="closeReactionSelect"
|
||||
>
|
||||
<div slot="popover">
|
||||
<div class="reaction-picker-filter">
|
||||
<input
|
||||
v-model="filterWord"
|
||||
:placeholder="$t('emoji.search_emoji')"
|
||||
>
|
||||
</div>
|
||||
<div class="reaction-picker">
|
||||
<span
|
||||
v-for="emoji in commonEmojis"
|
||||
:key="emoji"
|
||||
class="emoji-button"
|
||||
@click="addReaction($event, emoji)"
|
||||
>
|
||||
{{ emoji }}
|
||||
</span>
|
||||
<div class="reaction-picker-divider" />
|
||||
<span
|
||||
v-for="(emoji, key) in emojis"
|
||||
:key="key"
|
||||
class="emoji-button"
|
||||
@click="addReaction($event, emoji.replacement)"
|
||||
>
|
||||
{{ emoji.replacement }}
|
||||
</span>
|
||||
<div class="reaction-bottom-fader" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="loggedIn"
|
||||
@click.prevent="openReactionSelect"
|
||||
>
|
||||
<i
|
||||
class="icon-smile button-icon add-reaction-button"
|
||||
:title="$t('tool_tip.add_reaction')"
|
||||
/>
|
||||
</div>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
||||
<script src="./react_button.js" ></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.reaction-picker-filter {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.reaction-picker-divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 0.5em;
|
||||
background-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
.reaction-picker {
|
||||
width: 10em;
|
||||
height: 9em;
|
||||
font-size: 1.5em;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
align-content: flex-start;
|
||||
user-select: none;
|
||||
|
||||
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-button {
|
||||
cursor: pointer;
|
||||
|
||||
flex-basis: 20%;
|
||||
line-height: 1.5em;
|
||||
align-content: center;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-reaction-button {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
@ -0,0 +1,9 @@
|
||||
import EventTargetPolyfill from '@ungap/event-target'
|
||||
|
||||
try {
|
||||
/* eslint-disable no-new */
|
||||
new EventTarget()
|
||||
/* eslint-enable no-new */
|
||||
} catch (e) {
|
||||
window.EventTarget = EventTargetPolyfill
|
||||
}
|
Loading…
Reference in new issue