aboutsummaryrefslogtreecommitdiff
path: root/src/components/status
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/status')
-rw-r--r--src/components/status/status.js200
-rw-r--r--src/components/status/status.scss85
-rw-r--r--src/components/status/status.vue165
3 files changed, 331 insertions, 119 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 906413ae..4c0ef3e0 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -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'
@@ -32,7 +35,10 @@ import {
faStar,
faEyeSlash,
faEye,
- faThumbtack
+ faThumbtack,
+ faChevronUp,
+ faChevronDown,
+ faAngleDoubleRight
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -49,9 +55,47 @@ library.add(
faEllipsisH,
faEyeSlash,
faEye,
- faThumbtack
+ faThumbtack,
+ faChevronUp,
+ faChevronDown,
+ faAngleDoubleRight
)
+const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+
+const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
+ const camelized = camelCase(name)
+ const toggle = `controlledToggle${camelized}`
+ const controlledName = `controlled${camelized}`
+ const uncontrolledName = `uncontrolled${camelized}`
+ res[name] = function () {
+ return this[toggle] ? this[controlledName] : this[uncontrolledName]
+ }
+ return res
+}, {})
+
+const controlledOrUncontrolledToggle = (obj, name) => {
+ const camelized = camelCase(name)
+ const toggle = `controlledToggle${camelized}`
+ const uncontrolledName = `uncontrolled${camelized}`
+ if (obj[toggle]) {
+ obj[toggle]()
+ } else {
+ obj[uncontrolledName] = !obj[uncontrolledName]
+ }
+}
+
+const controlledOrUncontrolledSet = (obj, name, val) => {
+ const camelized = camelCase(name)
+ const set = `controlledSet${camelized}`
+ const uncontrolledName = `uncontrolled${camelized}`
+ if (obj[set]) {
+ obj[set](val)
+ } else {
+ obj[uncontrolledName] = val
+ }
+}
+
const Status = {
name: 'Status',
components: {
@@ -68,7 +112,10 @@ const Status = {
StatusPopover,
UserListPopover,
EmojiReactions,
- StatusContent
+ StatusContent,
+ RichContent,
+ MentionLink,
+ MentionsLine
},
props: [
'statusoid',
@@ -84,19 +131,37 @@ const Status = {
'showPinned',
'inProfile',
'profileUserId',
- 'virtualHidden'
+
+ 'simpleTree',
+ 'controlledThreadDisplayStatus',
+ 'controlledToggleThreadDisplay',
+ 'showOtherRepliesAsButton',
+
+ 'controlledShowingTall',
+ 'controlledToggleShowingTall',
+ 'controlledExpandingSubject',
+ 'controlledToggleExpandingSubject',
+ 'controlledShowingLongSubject',
+ 'controlledToggleShowingLongSubject',
+ 'controlledReplying',
+ 'controlledToggleReplying',
+ 'controlledMediaPlaying',
+ 'controlledSetMediaPlaying',
+ 'dive'
],
data () {
return {
- replying: false,
+ uncontrolledReplying: false,
unmuted: false,
userExpanded: false,
- mediaPlaying: [],
+ uncontrolledMediaPlaying: [],
suspendable: true,
- error: null
+ error: null,
+ headTailLinks: null
}
},
computed: {
+ ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
muteWords () {
return this.mergedConfig.muteWords
},
@@ -133,12 +198,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) {
@@ -157,27 +225,60 @@ const Status = {
muteWordHits () {
return muteWordHits(this.status, this.muteWords)
},
+ botStatus () {
+ return this.status.user.bot
+ },
+ botIndicator () {
+ return this.botStatus && !this.hideBotIndication
+ },
+ 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 reasonsToMute = this.userIsMuted ||
+ // Thread is muted
+ status.thread_muted ||
+ // Wordfiltered
+ this.muteWordHits.length > 0 ||
+ // bot status
+ (this.muteBotStatuses && this.botStatus && !this.compact)
+ return !this.unmuted && !this.shouldNotMute && reasonsToMute
+ },
+ userIsMuted () {
+ if (this.statusoid.user.id === this.currentUser.id) return false
const { status } = this
const { reblog } = status
const relationship = this.$store.getters.relationship(status.user.id)
const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
- const reasonsToMute = (
- // Post is muted according to BE
- status.muted ||
+ return status.muted ||
// Reprööt of a muted post according to BE
(reblog && reblog.muted) ||
// Muted user
relationship.muting ||
// Muted user of a reprööt
- (relationshipReblog && relationshipReblog.muting) ||
- // Thread is muted
- status.thread_muted ||
- // Wordfiltered
- this.muteWordHits.length > 0
- )
- const excusesNotToMute = (
+ (relationshipReblog && relationshipReblog.muting)
+ },
+ shouldNotMute () {
+ const { status } = this
+ const { reblog } = status
+ return (
(
this.inProfile && (
// Don't mute user's posts on user timeline (except reblogs)
@@ -190,14 +291,26 @@ const Status = {
(this.inConversation && status.thread_muted)
// No excuses if post has muted words
) && !this.muteWordHits.length > 0
-
- return !this.unmuted && !excusesNotToMute && reasonsToMute
+ },
+ hideMutedUsers () {
+ return this.mergedConfig.hideMutedPosts
+ },
+ hideMutedThreads () {
+ return this.mergedConfig.hideMutedThreads
},
hideFilteredStatuses () {
return this.mergedConfig.hideFilteredStatuses
},
+ hideWordFilteredPosts () {
+ return this.mergedConfig.hideWordFilteredPosts
+ },
hideStatus () {
- return (this.muted && this.hideFilteredStatuses) || this.virtualHidden
+ return (this.virtualHidden || !this.shouldNotMute) && (
+ (this.muted && this.hideFilteredStatuses) ||
+ (this.userIsMuted && this.hideMutedUsers) ||
+ (this.status.thread_muted && this.hideMutedThreads) ||
+ (this.muteWordHits.length > 0 && this.hideWordFilteredPosts)
+ )
},
isFocused () {
// retweet or root of an expanded conversation
@@ -247,6 +360,12 @@ const Status = {
hidePostStats () {
return this.mergedConfig.hidePostStats
},
+ muteBotStatuses () {
+ return this.mergedConfig.muteBotStatuses
+ },
+ hideBotIndication () {
+ return this.mergedConfig.hideBotIndication
+ },
currentUser () {
return this.$store.state.users.currentUser
},
@@ -258,6 +377,12 @@ const Status = {
},
isSuspendable () {
return !this.replying && this.mediaPlaying.length === 0
+ },
+ inThreadForest () {
+ return !!this.controlledThreadDisplayStatus
+ },
+ threadShowing () {
+ return this.controlledThreadDisplayStatus === 'showing'
}
},
methods: {
@@ -280,7 +405,7 @@ const Status = {
this.error = undefined
},
toggleReplying () {
- this.replying = !this.replying
+ controlledOrUncontrolledToggle(this, 'replying')
},
gotoOriginal (id) {
if (this.inConversation) {
@@ -300,16 +425,21 @@ const Status = {
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
},
addMediaPlaying (id) {
- this.mediaPlaying.push(id)
+ controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))
},
removeMediaPlaying (id) {
- this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
- }
- },
- watch: {
- 'highlight': function (id) {
+ controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))
+ },
+ setHeadTailLinks (headTailLinks) {
+ this.headTailLinks = headTailLinks
+ },
+ toggleThreadDisplay () {
+ this.controlledToggleThreadDisplay()
+ },
+ scrollIfHighlighted (highlightId) {
+ const id = highlightId
if (this.status.id === id) {
- let rect = this.$refs.root.getBoundingClientRect()
+ let rect = this.$el.getBoundingClientRect()
if (rect.top < 100) {
// Post is above screen, match its top to screen top
window.scrollBy(0, rect.top - 100)
@@ -321,6 +451,11 @@ const Status = {
window.scrollBy(0, rect.bottom - window.innerHeight + 50)
}
}
+ }
+ },
+ watch: {
+ 'highlight': function (id) {
+ this.scrollIfHighlighted(id)
},
'status.repeat_num': function (num) {
// refetch repeats when repeat_num is changed in any way
@@ -337,6 +472,11 @@ const Status = {
'isSuspendable': function (val) {
this.suspendable = val
}
+ },
+ filters: {
+ capitalize: function (str) {
+ return str.charAt(0).toUpperCase() + str.slice(1)
+ }
}
}
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 58b55bc8..3f647b25 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,10 +1,10 @@
-
@import '../../_variables.scss';
-$status-margin: 0.75em;
-
.Status {
min-width: 0;
+ white-space: normal;
+ word-wrap: break-word;
+ word-break: break-word;
&:hover {
--_still-image-img-visibility: visible;
@@ -26,15 +26,8 @@ $status-margin: 0.75em;
--icon: var(--selectedPostIcon, $fallback--icon);
}
- &.-conversation {
- border-left-width: 4px;
- border-left-style: solid;
- border-left-color: $fallback--cRed;
- border-left-color: var(--cRed, $fallback--cRed);
- }
-
.gravestone {
- padding: $status-margin;
+ padding: var(--status-margin, $status-margin);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
display: flex;
@@ -47,7 +40,7 @@ $status-margin: 0.75em;
.status-container {
display: flex;
- padding: $status-margin;
+ padding: var(--status-margin, $status-margin);
&.-repeat {
padding-top: 0;
@@ -55,7 +48,7 @@ $status-margin: 0.75em;
}
.pin {
- padding: $status-margin $status-margin 0;
+ padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
display: flex;
align-items: center;
justify-content: flex-end;
@@ -71,7 +64,7 @@ $status-margin: 0.75em;
}
.left-side {
- margin-right: $status-margin;
+ margin-right: var(--status-margin, $status-margin);
}
.right-side {
@@ -80,7 +73,7 @@ $status-margin: 0.75em;
}
.usercard {
- margin-bottom: $status-margin;
+ margin-bottom: var(--status-margin, $status-margin);
}
.status-username {
@@ -93,12 +86,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,42 +144,37 @@ $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;
+ margin-top: 0.2em;
+ line-height: 130%;
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 {
+ & .reply-to-no-popover,
+ & .mentions {
min-width: 0;
margin-right: 0.4em;
flex-shrink: 0;
}
+ .reply-glued-label {
+ margin-right: 0.5em;
+ }
+
.reply-to-popover {
.reply-to:hover::before {
content: '';
@@ -220,21 +204,26 @@ $status-margin: 0.75em;
}
}
- .reply-to {
+ & .mentions,
+ & .reply-to {
+ white-space: nowrap;
position: relative;
}
- .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;
@@ -250,7 +239,7 @@ $status-margin: 0.75em;
}
.repeat-info {
- padding: 0.4em $status-margin;
+ padding: 0.4em var(--status-margin, $status-margin);
.repeat-icon {
color: $fallback--cGreen;
@@ -296,7 +285,7 @@ $status-margin: 0.75em;
position: relative;
width: 100%;
display: flex;
- margin-top: $status-margin;
+ margin-top: var(--status-margin, $status-margin);
> * {
max-width: 4em;
@@ -364,7 +353,7 @@ $status-margin: 0.75em;
}
.favs-repeated-users {
- margin-top: $status-margin;
+ margin-top: var(--status-margin, $status-margin);
}
.stats {
@@ -391,7 +380,7 @@ $status-margin: 0.75em;
}
.stat-count {
- margin-right: $status-margin;
+ margin-right: var(--status-margin, $status-margin);
user-select: none;
.stat-title {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6e3ce0ff..f5b71f54 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,4 @@
<template>
- <!-- eslint-disable vue/no-v-html -->
<div
v-if="!hideStatus"
ref="root"
@@ -79,6 +78,7 @@
<UserAvatar
v-if="retweet"
class="left-side repeater-avatar"
+ :bot="botIndicator"
:better-shadow="betterShadow"
:user="statusoid.user"
/>
@@ -90,8 +90,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"
@@ -122,6 +126,7 @@
@click.stop.prevent.capture.native="toggleUserExpanded"
>
<UserAvatar
+ :bot="botIndicator"
:compact="compact"
:better-shadow="betterShadow"
:user="status.user"
@@ -146,8 +151,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"
@@ -213,13 +222,40 @@
class="fa-scale-110"
/>
</button>
+ <button
+ v-if="inThreadForest && replies && replies.length && !simpleTree"
+ class="button-unstyled"
+ :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
+ :aria-expanded="threadShowing ? 'true' : 'false'"
+ @click.prevent="toggleThreadDisplay"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110"
+ :icon="threadShowing ? 'chevron-up' : 'chevron-down'"
+ />
+ </button>
+ <button
+ v-if="dive && !simpleTree"
+ class="button-unstyled"
+ :title="$t('status.show_only_conversation_under_this')"
+ @click.prevent="dive"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110"
+ :icon="'angle-double-right'"
+ />
+ </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 reply-glued-label"
>
<StatusPopover
v-if="!isPreview"
@@ -239,7 +275,7 @@
flip="horizontal"
/>
<span
- class="faint-link reply-to-text"
+ class="reply-to-text"
>
{{ $t('status.reply_to') }}
</span>
@@ -252,50 +288,95 @@
>
<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"
+ :controlled-showing-tall="controlledShowingTall"
+ :controlled-expanding-subject="controlledExpandingSubject"
+ :controlled-showing-long-subject="controlledShowingLongSubject"
+ :controlled-toggle-showing-tall="controlledToggleShowingTall"
+ :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
+ :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
@mediaplay="addMediaPlaying($event)"
@mediapause="removeMediaPlaying($event)"
+ @parseReady="setHeadTailLinks"
/>
+ <div
+ v-if="inConversation && !isPreview && replies && replies.length"
+ class="replies"
+ >
+ <button
+ v-if="showOtherRepliesAsButton && replies.length > 1"
+ class="button-unstyled -link faint"
+ :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+ @click.prevent="dive"
+ >
+ {{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
+ </button>
+ <span
+ v-else
+ 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"
@@ -373,7 +454,10 @@
class="gravestone"
>
<div class="left-side">
- <UserAvatar :compact="compact" />
+ <UserAvatar
+ :compact="compact"
+ :bot="botIndicator"
+ />
</div>
<div class="right-side">
<div class="deleted-text">
@@ -403,7 +487,6 @@
</div>
</template>
</div>
-<!-- eslint-enable vue/no-v-html -->
</template>
<script src="./status.js" ></script>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-16 01:40:50 +0000