forked from AkkomaGang/akkoma-fe
moved mentions into a separate component - MentionLine, added collapsing
of mentions when there's too many of 'em
This commit is contained in:
parent
73127f0e25
commit
2f383c2c01
10 changed files with 151 additions and 28 deletions
|
@ -40,6 +40,10 @@
|
||||||
.new {
|
.new {
|
||||||
margin-right: 0.25em;
|
margin-right: 0.25em;
|
||||||
|
|
||||||
|
&.-firstMention {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&.-you {
|
&.-you {
|
||||||
& .shortName,
|
& .shortName,
|
||||||
& .full {
|
& .full {
|
||||||
|
@ -115,12 +119,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.-oldPlace) {
|
|
||||||
.new.-firstMention {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .new .full {
|
&:hover .new .full {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
|
|
|
@ -23,7 +23,8 @@
|
||||||
@click.prevent="onClick"
|
@click.prevent="onClick"
|
||||||
>
|
>
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
<!-- 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 -->
|
<!-- eslint-enable vue/no-v-html -->
|
||||||
</button>
|
</button>
|
||||||
<span
|
<span
|
||||||
|
|
51
src/components/mentions_line/mentions_line.js
Normal file
51
src/components/mentions_line/mentions_line.js
Normal 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
|
15
src/components/mentions_line/mentions_line.scss
Normal file
15
src/components/mentions_line/mentions_line.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
42
src/components/mentions_line/mentions_line.vue
Normal file
42
src/components/mentions_line/mentions_line.vue
Normal 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" />
|
|
@ -13,6 +13,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||||
import StatusPopover from '../status_popover/status_popover.vue'
|
import StatusPopover from '../status_popover/status_popover.vue'
|
||||||
import UserListPopover from '../user_list_popover/user_list_popover.vue'
|
import UserListPopover from '../user_list_popover/user_list_popover.vue'
|
||||||
import EmojiReactions from '../emoji_reactions/emoji_reactions.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 MentionLink from 'src/components/mention_link/mention_link.vue'
|
||||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||||
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
||||||
|
@ -74,7 +75,8 @@ const Status = {
|
||||||
EmojiReactions,
|
EmojiReactions,
|
||||||
StatusContent,
|
StatusContent,
|
||||||
RichContent,
|
RichContent,
|
||||||
MentionLink
|
MentionLink,
|
||||||
|
MentionsLine
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
'statusoid',
|
'statusoid',
|
||||||
|
@ -105,9 +107,6 @@ const Status = {
|
||||||
muteWords () {
|
muteWords () {
|
||||||
return this.mergedConfig.muteWords
|
return this.mergedConfig.muteWords
|
||||||
},
|
},
|
||||||
mentionsOldPlace () {
|
|
||||||
return this.mergedConfig.mentionsOldPlace
|
|
||||||
},
|
|
||||||
showReasonMutedThread () {
|
showReasonMutedThread () {
|
||||||
return (
|
return (
|
||||||
this.status.thread_muted ||
|
this.status.thread_muted ||
|
||||||
|
@ -164,6 +163,9 @@ const Status = {
|
||||||
muteWordHits () {
|
muteWordHits () {
|
||||||
return muteWordHits(this.status, this.muteWords)
|
return muteWordHits(this.status, this.muteWords)
|
||||||
},
|
},
|
||||||
|
mentionsOldPlace () {
|
||||||
|
return this.mergedConfig.mentionsOldPlace
|
||||||
|
},
|
||||||
mentions () {
|
mentions () {
|
||||||
return this.statusoid.attentions.filter(attn => {
|
return this.statusoid.attentions.filter(attn => {
|
||||||
return attn.screen_name !== this.replyToName &&
|
return attn.screen_name !== this.replyToName &&
|
||||||
|
|
|
@ -310,13 +310,9 @@
|
||||||
{{ $t('status.mentions') }}
|
{{ $t('status.mentions') }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<MentionLink
|
<MentionsLine
|
||||||
v-for="mention in mentions"
|
:attentions="mentions"
|
||||||
class="mention-link"
|
class="mentions-line"
|
||||||
:key="mention.statusnet_profile_url"
|
|
||||||
:content="mention.statusnet_profile_url"
|
|
||||||
:url="mention.statusnet_profile_url"
|
|
||||||
:first-mention="false"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import fileType from 'src/services/file_type/file_type.service'
|
import fileType from 'src/services/file_type/file_type.service'
|
||||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
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 { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
|
||||||
import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
|
import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
|
@ -104,10 +105,17 @@ const StatusContent = {
|
||||||
attachmentTypes () {
|
attachmentTypes () {
|
||||||
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
|
return this.status.attachments.map(file => fileType.fileType(file.mimetype))
|
||||||
},
|
},
|
||||||
|
mentionsOldPlace () {
|
||||||
|
return this.mergedConfig.mentionsOldPlace
|
||||||
|
},
|
||||||
|
mentions () {
|
||||||
|
return this.status.attentions
|
||||||
|
},
|
||||||
...mapGetters(['mergedConfig'])
|
...mapGetters(['mergedConfig'])
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
RichContent
|
RichContent,
|
||||||
|
MentionsLine
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.status.attentions && this.status.attentions.forEach(attn => {
|
this.status.attentions && this.status.attentions.forEach(attn => {
|
||||||
|
|
|
@ -39,15 +39,24 @@
|
||||||
>
|
>
|
||||||
{{ $t("general.show_more") }}
|
{{ $t("general.show_more") }}
|
||||||
</button>
|
</button>
|
||||||
<RichContent
|
<span
|
||||||
v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
|
v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
|
||||||
:class="{ '-single-line': singleLine }"
|
>
|
||||||
class="text media-body"
|
<MentionsLine
|
||||||
:html="postBodyHtml"
|
v-if="mentionsOldPlace"
|
||||||
:emoji="status.emojis"
|
:attentions="status.attentions"
|
||||||
:handle-links="true"
|
class="mentions-line"
|
||||||
@click.prevent="linkClicked"
|
/>
|
||||||
/>
|
<RichContent
|
||||||
|
:class="{ '-single-line': singleLine }"
|
||||||
|
class="text media-body"
|
||||||
|
:html="postBodyHtml"
|
||||||
|
:emoji="status.emojis"
|
||||||
|
:handle-links="true"
|
||||||
|
@click.prevent="linkClicked"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-if="hideSubjectStatus"
|
v-if="hideSubjectStatus"
|
||||||
class="button-unstyled -link cw-status-hider"
|
class="button-unstyled -link cw-status-hider"
|
||||||
|
|
|
@ -715,7 +715,8 @@
|
||||||
"status_deleted": "This post was deleted",
|
"status_deleted": "This post was deleted",
|
||||||
"nsfw": "NSFW",
|
"nsfw": "NSFW",
|
||||||
"expand": "Expand",
|
"expand": "Expand",
|
||||||
"you": "(You)"
|
"you": "(You)",
|
||||||
|
"plus_more": "+{number} more"
|
||||||
},
|
},
|
||||||
"user_card": {
|
"user_card": {
|
||||||
"approve": "Approve",
|
"approve": "Approve",
|
||||||
|
|
Loading…
Reference in a new issue