Merge branch 'develop' of https://git.pleroma.social/pleroma/pleroma-fe into develop
This commit is contained in:
sadposter
commit
b141b04a53
85 changed files with 4493 additions and 1035 deletions
|
|
@ -9,9 +9,12 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
|
|||
import AvatarList from '../avatar_list/avatar_list.vue'
|
||||
import Timeago from '../timeago/timeago.vue'
|
||||
import StatusContent from '../status_content/status_content.vue'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import StatusPopover from '../status_popover/status_popover.vue'
|
||||
import UserListPopover from '../user_list_popover/user_list_popover.vue'
|
||||
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
|
||||
import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
|
||||
import MentionLink from 'src/components/mention_link/mention_link.vue'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
||||
import { muteWordHits } from '../../services/status_parser/status_parser.js'
|
||||
|
|
@ -68,7 +71,10 @@ const Status = {
|
|||
StatusPopover,
|
||||
UserListPopover,
|
||||
EmojiReactions,
|
||||
StatusContent
|
||||
StatusContent,
|
||||
RichContent,
|
||||
MentionLink,
|
||||
MentionsLine
|
||||
},
|
||||
props: [
|
||||
'statusoid',
|
||||
|
|
@ -92,7 +98,8 @@ const Status = {
|
|||
userExpanded: false,
|
||||
mediaPlaying: [],
|
||||
suspendable: true,
|
||||
error: null
|
||||
error: null,
|
||||
headTailLinks: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -132,12 +139,15 @@ const Status = {
|
|||
},
|
||||
replyProfileLink () {
|
||||
if (this.isReply) {
|
||||
return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
|
||||
const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
|
||||
// FIXME Why user not found sometimes???
|
||||
return user ? user.statusnet_profile_url : 'NOT_FOUND'
|
||||
}
|
||||
},
|
||||
retweet () { return !!this.statusoid.retweeted_status },
|
||||
retweeterUser () { return this.statusoid.user },
|
||||
retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
|
||||
retweeterHtml () { return this.statusoid.user.name_html },
|
||||
retweeterHtml () { return this.statusoid.user.name },
|
||||
retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
|
||||
status () {
|
||||
if (this.retweet) {
|
||||
|
|
@ -156,6 +166,25 @@ const Status = {
|
|||
muteWordHits () {
|
||||
return muteWordHits(this.status, this.muteWords)
|
||||
},
|
||||
mentionsLine () {
|
||||
if (!this.headTailLinks) return []
|
||||
const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
|
||||
return this.status.attentions.filter(attn => {
|
||||
// no reply user
|
||||
return attn.id !== this.status.in_reply_to_user_id &&
|
||||
// no self-replies
|
||||
attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&
|
||||
// don't include if mentions is written
|
||||
!writtenSet.has(attn.statusnet_profile_url)
|
||||
}).map(attn => ({
|
||||
url: attn.statusnet_profile_url,
|
||||
content: attn.screen_name,
|
||||
userId: attn.id
|
||||
}))
|
||||
},
|
||||
hasMentionsLine () {
|
||||
return this.mentionsLine.length > 0
|
||||
},
|
||||
muted () {
|
||||
if (this.statusoid.user.id === this.currentUser.id) return false
|
||||
const { status } = this
|
||||
|
|
@ -305,6 +334,9 @@ const Status = {
|
|||
},
|
||||
removeMediaPlaying (id) {
|
||||
this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
|
||||
},
|
||||
setHeadTailLinks (headTailLinks) {
|
||||
this.headTailLinks = headTailLinks
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
|
||||
@import '../../_variables.scss';
|
||||
|
||||
$status-margin: 0.75em;
|
||||
|
||||
.Status {
|
||||
min-width: 0;
|
||||
white-space: normal;
|
||||
|
||||
&:hover {
|
||||
--_still-image-img-visibility: visible;
|
||||
|
|
@ -93,12 +93,8 @@ $status-margin: 0.75em;
|
|||
margin-right: 0.4em;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.emoji {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
object-fit: contain;
|
||||
}
|
||||
--_still_image-label-scale: 0.25;
|
||||
--emoji-size: 14px;
|
||||
}
|
||||
|
||||
.status-favicon {
|
||||
|
|
@ -155,35 +151,24 @@ $status-margin: 0.75em;
|
|||
}
|
||||
}
|
||||
|
||||
.glued-label {
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timeago {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.heading-reply-row {
|
||||
& .heading-reply-row {
|
||||
position: relative;
|
||||
align-content: baseline;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
line-height: 160%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.reply-to-and-accountname {
|
||||
display: flex;
|
||||
height: 18px;
|
||||
margin-right: 0.5em;
|
||||
max-width: 100%;
|
||||
|
||||
.reply-to-link {
|
||||
white-space: nowrap;
|
||||
word-break: break-word;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& .reply-to-popover,
|
||||
& .reply-to-no-popover {
|
||||
min-width: 0;
|
||||
|
|
@ -220,21 +205,27 @@ $status-margin: 0.75em;
|
|||
}
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
& .mentions,
|
||||
& .reply-to {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
|
||||
.reply-to-text {
|
||||
& .mentions-text,
|
||||
& .reply-to-text {
|
||||
color: var(--faint);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.replies-separator {
|
||||
margin-left: 0.4em;
|
||||
.mentions-line {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin-top: 0.25em;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="!hideStatus"
|
||||
class="Status"
|
||||
|
|
@ -89,8 +88,12 @@
|
|||
<router-link
|
||||
v-if="retweeterHtml"
|
||||
:to="retweeterProfileLink"
|
||||
v-html="retweeterHtml"
|
||||
/>
|
||||
>
|
||||
<RichContent
|
||||
:html="retweeterHtml"
|
||||
:emoji="retweeterUser.emoji"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-else
|
||||
:to="retweeterProfileLink"
|
||||
|
|
@ -145,8 +148,12 @@
|
|||
v-if="status.user.name_html"
|
||||
class="status-username"
|
||||
:title="status.user.name"
|
||||
v-html="status.user.name_html"
|
||||
/>
|
||||
>
|
||||
<RichContent
|
||||
:html="status.user.name"
|
||||
:emoji="status.user.emoji"
|
||||
/>
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="status-username"
|
||||
|
|
@ -214,11 +221,13 @@
|
|||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="heading-reply-row">
|
||||
<div
|
||||
<div
|
||||
v-if="isReply || hasMentionsLine"
|
||||
class="heading-reply-row"
|
||||
>
|
||||
<span
|
||||
v-if="isReply"
|
||||
class="reply-to-and-accountname"
|
||||
class="glued-label"
|
||||
>
|
||||
<StatusPopover
|
||||
v-if="!isPreview"
|
||||
|
|
@ -238,7 +247,7 @@
|
|||
flip="horizontal"
|
||||
/>
|
||||
<span
|
||||
class="faint-link reply-to-text"
|
||||
class="reply-to-text"
|
||||
>
|
||||
{{ $t('status.reply_to') }}
|
||||
</span>
|
||||
|
|
@ -251,50 +260,76 @@
|
|||
>
|
||||
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
|
||||
</span>
|
||||
<router-link
|
||||
class="reply-to-link"
|
||||
:title="replyToName"
|
||||
:to="replyProfileLink"
|
||||
>
|
||||
{{ replyToName }}
|
||||
</router-link>
|
||||
<span
|
||||
v-if="replies && replies.length"
|
||||
class="faint replies-separator"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="inConversation && !isPreview && replies && replies.length"
|
||||
class="replies"
|
||||
<MentionLink
|
||||
:content="replyToName"
|
||||
:url="replyProfileLink"
|
||||
:user-id="status.in_reply_to_user_id"
|
||||
:user-screen-name="status.in_reply_to_screen_name"
|
||||
:first-mention="false"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<!-- This little wrapper is made for sole purpose of "gluing" -->
|
||||
<!-- "Mentions" label to the first mention -->
|
||||
<span
|
||||
v-if="hasMentionsLine"
|
||||
class="glued-label"
|
||||
>
|
||||
<span class="faint">{{ $t('status.replies_list') }}</span>
|
||||
<StatusPopover
|
||||
v-for="reply in replies"
|
||||
:key="reply.id"
|
||||
:status-id="reply.id"
|
||||
<span
|
||||
class="mentions"
|
||||
:aria-label="$t('tool_tip.mentions')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled -link reply-link"
|
||||
@click.prevent="gotoOriginal(reply.id)"
|
||||
<span
|
||||
class="mentions-text"
|
||||
>
|
||||
{{ reply.name }}
|
||||
</button>
|
||||
</StatusPopover>
|
||||
</div>
|
||||
{{ $t('status.mentions') }}
|
||||
</span>
|
||||
</span>
|
||||
<MentionsLine
|
||||
v-if="hasMentionsLine"
|
||||
:mentions="mentionsLine.slice(0, 1)"
|
||||
class="mentions-line-first"
|
||||
/>
|
||||
</span>
|
||||
<MentionsLine
|
||||
v-if="hasMentionsLine"
|
||||
:mentions="mentionsLine.slice(1)"
|
||||
class="mentions-line"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StatusContent
|
||||
ref="content"
|
||||
:status="status"
|
||||
:no-heading="noHeading"
|
||||
:highlight="highlight"
|
||||
:focused="isFocused"
|
||||
@mediaplay="addMediaPlaying($event)"
|
||||
@mediapause="removeMediaPlaying($event)"
|
||||
@parseReady="setHeadTailLinks"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="inConversation && !isPreview && replies && replies.length"
|
||||
class="replies"
|
||||
>
|
||||
<span class="faint">{{ $t('status.replies_list') }}</span>
|
||||
<StatusPopover
|
||||
v-for="reply in replies"
|
||||
:key="reply.id"
|
||||
:status-id="reply.id"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled -link reply-link"
|
||||
@click.prevent="gotoOriginal(reply.id)"
|
||||
>
|
||||
{{ reply.name }}
|
||||
</button>
|
||||
</StatusPopover>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
|
||||
|
|
@ -402,7 +437,6 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</template>
|
||||
|
||||
<script src="./status.js" ></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue