Fix local timeago on user dashboard

5 files changed, 22 insertions, 3 deletions

diff --git a/app/assets/javascripts/activities.js.coffee b/app/assets/javascripts/activities.js.coffee
index 5092e824e65..eae985e21ad 100644
--- a/app/assets/javascripts/activities.js.coffee
+++ b/app/assets/javascripts/activities.js.coffee
@@ -1,11 +1,14 @@
 class @Activities
   constructor: ->
-    Pager.init 20, true
+    Pager.init 20, true, false, @fixTooltips
     $(".event-filter-link").on "click", (event) =>
       event.preventDefault()
       @toggleFilter($(event.currentTarget))
       @reloadActivities()
 
+  fixTooltips: ->
+    gl.utils.localTimeAgo($('.js-timeago', '#activity'))
+
   reloadActivities: ->
     $(".content_list").html ''
     Pager.init 20, true
diff --git a/app/assets/javascripts/lib/datetime_utility.js.coffee b/app/assets/javascripts/lib/datetime_utility.js.coffee
index ad1d1c70481..948d6dbf07e 100644
--- a/app/assets/javascripts/lib/datetime_utility.js.coffee
+++ b/app/assets/javascripts/lib/datetime_utility.js.coffee
@@ -12,6 +12,13 @@
           $el.attr('title', gl.utils.formatDate($el.attr('datetime')))
     )
 
-    $timeagoEls.timeago() if setTimeago
+    if setTimeago
+      $timeagoEls.timeago()
+      $timeagoEls.tooltip('destroy')
+
+      # Recreate with custom template
+      $timeagoEls.tooltip(
+        template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+      )
 
 ) window
diff --git a/app/assets/javascripts/pager.js.coffee b/app/assets/javascripts/pager.js.coffee
index 0ff83b7f0c8..8049c5c30e2 100644
--- a/app/assets/javascripts/pager.js.coffee
+++ b/app/assets/javascripts/pager.js.coffee
@@ -1,5 +1,5 @@
 @Pager =
-  init: (@limit = 0, preload, @disable = false) ->
+  init: (@limit = 0, preload, @disable = false, @callback = $.noop) ->
     @loading = $('.loading').first()
 
     if preload
@@ -19,6 +19,7 @@
         @loading.hide()
       success: (data) ->
         Pager.append(data.count, data.html)
+        Pager.callback()
       dataType: "json"
 
   append: (count, html) ->
diff --git a/app/assets/javascripts/user_tabs.js.coffee b/app/assets/javascripts/user_tabs.js.coffee
index 70614396a4e..29dad21faed 100644
--- a/app/assets/javascripts/user_tabs.js.coffee
+++ b/app/assets/javascripts/user_tabs.js.coffee
@@ -122,6 +122,9 @@ class @UserTabs
         @parentEl.find(tabSelector).html(data.html)
         @loaded[action] = true
 
+        # Fix tooltips
+        gl.utils.localTimeAgo($('.js-timeago', tabSelector))
+
   loadActivities: (source) ->
     return if @loaded['activity'] is true
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 6a45c34ccbb..e3154657c54 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -192,3 +192,8 @@
 .text-info:hover {
   color: $brand-info;
 }
+
+// Prevent datetimes on tooltips to break into two lines
+.local-timeago {
+  white-space: nowrap;
+}