aboutsummaryrefslogtreecommitdiff
path: root/src/components/status/status.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/status/status.vue')
-rw-r--r--src/components/status/status.vue236
1 files changed, 170 insertions, 66 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 00e962f3..82eb7ac6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,7 +1,7 @@
<template>
- <!-- eslint-disable vue/no-v-html -->
<div
v-if="!hideStatus"
+ ref="root"
class="Status"
:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
>
@@ -25,9 +25,10 @@
class="fa-scale-110 fa-old-padding repeat-icon"
icon="retweet"
/>
- <router-link :to="userProfileLink">
- {{ status.user.screen_name_ui }}
- </router-link>
+ <user-link
+ :user="status.user"
+ :at="false"
+ />
</small>
<small
v-if="showReasonMutedThread"
@@ -78,6 +79,7 @@
<UserAvatar
v-if="retweet"
class="left-side repeater-avatar"
+ :bot="rtBotIndicator"
:better-shadow="betterShadow"
:user="statusoid.user"
/>
@@ -89,13 +91,18 @@
<router-link
v-if="retweeterHtml"
:to="retweeterProfileLink"
- v-html="retweeterHtml"
- />
+ >
+ <RichContent
+ :html="retweeterHtml"
+ :emoji="retweeterUser.emoji"
+ />
+ </router-link>
<router-link
v-else
:to="retweeterProfileLink"
>{{ retweeter }}</router-link>
</span>
+ {{ ' ' }}
<FAIcon
icon="retweet"
class="repeat-icon"
@@ -116,25 +123,25 @@
v-if="!noHeading"
class="left-side"
>
- <router-link
- :to="userProfileLink"
- @click.stop.prevent.capture.native="toggleUserExpanded"
+ <a
+ :href="$router.resolve(userProfileLink).href"
+ @click.prevent
>
- <UserAvatar
- :compact="compact"
- :better-shadow="betterShadow"
- :user="status.user"
- />
- </router-link>
+ <UserPopover
+ :user-id="status.user.id"
+ :overlay-centers="true"
+ >
+ <UserAvatar
+ class="post-avatar"
+ :bot="botIndicator"
+ :compact="compact"
+ :better-shadow="betterShadow"
+ :user="status.user"
+ />
+ </UserPopover>
+ </a>
</div>
<div class="right-side">
- <UserCard
- v-if="userExpanded"
- :user-id="status.user.id"
- :rounded="true"
- :bordered="true"
- class="usercard"
- />
<div
v-if="!noHeading"
class="status-heading"
@@ -145,8 +152,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"
@@ -154,13 +165,12 @@
>
{{ status.user.name }}
</h4>
- <router-link
+ <user-link
class="account-name"
:title="status.user.screen_name_ui"
- :to="userProfileLink"
- >
- {{ status.user.screen_name_ui }}
- </router-link>
+ :user="status.user"
+ :at="false"
+ />
<img
v-if="!!(status.user && status.user.favicon)"
class="status-favicon"
@@ -181,7 +191,7 @@
<span
v-if="status.visibility"
class="visibility-icon"
- :title="status.visibility | capitalize"
+ :title="visibilityLocalized"
>
<FAIcon
fixed-width
@@ -212,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"
@@ -237,8 +274,9 @@
icon="reply"
flip="horizontal"
/>
+ {{ ' ' }}
<span
- class="faint-link reply-to-text"
+ class="reply-to-text"
>
{{ $t('status.reply_to') }}
</span>
@@ -251,50 +289,113 @@
>
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
</span>
- <router-link
- class="reply-to-link"
- :title="replyToName"
- :to="replyProfileLink"
- >
- {{ replyToName }}
- </router-link>
+ <MentionLink
+ :content="replyToName"
+ :url="replyProfileLink"
+ :user-id="status.in_reply_to_user_id"
+ :user-screen-name="status.in_reply_to_screen_name"
+ />
+ </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
- v-if="replies && replies.length"
- class="faint replies-separator"
+ class="mentions"
+ :aria-label="$t('tool_tip.mentions')"
+ @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
- -
+ <span
+ class="mentions-text"
+ >
+ {{ $t('status.mentions') }}
+ </span>
</span>
- </div>
- <div
- v-if="inConversation && !isPreview && replies && replies.length"
- class="replies"
+ <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
+ v-if="isEdited && editingAvailable && !isPreview"
+ class="heading-edited-row"
+ >
+ <i18n-t
+ keypath="status.edited_at"
+ tag="span"
>
- <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>
+ <template #time>
+ <Timeago
+ template-key="time.in_past"
+ :time="status.edited_at"
+ :auto-update="60"
+ :long-format="true"
+ />
+ </template>
+ </i18n-t>
</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"
@@ -372,7 +473,11 @@
class="gravestone"
>
<div class="left-side">
- <UserAvatar :compact="compact" />
+ <UserAvatar
+ class="post-avatar"
+ :compact="compact"
+ :bot="botIndicator"
+ />
</div>
<div class="right-side">
<div class="deleted-text">
@@ -402,9 +507,8 @@
</div>
</template>
</div>
-<!-- eslint-enable vue/no-v-html -->
</template>
-<script src="./status.js" ></script>
+<script src="./status.js"></script>
<style src="./status.scss" lang="scss"></style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 13:12:18 +0000