diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/rich_timestamp_tooltip.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/rich_timestamp_tooltip.vue | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/rich_timestamp_tooltip.vue b/app/assets/javascripts/vue_shared/components/rich_timestamp_tooltip.vue new file mode 100644 index 00000000000..424a11bf88b --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/rich_timestamp_tooltip.vue @@ -0,0 +1,42 @@ +<script> +import { GlTooltip } from '@gitlab/ui'; + +import { formatDate } from '~/lib/utils/datetime_utility'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; + +export default { + components: { + GlTooltip, + }, + mixins: [timeagoMixin], + props: { + target: { + type: [Object, HTMLElement, SVGElement, String, Function], + required: true, + }, + rawTimestamp: { + type: String, + required: true, + }, + timestampTypeText: { + type: String, + required: true, + }, + }, + computed: { + timestampInWords() { + return this.rawTimestamp ? this.timeFormatted(this.rawTimestamp) : ''; + }, + timestamp() { + return this.rawTimestamp ? formatDate(new Date(this.rawTimestamp)) : ''; + }, + }, +}; +</script> + +<template> + <gl-tooltip :target="target"> + <div class="bold" data-testid="header-text">{{ timestampTypeText }} {{ timestampInWords }}</div> + <div class="text-tertiary" data-testid="body-text">{{ timestamp }}</div> + </gl-tooltip> +</template> |