moved mentions into a separate component - MentionLine, added collapsing

of mentions when there's too many of 'em

2 files changed, 26 insertions, 9 deletions

diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 232afccb..0c1aa88e 100644
--- 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
index 6f982f2e..92e47118 100644
--- 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"