Merge branch 'better-still-emoji' into 'develop'
Status HTML parsing - better emoji and mentions rendering Closes #935 See merge request pleroma/pleroma-fe!1392
This commit is contained in:
HJ
commit
8af1f08539
59 changed files with 2641 additions and 879 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import UserCard from '../user_card/user_card.vue'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
|
||||
const BasicUserCard = {
|
||||
|
|
@ -13,7 +14,8 @@ const BasicUserCard = {
|
|||
},
|
||||
components: {
|
||||
UserCard,
|
||||
UserAvatar
|
||||
UserAvatar,
|
||||
RichContent
|
||||
},
|
||||
methods: {
|
||||
toggleUserExpanded () {
|
||||
|
|
|
|||
|
|
@ -25,17 +25,11 @@
|
|||
:title="user.name"
|
||||
class="basic-user-card-user-name"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<span
|
||||
v-if="user.name_html"
|
||||
<RichContent
|
||||
class="basic-user-card-user-name-value"
|
||||
v-html="user.name_html"
|
||||
:html="user.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<span
|
||||
v-else
|
||||
class="basic-user-card-user-name-value"
|
||||
>{{ user.name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<router-link
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { mapState } from 'vuex'
|
||||
import StatusContent from '../status_content/status_content.vue'
|
||||
import StatusBody from '../status_content/status_content.vue'
|
||||
import fileType from 'src/services/file_type/file_type.service'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import AvatarList from '../avatar_list/avatar_list.vue'
|
||||
|
|
@ -16,7 +16,7 @@ const ChatListItem = {
|
|||
AvatarList,
|
||||
Timeago,
|
||||
ChatTitle,
|
||||
StatusContent
|
||||
StatusBody
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
|
|
@ -38,12 +38,14 @@ const ChatListItem = {
|
|||
},
|
||||
messageForStatusContent () {
|
||||
const message = this.chat.lastMessage
|
||||
const messageEmojis = message ? message.emojis : []
|
||||
const isYou = message && message.account_id === this.currentUser.id
|
||||
const content = message ? (this.attachmentInfo || message.content) : ''
|
||||
const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
|
||||
return {
|
||||
summary: '',
|
||||
statusnet_html: messagePreview,
|
||||
emojis: messageEmojis,
|
||||
raw_html: messagePreview,
|
||||
text: messagePreview,
|
||||
attachments: []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,18 +77,15 @@
|
|||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
|
||||
.StatusContent {
|
||||
img.emoji {
|
||||
width: 1.4em;
|
||||
height: 1.4em;
|
||||
}
|
||||
.chat-preview-body {
|
||||
--emoji-size: 1.4em;
|
||||
}
|
||||
|
||||
.time-wrapper {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.single-line {
|
||||
.chat-preview-body {
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="chat-preview">
|
||||
<StatusContent
|
||||
<StatusBody
|
||||
class="chat-preview-body"
|
||||
:status="messageForStatusContent"
|
||||
:single-line="true"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -57,8 +57,9 @@ const ChatMessage = {
|
|||
messageForStatusContent () {
|
||||
return {
|
||||
summary: '',
|
||||
statusnet_html: this.message.content,
|
||||
text: this.message.content,
|
||||
emojis: this.message.emojis,
|
||||
raw_html: this.message.content || '',
|
||||
text: this.message.content || '',
|
||||
attachments: this.message.attachments
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -89,8 +89,9 @@
|
|||
}
|
||||
|
||||
.without-attachment {
|
||||
.status-content {
|
||||
&::after {
|
||||
.message-content {
|
||||
// TODO figure out how to do it properly
|
||||
.RichContent::after {
|
||||
margin-right: 5.4em;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
|
|
@ -162,6 +163,7 @@
|
|||
.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chat-message-date-separator {
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@
|
|||
</Popover>
|
||||
</div>
|
||||
<StatusContent
|
||||
class="message-content"
|
||||
:status="messageForStatusContent"
|
||||
:full-content="true"
|
||||
>
|
||||
|
|
|
|||
36
src/components/hashtag_link/hashtag_link.js
Normal file
36
src/components/hashtag_link/hashtag_link.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
|
||||
|
||||
const HashtagLink = {
|
||||
name: 'HashtagLink',
|
||||
props: {
|
||||
url: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
content: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
tag: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick () {
|
||||
const tag = this.tag || extractTagFromUrl(this.url)
|
||||
if (tag) {
|
||||
const link = this.generateTagLink(tag)
|
||||
this.$router.push(link)
|
||||
} else {
|
||||
window.open(this.url, '_blank')
|
||||
}
|
||||
},
|
||||
generateTagLink (tag) {
|
||||
return `/tag/${tag}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default HashtagLink
|
||||
6
src/components/hashtag_link/hashtag_link.scss
Normal file
6
src/components/hashtag_link/hashtag_link.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.HashtagLink {
|
||||
position: relative;
|
||||
white-space: normal;
|
||||
display: inline-block;
|
||||
color: var(--link);
|
||||
}
|
||||
19
src/components/hashtag_link/hashtag_link.vue
Normal file
19
src/components/hashtag_link/hashtag_link.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<span
|
||||
class="HashtagLink"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<a
|
||||
:href="url"
|
||||
class="original"
|
||||
target="_blank"
|
||||
@click.prevent="onClick"
|
||||
v-html="content"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script src="./hashtag_link.js"/>
|
||||
|
||||
<style lang="scss" src="./hashtag_link.scss"/>
|
||||
95
src/components/mention_link/mention_link.js
Normal file
95
src/components/mention_link/mention_link.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faAt
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faAt
|
||||
)
|
||||
|
||||
const MentionLink = {
|
||||
name: 'MentionLink',
|
||||
props: {
|
||||
url: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
content: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
userId: {
|
||||
required: false,
|
||||
type: String
|
||||
},
|
||||
userScreenName: {
|
||||
required: false,
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick () {
|
||||
const link = generateProfileLink(
|
||||
this.userId || this.user.id,
|
||||
this.userScreenName || this.user.screen_name
|
||||
)
|
||||
this.$router.push(link)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user () {
|
||||
return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
|
||||
},
|
||||
isYou () {
|
||||
// FIXME why user !== currentUser???
|
||||
return this.user && this.user.id === this.currentUser.id
|
||||
},
|
||||
userName () {
|
||||
return this.user && this.userNameFullUi.split('@')[0]
|
||||
},
|
||||
userNameFull () {
|
||||
return this.user && this.user.screen_name
|
||||
},
|
||||
userNameFullUi () {
|
||||
return this.user && this.user.screen_name_ui
|
||||
},
|
||||
highlight () {
|
||||
return this.user && this.mergedConfig.highlight[this.user.screen_name]
|
||||
},
|
||||
highlightType () {
|
||||
return this.highlight && ('-' + this.highlight.type)
|
||||
},
|
||||
highlightClass () {
|
||||
if (this.highlight) return highlightClass(this.user)
|
||||
},
|
||||
style () {
|
||||
if (this.highlight) {
|
||||
const {
|
||||
backgroundColor,
|
||||
backgroundPosition,
|
||||
backgroundImage,
|
||||
...rest
|
||||
} = highlightStyle(this.highlight)
|
||||
return rest
|
||||
}
|
||||
},
|
||||
classnames () {
|
||||
return [
|
||||
{
|
||||
'-you': this.isYou,
|
||||
'-highlighted': this.highlight
|
||||
},
|
||||
this.highlightType
|
||||
]
|
||||
},
|
||||
...mapGetters(['mergedConfig']),
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default MentionLink
|
||||
91
src/components/mention_link/mention_link.scss
Normal file
91
src/components/mention_link/mention_link.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
.MentionLink {
|
||||
position: relative;
|
||||
white-space: normal;
|
||||
display: inline-block;
|
||||
color: var(--link);
|
||||
|
||||
& .new,
|
||||
& .original {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.full {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 1;
|
||||
margin-top: 0.25em;
|
||||
padding: 0.5em;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.short {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
& .short,
|
||||
& .full {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.new {
|
||||
&.-you {
|
||||
& .shortName,
|
||||
& .full {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.at {
|
||||
color: var(--link);
|
||||
opacity: 0.8;
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
line-height: 1;
|
||||
padding: 0 0.1em;
|
||||
vertical-align: -25%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.-striped {
|
||||
& .userName,
|
||||
& .full {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
135deg,
|
||||
var(--____highlight-tintColor),
|
||||
var(--____highlight-tintColor) 5px,
|
||||
var(--____highlight-tintColor2) 5px,
|
||||
var(--____highlight-tintColor2) 10px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.-solid {
|
||||
& .userName,
|
||||
& .full {
|
||||
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
|
||||
}
|
||||
}
|
||||
|
||||
&.-side {
|
||||
& .userName,
|
||||
& .userNameFull {
|
||||
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .new .full {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
56
src/components/mention_link/mention_link.vue
Normal file
56
src/components/mention_link/mention_link.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<span
|
||||
class="MentionLink"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<a
|
||||
v-if="!user"
|
||||
:href="url"
|
||||
class="original"
|
||||
target="_blank"
|
||||
v-html="content"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<span
|
||||
v-if="user"
|
||||
class="new"
|
||||
:style="style"
|
||||
:class="classnames"
|
||||
>
|
||||
<a
|
||||
class="short button-unstyled"
|
||||
:href="url"
|
||||
@click.prevent="onClick"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<FAIcon
|
||||
size="sm"
|
||||
icon="at"
|
||||
class="at"
|
||||
/><span class="shortName"><span
|
||||
class="userName"
|
||||
v-html="userName"
|
||||
/></span>
|
||||
<span
|
||||
v-if="isYou"
|
||||
class="you"
|
||||
>{{ $t('status.you') }}</span>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</a>
|
||||
<span
|
||||
v-if="userName !== userNameFull"
|
||||
class="full popover-default"
|
||||
:class="[highlightType]"
|
||||
>
|
||||
<span
|
||||
class="userNameFull"
|
||||
v-text="'@' + userNameFull"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script src="./mention_link.js"/>
|
||||
|
||||
<style lang="scss" src="./mention_link.scss"/>
|
||||
37
src/components/mentions_line/mentions_line.js
Normal file
37
src/components/mentions_line/mentions_line.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import MentionLink from 'src/components/mention_link/mention_link.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export const MENTIONS_LIMIT = 5
|
||||
|
||||
const MentionsLine = {
|
||||
name: 'MentionsLine',
|
||||
props: {
|
||||
mentions: {
|
||||
required: true,
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data: () => ({ expanded: false }),
|
||||
components: {
|
||||
MentionLink
|
||||
},
|
||||
computed: {
|
||||
mentionsComputed () {
|
||||
return this.mentions.slice(0, MENTIONS_LIMIT)
|
||||
},
|
||||
extraMentions () {
|
||||
return this.mentions.slice(MENTIONS_LIMIT)
|
||||
},
|
||||
manyMentions () {
|
||||
return this.extraMentions.length > 0
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
},
|
||||
methods: {
|
||||
toggleShowMore () {
|
||||
this.expanded = !this.expanded
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MentionsLine
|
||||
11
src/components/mentions_line/mentions_line.scss
Normal file
11
src/components/mentions_line/mentions_line.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.MentionsLine {
|
||||
.showMoreLess {
|
||||
white-space: normal;
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.fullExtraMentions,
|
||||
.mention-link:not(:last-child) {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
43
src/components/mentions_line/mentions_line.vue
Normal file
43
src/components/mentions_line/mentions_line.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<span class="MentionsLine">
|
||||
<MentionLink
|
||||
v-for="mention in mentionsComputed"
|
||||
:key="mention.index"
|
||||
class="mention-link"
|
||||
:content="mention.content"
|
||||
:url="mention.url"
|
||||
:first-mention="false"
|
||||
/><span
|
||||
v-if="manyMentions"
|
||||
class="extraMentions"
|
||||
>
|
||||
<span
|
||||
v-if="expanded"
|
||||
class="fullExtraMentions"
|
||||
>
|
||||
<MentionLink
|
||||
v-for="mention in extraMentions"
|
||||
:key="mention.index"
|
||||
class="mention-link"
|
||||
:content="mention.content"
|
||||
:url="mention.url"
|
||||
:first-mention="false"
|
||||
/>
|
||||
</span><button
|
||||
v-if="!expanded"
|
||||
class="button-unstyled showMoreLess"
|
||||
@click="toggleShowMore"
|
||||
>
|
||||
{{ $t('status.plus_more', { number: extraMentions.length }) }}
|
||||
</button><button
|
||||
v-if="expanded"
|
||||
class="button-unstyled showMoreLess"
|
||||
@click="toggleShowMore"
|
||||
>
|
||||
{{ $t('general.show_less') }}
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<script src="./mentions_line.js" ></script>
|
||||
<style lang="scss" src="./mentions_line.scss" />
|
||||
|
|
@ -4,6 +4,7 @@ import Status from '../status/status.vue'
|
|||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import UserCard from '../user_card/user_card.vue'
|
||||
import Timeago from '../timeago/timeago.vue'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
|
||||
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
|
|
@ -44,7 +45,8 @@ const Notification = {
|
|||
UserAvatar,
|
||||
UserCard,
|
||||
Timeago,
|
||||
Status
|
||||
Status,
|
||||
RichContent
|
||||
},
|
||||
methods: {
|
||||
toggleUserExpanded () {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
// TODO Copypaste from Status, should unify it somehow
|
||||
.Notification {
|
||||
--emoji-size: 14px;
|
||||
|
||||
&.-muted {
|
||||
padding: 0.25em 0.6em;
|
||||
height: 1.2em;
|
||||
|
|
|
|||
|
|
@ -51,12 +51,14 @@
|
|||
<span class="notification-details">
|
||||
<div class="name-and-action">
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<bdi
|
||||
v-if="!!notification.from_profile.name_html"
|
||||
class="username"
|
||||
:title="'@'+notification.from_profile.screen_name_ui"
|
||||
v-html="notification.from_profile.name_html"
|
||||
/>
|
||||
<bdi v-if="!!notification.from_profile.name_html">
|
||||
<RichContent
|
||||
class="username"
|
||||
:title="'@'+notification.from_profile.screen_name_ui"
|
||||
:html="notification.from_profile.name_html"
|
||||
:emoji="notification.from_profile.emoji"
|
||||
/>
|
||||
</bdi>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<span
|
||||
v-else
|
||||
|
|
|
|||
|
|
@ -148,13 +148,6 @@
|
|||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
object-fit: contain
|
||||
}
|
||||
}
|
||||
|
||||
.timeago {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
import Timeago from '../timeago/timeago.vue'
|
||||
import Timeago from 'components/timeago/timeago.vue'
|
||||
import RichContent from 'components/rich_content/rich_content.jsx'
|
||||
import { forEach, map } from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'Poll',
|
||||
props: ['basePoll'],
|
||||
components: { Timeago },
|
||||
props: ['basePoll', 'emoji'],
|
||||
components: {
|
||||
Timeago,
|
||||
RichContent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
|
|
|
|||
|
|
@ -17,8 +17,11 @@
|
|||
<span class="result-percentage">
|
||||
{{ percentageForOption(option.votes_count) }}%
|
||||
</span>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<span v-html="option.title_html" />
|
||||
<RichContent
|
||||
:html="option.title_html"
|
||||
:handle-links="false"
|
||||
:emoji="emoji"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="result-fill"
|
||||
|
|
@ -42,8 +45,11 @@
|
|||
:value="index"
|
||||
>
|
||||
<label class="option-vote">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="option.title_html" />
|
||||
<RichContent
|
||||
:html="option.title_html"
|
||||
:handle-links="false"
|
||||
:emoji="emoji"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
327
src/components/rich_content/rich_content.jsx
Normal file
327
src/components/rich_content/rich_content.jsx
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
import Vue from 'vue'
|
||||
import { unescape, flattenDeep } from 'lodash'
|
||||
import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
|
||||
import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
|
||||
import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
|
||||
import StillImage from 'src/components/still-image/still-image.vue'
|
||||
import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
|
||||
import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
|
||||
|
||||
import './rich_content.scss'
|
||||
|
||||
/**
|
||||
* RichContent, The Über-powered component for rendering Post HTML.
|
||||
*
|
||||
* This takes post HTML and does multiple things to it:
|
||||
* - Groups all mentions into <MentionsLine>, this affects all mentions regardles
|
||||
* of where they are (beginning/middle/end), even single mentions are converted
|
||||
* to a <MentionsLine> containing single <MentionLink>.
|
||||
* - Replaces emoji shortcodes with <StillImage>'d images.
|
||||
*
|
||||
* There are two problems with this component's architecture:
|
||||
* 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
|
||||
* proven to be a massive overcomplication due to amount of things done here.
|
||||
* 2. We need to output both render and some extra data, which seems to be imp-
|
||||
* possible in vue. Current solution is to emit 'parseReady' event when parsing
|
||||
* is done within render() function.
|
||||
*
|
||||
* Apart from that one small hiccup with emit in render this _should_ be vue3-ready
|
||||
*/
|
||||
export default Vue.component('RichContent', {
|
||||
name: 'RichContent',
|
||||
props: {
|
||||
// Original html content
|
||||
html: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
attentions: {
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
// Emoji object, as in status.emojis, note the "s" at the end...
|
||||
emoji: {
|
||||
required: true,
|
||||
type: Array
|
||||
},
|
||||
// Whether to handle links or not (posts: yes, everything else: no)
|
||||
handleLinks: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// Meme arrows
|
||||
greentext: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
// NEVER EVER TOUCH DATA INSIDE RENDER
|
||||
render (h) {
|
||||
// Pre-process HTML
|
||||
const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
|
||||
let currentMentions = null // Current chain of mentions, we group all mentions together
|
||||
// This is used to recover spacing removed when parsing mentions
|
||||
let lastSpacing = ''
|
||||
|
||||
const lastTags = [] // Tags that appear at the end of post body
|
||||
const writtenMentions = [] // All mentions that appear in post body
|
||||
const invisibleMentions = [] // All mentions that go beyond the limiter (see MentionsLine)
|
||||
// to collapse too many mentions in a row
|
||||
const writtenTags = [] // All tags that appear in post body
|
||||
// unique index for vue "tag" property
|
||||
let mentionIndex = 0
|
||||
let tagsIndex = 0
|
||||
|
||||
const renderImage = (tag) => {
|
||||
return <StillImage
|
||||
{...{ attrs: getAttrs(tag) }}
|
||||
class="img"
|
||||
/>
|
||||
}
|
||||
|
||||
const renderHashtag = (attrs, children, encounteredTextReverse) => {
|
||||
const linkData = getLinkData(attrs, children, tagsIndex++)
|
||||
writtenTags.push(linkData)
|
||||
if (!encounteredTextReverse) {
|
||||
lastTags.push(linkData)
|
||||
}
|
||||
return <HashtagLink {...{ props: linkData }}/>
|
||||
}
|
||||
|
||||
const renderMention = (attrs, children) => {
|
||||
const linkData = getLinkData(attrs, children, mentionIndex++)
|
||||
linkData.notifying = this.attentions.some(a => a.statusnet_profile_url === linkData.url)
|
||||
writtenMentions.push(linkData)
|
||||
if (currentMentions === null) {
|
||||
currentMentions = []
|
||||
}
|
||||
currentMentions.push(linkData)
|
||||
if (currentMentions.length > MENTIONS_LIMIT) {
|
||||
invisibleMentions.push(linkData)
|
||||
}
|
||||
if (currentMentions.length === 1) {
|
||||
return <MentionsLine mentions={ currentMentions } />
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
// Processor to use with html_tree_converter
|
||||
const processItem = (item, index, array, what) => {
|
||||
// Handle text nodes - just add emoji
|
||||
if (typeof item === 'string') {
|
||||
const emptyText = item.trim() === ''
|
||||
if (item.includes('\n')) {
|
||||
currentMentions = null
|
||||
}
|
||||
if (emptyText) {
|
||||
// don't include spaces when processing mentions - we'll include them
|
||||
// in MentionsLine
|
||||
lastSpacing = item
|
||||
return currentMentions !== null ? item.trim() : item
|
||||
}
|
||||
|
||||
currentMentions = null
|
||||
if (item.includes(':')) {
|
||||
item = ['', processTextForEmoji(
|
||||
item,
|
||||
this.emoji,
|
||||
({ shortcode, url }) => {
|
||||
return <StillImage
|
||||
class="emoji img"
|
||||
src={url}
|
||||
title={`:${shortcode}:`}
|
||||
alt={`:${shortcode}:`}
|
||||
/>
|
||||
}
|
||||
)]
|
||||
}
|
||||
return item
|
||||
}
|
||||
|
||||
// Handle tag nodes
|
||||
if (Array.isArray(item)) {
|
||||
const [opener, children, closer] = item
|
||||
const Tag = getTagName(opener)
|
||||
const attrs = getAttrs(opener)
|
||||
const previouslyMentions = currentMentions !== null
|
||||
/* During grouping of mentions we trim all the empty text elements
|
||||
* This padding is added to recover last space removed in case
|
||||
* we have a tag right next to mentions
|
||||
*/
|
||||
const mentionsLinePadding =
|
||||
// Padding is only needed if we just finished parsing mentions
|
||||
previouslyMentions &&
|
||||
// Don't add padding if content is string and has padding already
|
||||
!(children && typeof children[0] === 'string' && children[0].match(/^\s/))
|
||||
? lastSpacing
|
||||
: ''
|
||||
switch (Tag) {
|
||||
case 'br':
|
||||
currentMentions = null
|
||||
break
|
||||
case 'img': // replace images with StillImage
|
||||
return ['', [mentionsLinePadding, renderImage(opener)], '']
|
||||
case 'a': // replace mentions with MentionLink
|
||||
if (!this.handleLinks) break
|
||||
if (attrs['class'] && attrs['class'].includes('mention')) {
|
||||
// Handling mentions here
|
||||
return renderMention(attrs, children)
|
||||
} else {
|
||||
currentMentions = null
|
||||
break
|
||||
}
|
||||
case 'span':
|
||||
if (this.handleLinks && attrs['class'] && attrs['class'].includes('h-card')) {
|
||||
return ['', children.map(processItem), '']
|
||||
}
|
||||
}
|
||||
|
||||
if (children !== undefined) {
|
||||
return [
|
||||
'',
|
||||
[
|
||||
mentionsLinePadding,
|
||||
[opener, children.map(processItem), closer]
|
||||
],
|
||||
''
|
||||
]
|
||||
} else {
|
||||
return ['', [mentionsLinePadding, item], '']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Processor for back direction (for finding "last" stuff, just easier this way)
|
||||
let encounteredTextReverse = false
|
||||
const processItemReverse = (item, index, array, what) => {
|
||||
// Handle text nodes - just add emoji
|
||||
if (typeof item === 'string') {
|
||||
const emptyText = item.trim() === ''
|
||||
if (emptyText) return item
|
||||
if (!encounteredTextReverse) encounteredTextReverse = true
|
||||
return unescape(item)
|
||||
} else if (Array.isArray(item)) {
|
||||
// Handle tag nodes
|
||||
const [opener, children] = item
|
||||
const Tag = opener === '' ? '' : getTagName(opener)
|
||||
switch (Tag) {
|
||||
case 'a': // replace mentions with MentionLink
|
||||
if (!this.handleLinks) break
|
||||
const attrs = getAttrs(opener)
|
||||
// should only be this
|
||||
if (
|
||||
(attrs['class'] && attrs['class'].includes('hashtag')) || // Pleroma style
|
||||
(attrs['rel'] === 'tag') // Mastodon style
|
||||
) {
|
||||
return renderHashtag(attrs, children, encounteredTextReverse)
|
||||
} else {
|
||||
attrs.target = '_blank'
|
||||
const newChildren = [...children].reverse().map(processItemReverse).reverse()
|
||||
|
||||
return <a {...{ attrs }}>
|
||||
{ newChildren }
|
||||
</a>
|
||||
}
|
||||
case '':
|
||||
return [...children].reverse().map(processItemReverse).reverse()
|
||||
}
|
||||
|
||||
// Render tag as is
|
||||
if (children !== undefined) {
|
||||
const newChildren = Array.isArray(children)
|
||||
? [...children].reverse().map(processItemReverse).reverse()
|
||||
: children
|
||||
return <Tag {...{ attrs: getAttrs(opener) }}>
|
||||
{ newChildren }
|
||||
</Tag>
|
||||
} else {
|
||||
return <Tag/>
|
||||
}
|
||||
}
|
||||
return item
|
||||
}
|
||||
|
||||
const pass1 = convertHtmlToTree(html).map(processItem)
|
||||
const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
|
||||
// DO NOT USE SLOTS they cause a re-render feedback loop here.
|
||||
// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
|
||||
// at least until vue3?
|
||||
const result = <span class="RichContent">
|
||||
{ pass2 }
|
||||
</span>
|
||||
|
||||
const event = {
|
||||
lastTags,
|
||||
writtenMentions,
|
||||
writtenTags,
|
||||
invisibleMentions
|
||||
}
|
||||
|
||||
// DO NOT MOVE TO UPDATE. BAD IDEA.
|
||||
this.$emit('parseReady', event)
|
||||
|
||||
return result
|
||||
}
|
||||
})
|
||||
|
||||
const getLinkData = (attrs, children, index) => {
|
||||
const stripTags = (item) => {
|
||||
if (typeof item === 'string') {
|
||||
return item
|
||||
} else {
|
||||
return item[1].map(stripTags).join('')
|
||||
}
|
||||
}
|
||||
const textContent = children.map(stripTags).join('')
|
||||
return {
|
||||
index,
|
||||
url: attrs.href,
|
||||
tag: attrs['data-tag'],
|
||||
content: flattenDeep(children).join(''),
|
||||
textContent
|
||||
}
|
||||
}
|
||||
|
||||
/** Pre-processing HTML
|
||||
*
|
||||
* Currently this does one thing:
|
||||
* - add green/cyantexting
|
||||
*
|
||||
* @param {String} html - raw HTML to process
|
||||
* @param {Boolean} greentext - whether to enable greentexting or not
|
||||
*/
|
||||
export const preProcessPerLine = (html, greentext) => {
|
||||
const greentextHandle = new Set(['p', 'div'])
|
||||
|
||||
const lines = convertHtmlToLines(html)
|
||||
const newHtml = lines.reverse().map((item, index, array) => {
|
||||
if (!item.text) return item
|
||||
const string = item.text
|
||||
|
||||
// Greentext stuff
|
||||
if (
|
||||
// Only if greentext is engaged
|
||||
greentext &&
|
||||
// Only handle p's and divs. Don't want to affect blockquotes, code etc
|
||||
item.level.every(l => greentextHandle.has(l)) &&
|
||||
// Only if line begins with '>' or '<'
|
||||
(string.includes('>') || string.includes('<'))
|
||||
) {
|
||||
const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
|
||||
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
|
||||
.trim()
|
||||
if (cleanedString.startsWith('>')) {
|
||||
return `<span class='greentext'>${string}</span>`
|
||||
} else if (cleanedString.startsWith('<')) {
|
||||
return `<span class='cyantext'>${string}</span>`
|
||||
}
|
||||
}
|
||||
|
||||
return string
|
||||
}).reverse().join('')
|
||||
|
||||
return { newHtml }
|
||||
}
|
||||
64
src/components/rich_content/rich_content.scss
Normal file
64
src/components/rich_content/rich_content.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.RichContent {
|
||||
blockquote {
|
||||
margin: 0.2em 0 0.2em 2em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
samp,
|
||||
kbd,
|
||||
var,
|
||||
pre {
|
||||
font-family: var(--postCodeFont, monospace);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
margin: 1.4em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 1.1em 0;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
display: inline-block;
|
||||
width: var(--emoji-size, 32px);
|
||||
height: var(--emoji-size, 32px);
|
||||
}
|
||||
|
||||
.img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
vertical-align: middle;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
|
@ -475,7 +475,7 @@ export default {
|
|||
this.loadThemeFromLocalStorage(false, true)
|
||||
break
|
||||
case 'file':
|
||||
console.err('Forcing snapshout from file is not supported yet')
|
||||
console.error('Forcing snapshot from file is not supported yet')
|
||||
break
|
||||
}
|
||||
this.dismissWarning()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -303,6 +332,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>
|
||||
|
|
|
|||
127
src/components/status_body/status_body.js
Normal file
127
src/components/status_body/status_body.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import fileType from 'src/services/file_type/file_type.service'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faFile,
|
||||
faMusic,
|
||||
faImage,
|
||||
faLink,
|
||||
faPollH
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faFile,
|
||||
faMusic,
|
||||
faImage,
|
||||
faLink,
|
||||
faPollH
|
||||
)
|
||||
|
||||
const StatusContent = {
|
||||
name: 'StatusContent',
|
||||
props: [
|
||||
'status',
|
||||
'focused',
|
||||
'noHeading',
|
||||
'fullContent',
|
||||
'singleLine'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
showingTall: this.fullContent || (this.inConversation && this.focused),
|
||||
showingLongSubject: false,
|
||||
// not as computed because it sets the initial state which will be changed later
|
||||
expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
|
||||
postLength: this.status.text.length,
|
||||
parseReadyDone: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
localCollapseSubjectDefault () {
|
||||
return this.mergedConfig.collapseMessageWithSubject
|
||||
},
|
||||
// This is a bit hacky, but we want to approximate post height before rendering
|
||||
// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
|
||||
// as well as approximate line count by counting characters and approximating ~80
|
||||
// per line.
|
||||
//
|
||||
// Using max-height + overflow: auto for status components resulted in false positives
|
||||
// very often with japanese characters, and it was very annoying.
|
||||
tallStatus () {
|
||||
const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
|
||||
return lengthScore > 20
|
||||
},
|
||||
longSubject () {
|
||||
return this.status.summary.length > 240
|
||||
},
|
||||
// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
|
||||
mightHideBecauseSubject () {
|
||||
return !!this.status.summary && this.localCollapseSubjectDefault
|
||||
},
|
||||
mightHideBecauseTall () {
|
||||
return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault)
|
||||
},
|
||||
hideSubjectStatus () {
|
||||
return this.mightHideBecauseSubject && !this.expandingSubject
|
||||
},
|
||||
hideTallStatus () {
|
||||
return this.mightHideBecauseTall && !this.showingTall
|
||||
},
|
||||
showingMore () {
|
||||
return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
|
||||
},
|
||||
attachmentTypes () {
|
||||
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
},
|
||||
components: {
|
||||
RichContent
|
||||
},
|
||||
mounted () {
|
||||
this.status.attentions && this.status.attentions.forEach(attn => {
|
||||
const { id } = attn
|
||||
this.$store.dispatch('fetchUserIfMissing', id)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onParseReady (event) {
|
||||
if (this.parseReadyDone) return
|
||||
this.parseReadyDone = true
|
||||
this.$emit('parseReady', event)
|
||||
const { writtenMentions, invisibleMentions } = event
|
||||
writtenMentions
|
||||
.filter(mention => !mention.notifying)
|
||||
.forEach(mention => {
|
||||
const { content, url } = mention
|
||||
const cleanedString = content.replace(/<[^>]+?>/gi, '') // remove all tags
|
||||
if (!cleanedString.startsWith('@')) return
|
||||
const handle = cleanedString.slice(1)
|
||||
const host = url.replace(/^https?:\/\//, '').replace(/\/.+?$/, '')
|
||||
this.$store.dispatch('fetchUserIfMissing', `${handle}@${host}`)
|
||||
})
|
||||
/* This is a bit of a hack to make current tall status detector work
|
||||
* with rich mentions. Invisible mentions are detected at RichContent level
|
||||
* and also we generate plaintext version of mentions by stripping tags
|
||||
* so here we subtract from post length by each mention that became invisible
|
||||
* via MentionsLine
|
||||
*/
|
||||
this.postLength = invisibleMentions.reduce((acc, mention) => {
|
||||
return acc - mention.textContent.length - 1
|
||||
}, this.postLength)
|
||||
},
|
||||
toggleShowMore () {
|
||||
if (this.mightHideBecauseTall) {
|
||||
this.showingTall = !this.showingTall
|
||||
} else if (this.mightHideBecauseSubject) {
|
||||
this.expandingSubject = !this.expandingSubject
|
||||
}
|
||||
},
|
||||
generateTagLink (tag) {
|
||||
return `/tag/${tag}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default StatusContent
|
||||
118
src/components/status_body/status_body.scss
Normal file
118
src/components/status_body/status_body.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.StatusBody {
|
||||
|
||||
.emoji {
|
||||
--_still_image-label-scale: 0.5;
|
||||
}
|
||||
|
||||
& .text,
|
||||
& .summary {
|
||||
font-family: var(--postFont, sans-serif);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.text {
|
||||
&.-single-line {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
height: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-wrapper {
|
||||
margin-bottom: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--border, $fallback--border);
|
||||
flex-grow: 0;
|
||||
|
||||
&.-tall {
|
||||
position: relative;
|
||||
|
||||
.summary {
|
||||
max-height: 2em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&.-tall-status {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
z-index: 1;
|
||||
|
||||
.media-body {
|
||||
min-height: 0;
|
||||
mask:
|
||||
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
|
||||
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .tall-status-hider,
|
||||
& .tall-subject-hider,
|
||||
& .status-unhider,
|
||||
& .cw-status-hider {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tall-status-hider {
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
margin-top: 150px;
|
||||
line-height: 110px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tall-subject-hider {
|
||||
// position: absolute;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
& .status-unhider,
|
||||
& .cw-status-hider {
|
||||
word-break: break-all;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.greentext {
|
||||
color: $fallback--cGreen;
|
||||
color: var(--postGreentext, $fallback--cGreen);
|
||||
}
|
||||
|
||||
.cyantext {
|
||||
color: var(--postCyantext, $fallback--cBlue);
|
||||
}
|
||||
}
|
||||
97
src/components/status_body/status_body.vue
Normal file
97
src/components/status_body/status_body.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="StatusBody">
|
||||
<div class="body">
|
||||
<div
|
||||
v-if="status.summary_raw_html"
|
||||
class="summary-wrapper"
|
||||
:class="{ '-tall': (longSubject && !showingLongSubject) }"
|
||||
>
|
||||
<RichContent
|
||||
class="media-body summary"
|
||||
:html="status.summary_raw_html"
|
||||
:emoji="status.emojis"
|
||||
/>
|
||||
<button
|
||||
v-if="longSubject && showingLongSubject"
|
||||
class="button-unstyled -link tall-subject-hider"
|
||||
@click.prevent="showingLongSubject=false"
|
||||
>
|
||||
{{ $t("status.hide_full_subject") }}
|
||||
</button>
|
||||
<button
|
||||
v-else-if="longSubject"
|
||||
class="button-unstyled -link tall-subject-hider"
|
||||
@click.prevent="showingLongSubject=true"
|
||||
>
|
||||
{{ $t("status.show_full_subject") }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
:class="{'-tall-status': hideTallStatus}"
|
||||
class="text-wrapper"
|
||||
>
|
||||
<button
|
||||
v-if="hideTallStatus"
|
||||
class="button-unstyled -link tall-status-hider"
|
||||
:class="{ '-focused': focused }"
|
||||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ $t("general.show_more") }}
|
||||
</button>
|
||||
<RichContent
|
||||
v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
|
||||
:class="{ '-single-line': singleLine }"
|
||||
class="text media-body"
|
||||
:html="status.raw_html"
|
||||
:emoji="status.emojis"
|
||||
:handle-links="true"
|
||||
:greentext="mergedConfig.greentext"
|
||||
:attentions="status.attentions"
|
||||
@parseReady="onParseReady"
|
||||
/>
|
||||
|
||||
<button
|
||||
v-if="hideSubjectStatus"
|
||||
class="button-unstyled -link cw-status-hider"
|
||||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ $t("status.show_content") }}
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('image')"
|
||||
icon="image"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('video')"
|
||||
icon="video"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('audio')"
|
||||
icon="music"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('unknown')"
|
||||
icon="file"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="status.poll && status.poll.options"
|
||||
icon="poll-h"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="status.card"
|
||||
icon="link"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="showingMore && !fullContent"
|
||||
class="button-unstyled -link status-unhider"
|
||||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<slot v-if="!hideSubjectStatus" />
|
||||
</div>
|
||||
</template>
|
||||
<script src="./status_body.js" ></script>
|
||||
<style lang="scss" src="./status_body.scss" />
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
import Attachment from '../attachment/attachment.vue'
|
||||
import Poll from '../poll/poll.vue'
|
||||
import Gallery from '../gallery/gallery.vue'
|
||||
import StatusBody from 'src/components/status_body/status_body.vue'
|
||||
import LinkPreview from '../link-preview/link-preview.vue'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
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 { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
|
@ -35,52 +33,11 @@ const StatusContent = {
|
|||
'fullContent',
|
||||
'singleLine'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
showingTall: this.fullContent || (this.inConversation && this.focused),
|
||||
showingLongSubject: false,
|
||||
// not as computed because it sets the initial state which will be changed later
|
||||
expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
localCollapseSubjectDefault () {
|
||||
return this.mergedConfig.collapseMessageWithSubject
|
||||
},
|
||||
hideAttachments () {
|
||||
return (this.mergedConfig.hideAttachments && !this.inConversation) ||
|
||||
(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
|
||||
},
|
||||
// This is a bit hacky, but we want to approximate post height before rendering
|
||||
// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
|
||||
// as well as approximate line count by counting characters and approximating ~80
|
||||
// per line.
|
||||
//
|
||||
// Using max-height + overflow: auto for status components resulted in false positives
|
||||
// very often with japanese characters, and it was very annoying.
|
||||
tallStatus () {
|
||||
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
|
||||
return lengthScore > 20
|
||||
},
|
||||
longSubject () {
|
||||
return this.status.summary.length > 240
|
||||
},
|
||||
// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
|
||||
mightHideBecauseSubject () {
|
||||
return !!this.status.summary && this.localCollapseSubjectDefault
|
||||
},
|
||||
mightHideBecauseTall () {
|
||||
return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault)
|
||||
},
|
||||
hideSubjectStatus () {
|
||||
return this.mightHideBecauseSubject && !this.expandingSubject
|
||||
},
|
||||
hideTallStatus () {
|
||||
return this.mightHideBecauseTall && !this.showingTall
|
||||
},
|
||||
showingMore () {
|
||||
return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
|
||||
},
|
||||
nsfwClickthrough () {
|
||||
if (!this.status.nsfw) {
|
||||
return false
|
||||
|
|
@ -118,45 +75,11 @@ const StatusContent = {
|
|||
file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
|
||||
)
|
||||
},
|
||||
attachmentTypes () {
|
||||
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
|
||||
},
|
||||
maxThumbnails () {
|
||||
return this.mergedConfig.maxThumbnails
|
||||
},
|
||||
postBodyHtml () {
|
||||
const html = this.status.statusnet_html
|
||||
|
||||
if (this.mergedConfig.greentext) {
|
||||
try {
|
||||
if (html.includes('>')) {
|
||||
// This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
|
||||
return processHtml(html, (string) => {
|
||||
if (string.includes('>') &&
|
||||
string
|
||||
.replace(/<[^>]+?>/gi, '') // remove all tags
|
||||
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
|
||||
.trim()
|
||||
.startsWith('>')) {
|
||||
return `<span class='greentext'>${string}</span>`
|
||||
} else {
|
||||
return string
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return html
|
||||
}
|
||||
} catch (e) {
|
||||
console.err('Failed to process status html', e)
|
||||
return html
|
||||
}
|
||||
} else {
|
||||
return html
|
||||
}
|
||||
},
|
||||
...mapGetters(['mergedConfig']),
|
||||
...mapState({
|
||||
betterShadow: state => state.interface.browserSupport.cssFilter,
|
||||
currentUser: state => state.users.currentUser
|
||||
})
|
||||
},
|
||||
|
|
@ -164,48 +87,10 @@ const StatusContent = {
|
|||
Attachment,
|
||||
Poll,
|
||||
Gallery,
|
||||
LinkPreview
|
||||
LinkPreview,
|
||||
StatusBody
|
||||
},
|
||||
methods: {
|
||||
linkClicked (event) {
|
||||
const target = event.target.closest('.status-content a')
|
||||
if (target) {
|
||||
if (target.className.match(/mention/)) {
|
||||
const href = target.href
|
||||
const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
|
||||
if (attn) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
const link = this.generateUserProfileLink(attn.id, attn.screen_name)
|
||||
this.$router.push(link)
|
||||
return
|
||||
}
|
||||
}
|
||||
if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
|
||||
// Extract tag name from dataset or link url
|
||||
const tag = target.dataset.tag || extractTagFromUrl(target.href)
|
||||
if (tag) {
|
||||
const link = this.generateTagLink(tag)
|
||||
this.$router.push(link)
|
||||
return
|
||||
}
|
||||
}
|
||||
window.open(target.href, '_blank')
|
||||
}
|
||||
},
|
||||
toggleShowMore () {
|
||||
if (this.mightHideBecauseTall) {
|
||||
this.showingTall = !this.showingTall
|
||||
} else if (this.mightHideBecauseSubject) {
|
||||
this.expandingSubject = !this.expandingSubject
|
||||
}
|
||||
},
|
||||
generateUserProfileLink (id, name) {
|
||||
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
|
||||
},
|
||||
generateTagLink (tag) {
|
||||
return `/tag/${tag}`
|
||||
},
|
||||
setMedia () {
|
||||
const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
|
||||
return () => this.$store.dispatch('setMedia', attachments)
|
||||
|
|
|
|||
|
|
@ -1,133 +1,55 @@
|
|||
<template>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div class="StatusContent">
|
||||
<slot name="header" />
|
||||
<div
|
||||
v-if="status.summary_html"
|
||||
class="summary-wrapper"
|
||||
:class="{ 'tall-subject': (longSubject && !showingLongSubject) }"
|
||||
<StatusBody
|
||||
:status="status"
|
||||
:single-line="singleLine"
|
||||
@parseReady="$emit('parseReady', $event)"
|
||||
>
|
||||
<div v-if="status.poll && status.poll.options">
|
||||
<Poll
|
||||
:base-poll="status.poll"
|
||||
:emoji="status.emojis"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="media-body summary"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="status.summary_html"
|
||||
/>
|
||||
<button
|
||||
v-if="longSubject && showingLongSubject"
|
||||
class="button-unstyled -link tall-subject-hider"
|
||||
@click.prevent="showingLongSubject=false"
|
||||
v-if="status.attachments.length !== 0"
|
||||
class="attachments media-body"
|
||||
>
|
||||
{{ $t("status.hide_full_subject") }}
|
||||
</button>
|
||||
<button
|
||||
v-else-if="longSubject"
|
||||
class="button-unstyled -link tall-subject-hider"
|
||||
:class="{ 'tall-subject-hider_focused': focused }"
|
||||
@click.prevent="showingLongSubject=true"
|
||||
>
|
||||
{{ $t("status.show_full_subject") }}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
:class="{'tall-status': hideTallStatus}"
|
||||
class="status-content-wrapper"
|
||||
>
|
||||
<button
|
||||
v-if="hideTallStatus"
|
||||
class="button-unstyled -link tall-status-hider"
|
||||
:class="{ 'tall-status-hider_focused': focused }"
|
||||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ $t("general.show_more") }}
|
||||
</button>
|
||||
<attachment
|
||||
v-for="attachment in nonGalleryAttachments"
|
||||
:key="attachment.id"
|
||||
class="non-gallery"
|
||||
:size="attachmentSize"
|
||||
:nsfw="nsfwClickthrough"
|
||||
:attachment="attachment"
|
||||
:allow-play="true"
|
||||
:set-media="setMedia()"
|
||||
@play="$emit('mediaplay', attachment.id)"
|
||||
@pause="$emit('mediapause', attachment.id)"
|
||||
/>
|
||||
<gallery
|
||||
v-if="galleryAttachments.length > 0"
|
||||
:nsfw="nsfwClickthrough"
|
||||
:attachments="galleryAttachments"
|
||||
:set-media="setMedia()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!hideSubjectStatus"
|
||||
:class="{ 'single-line': singleLine }"
|
||||
class="status-content media-body"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="postBodyHtml"
|
||||
/>
|
||||
<button
|
||||
v-if="hideSubjectStatus"
|
||||
class="button-unstyled -link cw-status-hider"
|
||||
@click.prevent="toggleShowMore"
|
||||
v-if="status.card && !noHeading"
|
||||
class="link-preview media-body"
|
||||
>
|
||||
{{ $t("status.show_content") }}
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('image')"
|
||||
icon="image"
|
||||
<link-preview
|
||||
:card="status.card"
|
||||
:size="attachmentSize"
|
||||
:nsfw="nsfwClickthrough"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('video')"
|
||||
icon="video"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('audio')"
|
||||
icon="music"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="attachmentTypes.includes('unknown')"
|
||||
icon="file"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="status.poll && status.poll.options"
|
||||
icon="poll-h"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="status.card"
|
||||
icon="link"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="showingMore && !fullContent"
|
||||
class="button-unstyled -link status-unhider"
|
||||
@click.prevent="toggleShowMore"
|
||||
>
|
||||
{{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="status.poll && status.poll.options && !hideSubjectStatus">
|
||||
<poll :base-poll="status.poll" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="status.attachments.length !== 0 && (!hideSubjectStatus || showingLongSubject)"
|
||||
class="attachments media-body"
|
||||
>
|
||||
<attachment
|
||||
v-for="attachment in nonGalleryAttachments"
|
||||
:key="attachment.id"
|
||||
class="non-gallery"
|
||||
:size="attachmentSize"
|
||||
:nsfw="nsfwClickthrough"
|
||||
:attachment="attachment"
|
||||
:allow-play="true"
|
||||
:set-media="setMedia()"
|
||||
@play="$emit('mediaplay', attachment.id)"
|
||||
@pause="$emit('mediapause', attachment.id)"
|
||||
/>
|
||||
<gallery
|
||||
v-if="galleryAttachments.length > 0"
|
||||
:nsfw="nsfwClickthrough"
|
||||
:attachments="galleryAttachments"
|
||||
:set-media="setMedia()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="status.card && !hideSubjectStatus && !noHeading"
|
||||
class="link-preview media-body"
|
||||
>
|
||||
<link-preview
|
||||
:card="status.card"
|
||||
:size="attachmentSize"
|
||||
:nsfw="nsfwClickthrough"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StatusBody>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</template>
|
||||
|
||||
<script src="./status_content.js" ></script>
|
||||
|
|
@ -139,156 +61,5 @@ $status-margin: 0.75em;
|
|||
.StatusContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.status-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.tall-status {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
z-index: 1;
|
||||
.status-content {
|
||||
min-height: 0;
|
||||
mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
}
|
||||
|
||||
.tall-status-hider {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
margin-top: 150px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 110px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.status-unhider, .cw-status-hider {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
vertical-align: middle;
|
||||
object-fit: contain;
|
||||
|
||||
&.emoji {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-wrapper {
|
||||
margin-bottom: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--border, $fallback--border);
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-style: italic;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.tall-subject {
|
||||
position: relative;
|
||||
.summary {
|
||||
max-height: 2em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.tall-subject-hider {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
// position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
font-family: var(--postFont, sans-serif);
|
||||
line-height: 1.4em;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
blockquote {
|
||||
margin: 0.2em 0 0.2em 2em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code, samp, kbd, var, pre {
|
||||
font-family: var(--postCodeFont, monospace);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
margin: 1.4em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
margin: 1.0em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 1.1em 0;
|
||||
}
|
||||
|
||||
&.single-line {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
height: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.greentext {
|
||||
color: $fallback--cGreen;
|
||||
color: var(--postGreentext, $fallback--cGreen);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
position: relative;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
canvas {
|
||||
|
|
@ -47,12 +47,13 @@
|
|||
|
||||
img {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.animated {
|
||||
&::before {
|
||||
zoom: var(--_still_image-label-scale, 1);
|
||||
content: 'gif';
|
||||
position: absolute;
|
||||
line-height: 10px;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import FollowButton from '../follow_button/follow_button.vue'
|
|||
import ModerationTools from '../moderation_tools/moderation_tools.vue'
|
||||
import AccountActions from '../account_actions/account_actions.vue'
|
||||
import Select from '../select/select.vue'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
|
|
@ -120,7 +121,8 @@ export default {
|
|||
AccountActions,
|
||||
ProgressButton,
|
||||
FollowButton,
|
||||
Select
|
||||
Select,
|
||||
RichContent
|
||||
},
|
||||
methods: {
|
||||
muteUser () {
|
||||
|
|
|
|||
|
|
@ -38,21 +38,12 @@
|
|||
</router-link>
|
||||
<div class="user-summary">
|
||||
<div class="top-line">
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="user.name_html"
|
||||
<RichContent
|
||||
:title="user.name"
|
||||
class="user-name"
|
||||
v-html="user.name_html"
|
||||
:html="user.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<div
|
||||
v-else
|
||||
:title="user.name"
|
||||
class="user-name"
|
||||
>
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<button
|
||||
v-if="!isOtherUser && user.is_local"
|
||||
class="button-unstyled edit-profile-button"
|
||||
|
|
@ -267,20 +258,12 @@
|
|||
<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<p
|
||||
v-if="!hideBio && user.description_html"
|
||||
<RichContent
|
||||
v-if="!hideBio"
|
||||
class="user-card-bio"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="user.description_html"
|
||||
:html="user.description_html"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<p
|
||||
v-else-if="!hideBio"
|
||||
class="user-card-bio"
|
||||
>
|
||||
{{ user.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -293,9 +276,10 @@
|
|||
.user-card {
|
||||
position: relative;
|
||||
|
||||
&:hover .Avatar {
|
||||
&:hover {
|
||||
--_still-image-img-visibility: visible;
|
||||
--_still-image-canvas-visibility: hidden;
|
||||
--_still-image-label-visibility: hidden;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
|
|
@ -339,12 +323,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-bio {
|
||||
text-align: center;
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $fallback--link;
|
||||
|
|
@ -356,11 +340,6 @@
|
|||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
|
||||
&.emoji {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -462,13 +441,6 @@
|
|||
// big one
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
vertical-align: middle;
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.top-line {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -481,12 +453,7 @@
|
|||
margin-right: 1em;
|
||||
font-size: 15px;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
--emoji-size: 14px;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import FollowCard from '../follow_card/follow_card.vue'
|
|||
import Timeline from '../timeline/timeline.vue'
|
||||
import Conversation from '../conversation/conversation.vue'
|
||||
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import List from '../list/list.vue'
|
||||
import withLoadMore from '../../hocs/with_load_more/with_load_more'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
|
|
@ -164,7 +165,8 @@ const UserProfile = {
|
|||
FriendList,
|
||||
FollowCard,
|
||||
TabSwitcher,
|
||||
Conversation
|
||||
Conversation,
|
||||
RichContent
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,20 +20,24 @@
|
|||
:key="index"
|
||||
class="user-profile-field"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<dt
|
||||
:title="user.fields_text[index].name"
|
||||
class="user-profile-field-name"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="field.name"
|
||||
/>
|
||||
>
|
||||
<RichContent
|
||||
:html="field.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dt>
|
||||
<dd
|
||||
:title="user.fields_text[index].value"
|
||||
class="user-profile-field-value"
|
||||
@click.prevent="linkClicked"
|
||||
v-html="field.value"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
>
|
||||
<RichContent
|
||||
:html="field.value"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<tab-switcher
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue