commit: 3abd357694c29c84d213d7d2a7a954ab2a591da0
parent 0583a6b8638afc6b3ea07adceecdb42ca9188251
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 11:38:44 +0300
moving mentions into separate row
Diffstat:
8 files changed, 94 insertions(+), 21 deletions(-)
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
@@ -14,8 +14,14 @@ const MentionLink = {
type: String
},
origattrs: {
- required: true,
- type: Object
+ required: false,
+ type: Object,
+ default: {}
+ },
+ firstMention: {
+ required: false,
+ type: Boolean,
+ default: false
}
},
methods: {
@@ -61,6 +67,16 @@ const MentionLink = {
return rest
}
},
+ classnames () {
+ return [
+ {
+ '-you': this.isYou,
+ '-highlighted': this.highlight,
+ '-firstMention': this.firstMention
+ },
+ this.highlightType
+ ]
+ },
...mapGetters(['mergedConfig']),
...mapState({
currentUser: state => state.users.currentUser
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
@@ -39,10 +39,15 @@
}
.new {
+ &.-firstMention {
+ display: none;
+ }
+
&,
&.-highlighted {
.short {
line-height: 1.5;
+ font-size: inherit;
&::before {
display: inline-block;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
@@ -12,7 +12,7 @@
v-if="user"
class="new"
:style="style"
- :class="[{ '-you': isYou, '-highlighted': highlight }, highlightType]"
+ :class="classnames"
>
<button
class="short button-default"
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
@@ -33,21 +33,32 @@ export default Vue.component('RichContent', {
class="img"
/>
}
- const renderMention = (attrs, children) => {
+ const renderMention = (attrs, children, encounteredText) => {
return <MentionLink
url={attrs.href}
content={flattenDeep(children).join('')}
+ firstMention={!encounteredText}
origattrs={attrs}
/>
}
+ let encounteredText = false
// Processor to use with mini_html_converter
const processItem = (item) => {
// Handle text noes - just add emoji
if (typeof item === 'string') {
+ const emptyText = item.trim()
+ if (!emptyText) {
+ return encounteredText ? item : item.trim()
+ }
+ let unescapedItem = unescape(item)
+ if (!encounteredText) {
+ unescapedItem = unescapedItem.trimStart()
+ encounteredText = true
+ }
if (item.includes(':')) {
return processTextForEmoji(
- unescape(item),
+ unescapedItem,
this.emoji,
({ shortcode, url }) => {
return <StillImage
@@ -59,7 +70,7 @@ export default Vue.component('RichContent', {
}
)
} else {
- return unescape(item)
+ return unescapedItem
}
}
// Handle tag nodes
@@ -73,7 +84,7 @@ export default Vue.component('RichContent', {
if (!this.handleLinks) break
const attrs = getAttrs(opener)
if (attrs['class'] && attrs['class'].includes('mention')) {
- return renderMention(attrs, children)
+ return renderMention(attrs, children, encounteredText)
}
}
// Render tag as is
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -13,6 +13,7 @@ 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 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'
@@ -33,7 +34,8 @@ import {
faStar,
faEyeSlash,
faEye,
- faThumbtack
+ faThumbtack,
+ faAt,
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -50,7 +52,8 @@ library.add(
faEllipsisH,
faEyeSlash,
faEye,
- faThumbtack
+ faThumbtack,
+ faAt
)
const Status = {
@@ -70,7 +73,8 @@ const Status = {
UserListPopover,
EmojiReactions,
StatusContent,
- RichContent
+ RichContent,
+ MentionLink
},
props: [
'statusoid',
@@ -133,9 +137,7 @@ const Status = {
return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
},
replyProfileLink () {
- if (this.isReply) {
- return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
- }
+ return this.$store.getters.findUser(this.status.in_reply_to_screen_name).statusnet_profile_url
},
retweet () { return !!this.statusoid.retweeted_status },
retweeterUser () { return this.statusoid.user },
@@ -159,6 +161,14 @@ const Status = {
muteWordHits () {
return muteWordHits(this.status, this.muteWords)
},
+ mentions () {
+ return this.statusoid.attentions.filter(attn => {
+ return attn.screen_name !== this.replyToName
+ })
+ },
+ hasMentions () {
+ return this.mentions.length > 0
+ },
muted () {
if (this.statusoid.user.id === this.currentUser.id) return false
const { status } = this
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -155,7 +155,8 @@ $status-margin: 0.75em;
margin-right: 0.2em;
}
- .heading-reply-row {
+ & .heading-mentions-row,
+ & .heading-reply-row {
position: relative;
align-content: baseline;
font-size: 12px;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -222,6 +222,35 @@
</span>
</div>
+ <div v-if="hasMentions" class="heading-mentions-row">
+ <div
+ class="mentions"
+ >
+ <span
+ class="button-unstyled reply-to"
+ :aria-label="$t('tool_tip.reply')"
+ @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="at"
+ />
+ <span
+ class="faint-link reply-to-text"
+ >
+ {{ $t('status.mentions') }}
+ </span>
+ </span>
+ <MentionLink
+ v-for="mention in mentions"
+ class="mention-link"
+ :key="mention.statusnet_profile_url"
+ :content="mention.statusnet_profile_url"
+ :url="mention.statusnet_profile_url"
+ :first-mention="false"
+ />
+ </div>
+ </div>
<div class="heading-reply-row">
<div
v-if="isReply"
@@ -258,13 +287,13 @@
>
<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
+ class="mention-link"
+ :content="replyToName"
+ :url="replyProfileLink"
+ :first-mention="false"
+ />
<span
v-if="replies && replies.length"
class="faint replies-separator"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -697,6 +697,7 @@
"unbookmark": "Unbookmark",
"delete_confirm": "Do you really want to delete this status?",
"reply_to": "Reply to",
+ "mentions": "Mentions",
"replies_list": "Replies:",
"mute_conversation": "Mute conversation",
"unmute_conversation": "Unmute conversation",
