diff options
| author | Henry Jameson <me@hjkos.com> | 2021-06-08 14:34:47 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2021-06-08 14:34:47 +0300 |
| commit | 2f383c2c0197b94b30fdc4c5e0c742c7e104be20 (patch) | |
| tree | 7b4b025a8f4f32fb413ad617f7c9e74b72ae2c16 /src/components/mentions_line/mentions_line.vue | |
| parent | 73127f0e2587ae2e06c3480451e9ea7fce3ce4c7 (diff) | |
moved mentions into a separate component - MentionLine, added collapsing
of mentions when there's too many of 'em
Diffstat (limited to 'src/components/mentions_line/mentions_line.vue')
| -rw-r--r-- | src/components/mentions_line/mentions_line.vue | 42 |
1 files changed, 42 insertions, 0 deletions
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" /> |