diff options
author | Kushal Pandya <kushal@gitlab.com> | 2018-03-05 18:10:13 +0530 |
---|---|---|
committer | Kushal Pandya <kushal@gitlab.com> | 2018-03-05 18:10:13 +0530 |
commit | 00db4cb733e5c1314d63972a280108a1d81c7301 (patch) | |
tree | d6f52198878fda587197571787c9836cd1852dc6 /app/assets/javascripts/vue_shared | |
parent | c1ed7f3f961348ca9897beadc75ea9cf2494f344 (diff) | |
download | gitlab-ce-00db4cb733e5c1314d63972a280108a1d81c7301.tar.gz |
LabelsSelect DropdownValueCollapsed Component
Diffstat (limited to 'app/assets/javascripts/vue_shared')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue new file mode 100644 index 00000000000..5cf728fe050 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue @@ -0,0 +1,48 @@ +<script> +import { s__, sprintf } from '~/locale'; +import tooltip from '~/vue_shared/directives/tooltip'; + +export default { + directives: { + tooltip, + }, + props: { + labels: { + type: Array, + required: true, + }, + }, + computed: { + labelsList() { + const labelsString = this.labels.slice(0, 5).map(label => label.title).join(', '); + + if (this.labels.length > 5) { + return sprintf(s__('LabelSelect|%{labelsString}, and %{remainingLabelCount} more'), { + labelsString, + remainingLabelCount: this.labels.length - 5, + }); + } + + return labelsString; + }, + }, +}; +</script> + +<template> + <div + v-tooltip + class="sidebar-collapsed-icon" + data-placement="left" + data-container="body" + :title="labelsList" + > + <i + aria-hidden="true" + data-hidden="true" + class="fa fa-tags" + > + </i> + <span>{{ labels.length }}</span> + </div> +</template> |