diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-26 20:31:16 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-26 20:31:16 +0300 |
commit | f4274ca1b1ed99523aff95bd78cb74be972dd261 (patch) | |
tree | a75cfbf645a4246d032dbb7fbded8e0c22749627 /app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue | |
parent | fe008c521d777ecfc924929ed373098c24af84c1 (diff) |
Creates CI Header component to use in pipelines and job details pages
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue new file mode 100644 index 00000000000..af2b4c6786e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue @@ -0,0 +1,58 @@ +<script> +import tooltipMixin from '../mixins/tooltip'; +import timeagoMixin from '../mixins/timeago'; +import '../../lib/utils/datetime_utility'; + +/** + * Port of ruby helper time_ago_with_tooltip + */ + +export default { + props: { + time: { + type: String, + required: true, + }, + + tooltipPlacement: { + type: String, + required: false, + default: 'top', + }, + + shortFormat: { + type: Boolean, + required: false, + default: false, + }, + + cssClass: { + type: String, + required: false, + default: '', + }, + }, + + mixins: [ + tooltipMixin, + timeagoMixin, + ], + + computed: { + timeagoCssClass() { + return this.shortFormat ? 'js-short-timeago' : 'js-timeago'; + }, + }, +}; +</script> +<template> + <time + :class="[timeagoCssClass, cssClass]" + class="js-timeago js-timeago-render" + :title="tooltipTitle(time)" + :data-placement="tooltipPlacement" + data-container="body" + ref="tooltip"> + {{timeFormated(time)}} + </time> +</template> |