diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index d26ae337..465c7d00 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -14,8 +14,14 @@ const MentionLink = { type: String }, origattrs: { - required: true, - type: Object + required: false, + type: Object, + default: {} + }, + firstMention: { + required: false, + type: Boolean, + default: false } }, methods: { @@ -61,6 +67,16 @@ const MentionLink = { return rest } }, + classnames () { + return [ + { + '-you': this.isYou, + '-highlighted': this.highlight, + '-firstMention': this.firstMention + }, + this.highlightType + ] + }, ...mapGetters(['mergedConfig']), ...mapState({ currentUser: state => state.users.currentUser diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 78a9816c..dec11014 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -39,10 +39,15 @@ } .new { + &.-firstMention { + display: none; + } + &, &.-highlighted { .short { line-height: 1.5; + font-size: inherit; &::before { display: inline-block; diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index d8d45a1b..05f6fd91 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -12,7 +12,7 @@ v-if="user" class="new" :style="style" - :class="[{ '-you': isYou, '-highlighted': highlight }, highlightType]" + :class="classnames" > } - const renderMention = (attrs, children) => { + const renderMention = (attrs, children, encounteredText) => { return } + let encounteredText = false // Processor to use with mini_html_converter const processItem = (item) => { // Handle text noes - just add emoji if (typeof item === 'string') { + const emptyText = item.trim() + if (!emptyText) { + return encounteredText ? item : item.trim() + } + let unescapedItem = unescape(item) + if (!encounteredText) { + unescapedItem = unescapedItem.trimStart() + encounteredText = true + } if (item.includes(':')) { return processTextForEmoji( - unescape(item), + unescapedItem, this.emoji, ({ shortcode, url }) => { return { + return attn.screen_name !== this.replyToName + }) + }, + hasMentions () { + return this.mentions.length > 0 + }, muted () { if (this.statusoid.user.id === this.currentUser.id) return false const { status } = this diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 82088943..8744fa16 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -155,7 +155,8 @@ $status-margin: 0.75em; margin-right: 0.2em; } - .heading-reply-row { + & .heading-mentions-row, + & .heading-reply-row { position: relative; align-content: baseline; font-size: 12px; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index a4247cd4..092d3834 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -222,6 +222,35 @@ + + + + + + {{ $t('status.mentions') }} + + + + + {{ $t('status.reply_to') }} - - {{ replyToName }} - + +