configurable mentions placement

This commit is contained in:
Henry Jameson 2021-06-08 12:58:28 +03:00
parent 3abd357694
commit 9ea370033a
9 changed files with 75 additions and 53 deletions

View file

@ -13,11 +13,6 @@ const MentionLink = {
required: true,
type: String
},
origattrs: {
required: false,
type: Object,
default: {}
},
firstMention: {
required: false,
type: Boolean,
@ -56,6 +51,12 @@ const MentionLink = {
highlightClass () {
if (this.highlight) return highlightClass(this.user)
},
oldPlace () {
return this.mergedConfig.mentionsOldPlace
},
oldStyle () {
return this.mergedConfig.mentionsOldStyle
},
style () {
if (this.highlight) {
const {
@ -72,7 +73,8 @@ const MentionLink = {
{
'-you': this.isYou,
'-highlighted': this.highlight,
'-firstMention': this.firstMention
'-firstMention': this.firstMention,
'-oldStyle': this.oldStyle
},
this.highlightType
]

View file

@ -3,6 +3,7 @@
white-space: normal;
display: inline-block;
color: var(--link);
margin-right: 0.25em;
& .new,
& .original {
@ -33,23 +34,25 @@
& .short,
& .full {
&::before {
color: var(--faint);
content: '@';
}
}
.new {
&.-firstMention {
display: none;
&.-you {
& .shortName,
& .full {
font-weight: 600;
}
}
&,
&.-highlighted {
&:not(.-oldStyle) {
.short {
line-height: 1.5;
font-size: inherit;
&::before {
color: var(--faint);
display: inline-block;
height: 50%;
line-height: 1;
@ -111,12 +114,9 @@
}
}
.new {
&.-you {
& .shortName,
& .full {
font-weight: 600;
}
&:not(.-oldPlace) {
.new.-firstMention {
display: none;
}
}

View file

@ -1,5 +1,8 @@
<template>
<span class="MentionLink">
<span
class="MentionLink"
:class="{ '-oldPlace': oldPlace }"
>
<!-- eslint-disable vue/no-v-html -->
<a
v-if="!user"
@ -15,8 +18,8 @@
:class="classnames"
>
<button
class="short button-default"
:class="{ '-sublime': !highlight }"
class="short"
:class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
@click.prevent="onClick"
>
<!-- eslint-disable vue/no-v-html -->

View file

@ -38,7 +38,6 @@ export default Vue.component('RichContent', {
url={attrs.href}
content={flattenDeep(children).join('')}
firstMention={!encounteredText}
origattrs={attrs}
/>
}

View file

@ -36,6 +36,16 @@
{{ $t('settings.collapse_subject') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="mentionsOldPlace">
{{ $t('settings.mentions_old_place') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="mentionsOldStyle">
{{ $t('settings.mentions_old_style') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="streaming">
{{ $t('settings.streaming') }}

View file

@ -105,6 +105,9 @@ const Status = {
muteWords () {
return this.mergedConfig.muteWords
},
mentionsOldPlace () {
return this.mergedConfig.mentionsOldPlace
},
showReasonMutedThread () {
return (
this.status.thread_muted ||
@ -137,7 +140,7 @@ const Status = {
return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
},
replyProfileLink () {
return this.$store.getters.findUser(this.status.in_reply_to_screen_name).statusnet_profile_url
return this.$store.getters.findUser(this.status.in_reply_to_user_id).statusnet_profile_url
},
retweet () { return !!this.statusoid.retweeted_status },
retweeterUser () { return this.statusoid.user },
@ -163,7 +166,8 @@ const Status = {
},
mentions () {
return this.statusoid.attentions.filter(attn => {
return attn.screen_name !== this.replyToName
return attn.screen_name !== this.replyToName &&
attn.screen_name !== this.statusoid.user.screen_name
})
},
hasMentions () {

View file

@ -221,36 +221,6 @@
</button>
</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"
@ -320,6 +290,36 @@
</StatusPopover>
</div>
</div>
<div v-if="hasMentions && !mentionsOldPlace" 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>
<StatusContent

View file

@ -259,6 +259,8 @@
"security": "Security",
"setting_changed": "Setting is different from default",
"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
"mentions_old_style": "Old style mentions",
"mentions_old_place": "Leave mentions inside post",
"mfa": {
"otp": "OTP",
"setup_otp": "Setup OTP",

View file

@ -54,6 +54,8 @@ export const defaultState = {
interfaceLanguage: browserLocale,
hideScopeNotice: false,
useStreamingApi: false,
mentionsOldPlace: false,
mentionsOldStyle: false,
sidebarRight: undefined, // instance default
scopeCopy: undefined, // instance default
subjectLineBehavior: undefined, // instance default