From 74a2bd3d11f9711d38b3275be98d2cecab4f02ef Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 8 Aug 2016 19:39:43 -0500 Subject: [PATCH 1/8] Restore time_ago_with_tooltip method --- app/helpers/application_helper.rb | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 5f3765cad0d7..b3d76a776d1c 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -163,13 +163,9 @@ def extra_config # `html_class` argument is provided. # # Returns an HTML-safe String - def time_ago_with_tooltip(time, placement: 'top', html_class: '', skip_js: false, short_format: false) - css_classes = short_format ? 'js-short-timeago' : 'js-timeago' - css_classes << " #{html_class}" unless html_class.blank? - css_classes << ' js-timeago-pending' unless skip_js - + def time_ago_with_tooltip(time, placement: 'top', html_class: 'time_ago', skip_js: false) element = content_tag :time, time.to_s, - class: css_classes, + class: "#{html_class} js-timeago #{"js-timeago-pending" unless skip_js}", datetime: time.to_time.getutc.iso8601, title: time.to_time.in_time_zone.to_s(:medium), data: { toggle: 'tooltip', placement: placement, container: 'body' } -- GitLab From d7cd686f88724fb6a08609d057439b3a28cdc78c Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 8 Aug 2016 19:54:26 -0500 Subject: [PATCH 2/8] Refactor shortTimeago implementation --- .../javascripts/lib/utils/datetime_utility.js | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index d4d5927d3b03..625d86b7a759 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -36,8 +36,10 @@ }; w.gl.utils.shortTimeAgo = function($el) { - var shortLocale, tmpLocale; - shortLocale = { + var tmpLocale = $.timeago.settings.strings; + + // Set short locale for timeago + $.timeago.settings.strings = { prefixAgo: null, prefixFromNow: null, suffixAgo: 'ago', @@ -56,14 +58,20 @@ wordSeparator: ' ', numbers: [] }; - tmpLocale = $.timeago.settings.strings; - $el.each(function(el) { - var $el1; - $el1 = $(this); - return $el1.attr('title', gl.utils.formatDate($el.attr('datetime'))); + + $el.each(function() { + var $el = $(this); + var elementDatetime = $.trim($el.text()); + + // Set short date + $el.text($.timeago(new Date(elementDatetime))); + + // Set tooltip + $el.attr('title', gl.utils.formatDate(elementDatetime)); // The tooltip should have the time based on user's timezone + $el.tooltip(); }); - $.timeago.settings.strings = shortLocale; - $el.timeago(); + + // Restore default locale for timeago $.timeago.settings.strings = tmpLocale; }; -- GitLab From 9e665a84aa24b580c7a5ffb54732416d2a4af535 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 8 Aug 2016 19:55:02 -0500 Subject: [PATCH 3/8] Use HTML to set short timeago elements --- app/views/projects/ci/pipelines/_pipeline.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index bb9493f51583..5420dd585423 100644 --- a/app/views/projects/ci/pipelines/_pipeline.html.haml +++ b/app/views/projects/ci/pipelines/_pipeline.html.haml @@ -55,7 +55,7 @@ - if pipeline.finished_at %p.finished-at = icon("calendar") - #{time_ago_with_tooltip(pipeline.finished_at, short_format: false, skip_js: true)} + %time.js-short-timeago= pipeline.finished_at %td.pipeline-actions .controls.hidden-xs.pull-right -- GitLab From cdc9011a60c52159ed4cdac9fe9bfc96095cb549 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 8 Aug 2016 20:53:03 -0500 Subject: [PATCH 4/8] Restore specs with the old implementation --- app/helpers/application_helper.rb | 4 ++-- spec/helpers/application_helper_spec.rb | 19 +++---------------- 2 files changed, 5 insertions(+), 18 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index b3d76a776d1c..4f5d3a2a23d7 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -163,7 +163,7 @@ def extra_config # `html_class` argument is provided. # # Returns an HTML-safe String - def time_ago_with_tooltip(time, placement: 'top', html_class: 'time_ago', skip_js: false) + def time_ago_with_tooltip(time, placement: 'top', html_class: 'time-ago', skip_js: false) element = content_tag :time, time.to_s, class: "#{html_class} js-timeago #{"js-timeago-pending" unless skip_js}", datetime: time.to_time.getutc.iso8601, @@ -179,7 +179,7 @@ def time_ago_with_tooltip(time, placement: 'top', html_class: 'time_ago', skip_j element end - def edited_time_ago_with_tooltip(object, placement: 'top', html_class: 'time_ago', include_author: false) + def edited_time_ago_with_tooltip(object, placement: 'top', html_class: 'time-ago', include_author: false) return if object.updated_at == object.created_at content_tag :small, class: "edited-text" do diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb index 73f5470cf358..a9102f5d7acc 100644 --- a/spec/helpers/application_helper_spec.rb +++ b/spec/helpers/application_helper_spec.rb @@ -218,12 +218,12 @@ def element(*arguments) end it 'includes a default js-timeago class' do - expect(element.attr('class')).to eq 'js-timeago js-timeago-pending' + expect(element.attr('class')).to eq 'time-ago js-timeago js-timeago-pending' end it 'accepts a custom html_class' do - expect(element(html_class: 'custom_class').attr('class')). - to eq 'js-timeago custom_class js-timeago-pending' + expect(element(html_class: 'custom-class').attr('class')). + to eq 'custom-class js-timeago js-timeago-pending' end it 'accepts a custom tooltip placement' do @@ -244,19 +244,6 @@ def element(*arguments) it 'converts to Time' do expect { helper.time_ago_with_tooltip(Date.today) }.not_to raise_error end - - it 'add class for the short format and includes inline script' do - timeago_element = element(short_format: 'short') - expect(timeago_element.attr('class')).to eq 'js-short-timeago js-timeago-pending' - script_element = timeago_element.next_element - expect(script_element.name).to eq 'script' - end - - it 'add class for the short format and does not include inline script' do - timeago_element = element(short_format: 'short', skip_js: true) - expect(timeago_element.attr('class')).to eq 'js-short-timeago' - expect(timeago_element.next_element).to eq nil - end end describe 'render_markup' do -- GitLab From 2033ce987a81923a14e3d27e991e3da037f2cc41 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Mon, 15 Aug 2016 14:41:22 -0500 Subject: [PATCH 5/8] Refresh short timeago every minute --- .../javascripts/lib/utils/datetime_utility.js | 51 +++++++++++++------ 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index 625d86b7a759..bc48a43b9d00 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -35,11 +35,15 @@ } }; - w.gl.utils.shortTimeAgo = function($el) { - var tmpLocale = $.timeago.settings.strings; + w.gl.utils.shortTimeAgo = function($els) { + clearInterval(window.refreshIntervalId); + + if (!$els.length) { + return; + } - // Set short locale for timeago - $.timeago.settings.strings = { + var tmpLocale = $.timeago.settings.strings; + var shortLocale = { prefixAgo: null, prefixFromNow: null, suffixAgo: 'ago', @@ -59,20 +63,37 @@ numbers: [] }; - $el.each(function() { - var $el = $(this); - var elementDatetime = $.trim($el.text()); + function updateShortTimeago($els) { + // Set short locale for timeago + $.timeago.settings.strings = shortLocale; - // Set short date - $el.text($.timeago(new Date(elementDatetime))); + $els.each(function() { + var $el = $(this); + var elementDatetime = $.trim($el.data('originalDate') || $el.text()); - // Set tooltip - $el.attr('title', gl.utils.formatDate(elementDatetime)); // The tooltip should have the time based on user's timezone - $el.tooltip(); - }); + // Set short date + $el.text($.timeago(new Date(elementDatetime))); + + // Set tooltip + if ($el.data('bs.tooltip')) { + $el.tooltip('destroy'); + } else { + $el.data('originalDate', elementDatetime); + } + + $el.attr('title', gl.utils.formatDate(elementDatetime)); // The tooltip should have the time based on user's timezone + $el.tooltip(); + }); + + // Restore default locale for timeago + $.timeago.settings.strings = tmpLocale; + } + + updateShortTimeago($els); - // Restore default locale for timeago - $.timeago.settings.strings = tmpLocale; + window.refreshIntervalId = setInterval(function () { + updateShortTimeago($els); + }, 60000); }; w.gl.utils.getDayDifference = function(a, b) { -- GitLab From fd9a1b15396cb063c9b481eebbdeec3faea3beb1 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Fri, 2 Sep 2016 11:31:26 -0500 Subject: [PATCH 6/8] Make sure timeago text doesn't break in multiple lines --- app/assets/stylesheets/pages/pipelines.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index ee5d9de66d8d..47576dfc0e96 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -161,6 +161,7 @@ .finished-at { color: $table-text-gray; margin: 4px 0; + white-space: nowrap; .fa { font-size: 12px; -- GitLab From c9da13eff47cc84234daf926ef639419c19c8d05 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Fri, 2 Sep 2016 11:53:24 -0500 Subject: [PATCH 7/8] Put interval ID inside of global gl object --- app/assets/javascripts/lib/utils/datetime_utility.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index bc48a43b9d00..9caa17033d8c 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -36,7 +36,7 @@ }; w.gl.utils.shortTimeAgo = function($els) { - clearInterval(window.refreshIntervalId); + clearInterval(w.gl.shortTimeagoIntervalId); if (!$els.length) { return; @@ -91,7 +91,7 @@ updateShortTimeago($els); - window.refreshIntervalId = setInterval(function () { + w.gl.shortTimeagoIntervalId = setInterval(function () { updateShortTimeago($els); }, 60000); }; -- GitLab From 34f087d8432cdd897ce8ca0cde2fac674e8ac444 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Fri, 2 Sep 2016 12:02:28 -0500 Subject: [PATCH 8/8] Update CHANGELOG --- CHANGELOG | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG b/CHANGELOG index ab4aff0f89a1..8ac88b576f79 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -28,6 +28,7 @@ v 8.12.0 (unreleased) - Fix inconsistent background color for filter input field (ClemMakesApps) - Remove prefixes from transition CSS property (ClemMakesApps) - Add Sentry logging to API calls + - Fix shortTimeAgo util to update every minute !5726 - Add BroadcastMessage API - Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling) - Remove unused mixins (ClemMakesApps) -- GitLab