summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
diff options
context:
space:
mode:
authorClement Ho <ClemMakesApps@gmail.com>2017-05-23 12:36:41 -0500
committerClement Ho <ClemMakesApps@gmail.com>2017-06-06 10:39:23 -0500
commit7b533ef7f140450783485b01cdf0434b77a9f90e (patch)
tree16c4bb003c74c02e858ef835602e87e5709b327d /app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
parentd07e85e1033f8026f155c6171cb3ebcd6b93d9ed (diff)
downloadgitlab-ce-ch-test-2.tar.gz
Change from double click to single click to open dropdownch-test-2
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.vue58
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>