moving mentions into separate row

This commit is contained in:
Henry Jameson 2021-06-08 11:38:44 +03:00
parent 0583a6b863
commit 3abd357694
8 changed files with 94 additions and 21 deletions

View file

@ -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

View file

@ -39,10 +39,15 @@
}
.new {
&.-firstMention {
display: none;
}
&,
&.-highlighted {
.short {
line-height: 1.5;
font-size: inherit;
&::before {
display: inline-block;

View file

@ -12,7 +12,7 @@
v-if="user"
class="new"
:style="style"
:class="[{ '-you': isYou, '-highlighted': highlight }, highlightType]"
:class="classnames"
>
<button
class="short button-default"

View file

@ -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

View file

@ -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

View file

@ -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;

View file

@ -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"

View file

@ -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",