moved mentions into a separate component - MentionLine, added collapsing

of mentions when there's too many of 'em
This commit is contained in:
Henry Jameson 2021-06-08 14:34:47 +03:00
parent 73127f0e25
commit 2f383c2c01
10 changed files with 151 additions and 28 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

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

View file

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

View file

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

View file

@ -39,8 +39,15 @@
>
{{ $t("general.show_more") }}
</button>
<RichContent
<span
v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
>
<MentionsLine
v-if="mentionsOldPlace"
:attentions="status.attentions"
class="mentions-line"
/>
<RichContent
:class="{ '-single-line': singleLine }"
class="text media-body"
:html="postBodyHtml"
@ -48,6 +55,8 @@
:handle-links="true"
@click.prevent="linkClicked"
/>
</span>
<button
v-if="hideSubjectStatus"
class="button-unstyled -link cw-status-hider"

View file

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