commit: 2f383c2c0197b94b30fdc4c5e0c742c7e104be20
parent 73127f0e2587ae2e06c3480451e9ea7fce3ce4c7
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 14:34:47 +0300
moved mentions into a separate component - MentionLine, added collapsing
of mentions when there's too many of 'em
Diffstat:
10 files changed, 151 insertions(+), 28 deletions(-)
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
@@ -40,6 +40,10 @@
.new {
margin-right: 0.25em;
+ &.-firstMention {
+ display: none;
+ }
+
&.-you {
& .shortName,
& .full {
@@ -115,12 +119,6 @@
}
}
- &:not(.-oldPlace) {
- .new.-firstMention {
- display: none;
- }
- }
-
&:hover .new .full {
opacity: 1;
pointer-events: initial;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
@@ -23,7 +23,8 @@
@click.prevent="onClick"
>
<!-- eslint-disable vue/no-v-html -->
- <span class="shortName"><span class="userName" v-html="userName" /></span><span class="you" v-if="isYou">{{ $t('status.you')}}</span>
+ <span class="shortName"><span class="userName" v-html="userName" /></span>
+ <span class="you" v-if="isYou">{{ $t('status.you') }}</span>
<!-- eslint-enable vue/no-v-html -->
</button>
<span
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
@@ -0,0 +1,51 @@
+import MentionLink from 'src/components/mention_link/mention_link.vue'
+import { mapGetters } from 'vuex'
+
+const MentionsLine = {
+ name: 'MentionsLine',
+ props: {
+ attentions: {
+ required: true,
+ type: Object
+ }
+ },
+ data: () => ({ expanded: false }),
+ components: {
+ MentionLink
+ },
+ computed: {
+ oldStyle () {
+ return this.mergedConfig.mentionsOldStyle
+ },
+ limit () {
+ return 1
+ },
+ mentions () {
+ return this.attentions.slice(0, this.limit)
+ },
+ extraMentions () {
+ return this.attentions.slice(this.limit)
+ },
+ manyMentions () {
+ return this.extraMentions.length > 0
+ },
+ buttonClasses () {
+ return [
+ this.oldStyle
+ ? 'button-unstyled'
+ : 'button-default -sublime',
+ this.oldStyle
+ ? '-oldStyle'
+ : '-newStyle'
+ ]
+ },
+ ...mapGetters(['mergedConfig']),
+ },
+ methods: {
+ toggleShowMore () {
+ this.expanded = !this.expanded
+ }
+ }
+}
+
+export default MentionsLine
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
@@ -0,0 +1,15 @@
+.MentionsLine {
+ .showMoreLess {
+ &.-newStyle {
+ line-height: 1.5;
+ font-size: inherit;
+ display: inline-block;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ &.-oldStyle {
+ color: var(--link);
+ }
+ }
+}
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
@@ -0,0 +1,42 @@
+<template>
+<span class="MentionsLine">
+ <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"
+ /><span v-if="manyMentions" class="extraMentions">
+ <span
+ v-if="expanded"
+ class="fullExtraMentions"
+ >
+ <MentionLink
+ v-for="mention in extraMentions"
+ class="mention-link"
+ :key="mention.statusnet_profile_url"
+ :content="mention.statusnet_profile_url"
+ :url="mention.statusnet_profile_url"
+ :first-mention="false"
+ />
+ </span><button
+ v-if="!expanded"
+ class="showMoreLess"
+ :class="buttonClasses"
+ @click="toggleShowMore"
+ >
+ {{ $t('status.plus_more', { number: extraMentions.length })}}
+ </button><button
+ v-if="expanded"
+ class="showMoreLess"
+ :class="buttonClasses"
+ @click="toggleShowMore"
+ >
+ {{ $t('general.show_less')}}
+ </button>
+ </span>
+</span>
+</template>
+<script src="./mentions_line.js" ></script>
+<style lang="scss" src="./mentions_line.scss" />
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 MentionsLine from 'src/components/mentions_line/mentions_line.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'
@@ -74,7 +75,8 @@ const Status = {
EmojiReactions,
StatusContent,
RichContent,
- MentionLink
+ MentionLink,
+ MentionsLine
},
props: [
'statusoid',
@@ -105,9 +107,6 @@ const Status = {
muteWords () {
return this.mergedConfig.muteWords
},
- mentionsOldPlace () {
- return this.mergedConfig.mentionsOldPlace
- },
showReasonMutedThread () {
return (
this.status.thread_muted ||
@@ -164,6 +163,9 @@ const Status = {
muteWordHits () {
return muteWordHits(this.status, this.muteWords)
},
+ mentionsOldPlace () {
+ return this.mergedConfig.mentionsOldPlace
+ },
mentions () {
return this.statusoid.attentions.filter(attn => {
return attn.screen_name !== this.replyToName &&
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -310,13 +310,9 @@
{{ $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"
+ <MentionsLine
+ :attentions="mentions"
+ class="mentions-line"
/>
</div>
</div>
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
@@ -1,5 +1,6 @@
import fileType from 'src/services/file_type/file_type.service'
import RichContent from 'src/components/rich_content/rich_content.jsx'
+import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
import { mapGetters } from 'vuex'
@@ -104,10 +105,17 @@ const StatusContent = {
attachmentTypes () {
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
},
+ mentionsOldPlace () {
+ return this.mergedConfig.mentionsOldPlace
+ },
+ mentions () {
+ return this.status.attentions
+ },
...mapGetters(['mergedConfig'])
},
components: {
- RichContent
+ RichContent,
+ MentionsLine
},
mounted () {
this.status.attentions && this.status.attentions.forEach(attn => {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
@@ -39,15 +39,24 @@
>
{{ $t("general.show_more") }}
</button>
- <RichContent
+ <span
v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
- :class="{ '-single-line': singleLine }"
- class="text media-body"
- :html="postBodyHtml"
- :emoji="status.emojis"
- :handle-links="true"
- @click.prevent="linkClicked"
- />
+ >
+ <MentionsLine
+ v-if="mentionsOldPlace"
+ :attentions="status.attentions"
+ class="mentions-line"
+ />
+ <RichContent
+ :class="{ '-single-line': singleLine }"
+ class="text media-body"
+ :html="postBodyHtml"
+ :emoji="status.emojis"
+ :handle-links="true"
+ @click.prevent="linkClicked"
+ />
+ </span>
+
<button
v-if="hideSubjectStatus"
class="button-unstyled -link cw-status-hider"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -715,7 +715,8 @@
"status_deleted": "This post was deleted",
"nsfw": "NSFW",
"expand": "Expand",
- "you": "(You)"
+ "you": "(You)",
+ "plus_more": "+{number} more"
},
"user_card": {
"approve": "Approve",
