3 files changed, 108 insertions, 0 deletions
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
new file mode 100644
index 00000000..837935ec
--- /dev/null
+++ 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
new file mode 100644
index 00000000..735502de
--- /dev/null
+++ 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
new file mode 100644
index 00000000..6d114f2d
--- /dev/null
+++ 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" />