logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 9ea370033af450c0d5e4650a7c10f0e1ffec911c
parent 3abd357694c29c84d213d7d2a7a954ab2a591da0
Author: Henry Jameson <me@hjkos.com>
Date:   Tue,  8 Jun 2021 12:58:28 +0300

configurable mentions placement

Diffstat:

Msrc/components/mention_link/mention_link.js14++++++++------
Msrc/components/mention_link/mention_link.scss22+++++++++++-----------
Msrc/components/mention_link/mention_link.vue9++++++---
Msrc/components/rich_content/rich_content.jsx1-
Msrc/components/settings_modal/tabs/general_tab.vue10++++++++++
Msrc/components/status/status.js8++++++--
Msrc/components/status/status.vue60++++++++++++++++++++++++++++++------------------------------
Msrc/i18n/en.json2++
Msrc/modules/config.js2++
9 files changed, 75 insertions(+), 53 deletions(-)

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js @@ -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 ] diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss @@ -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; } } diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue @@ -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 --> diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx @@ -38,7 +38,6 @@ export default Vue.component('RichContent', { url={attrs.href} content={flattenDeep(children).join('')} firstMention={!encounteredText} - origattrs={attrs} /> } diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue @@ -37,6 +37,16 @@ </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') }} </BooleanSetting> diff --git a/src/components/status/status.js b/src/components/status/status.js @@ -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 () { diff --git a/src/components/status/status.vue b/src/components/status/status.vue @@ -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 diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -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", diff --git a/src/modules/config.js b/src/modules/config.js @@ -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