From da3ad00cf15aa5d3c3724b412d56a0cba3a270b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Coutable?= Date: Wed, 7 Jun 2017 16:49:36 +0200 Subject: Replace Tipsy by Bootstrap's tooltips MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Rémy Coutable --- vendor/assets/javascripts/peek.js | 13 +---------- vendor/assets/javascripts/peek.performance_bar.js | 27 ++++++++--------------- vendor/assets/stylesheets/peek.scss | 24 -------------------- 3 files changed, 10 insertions(+), 54 deletions(-) (limited to 'vendor') diff --git a/vendor/assets/javascripts/peek.js b/vendor/assets/javascripts/peek.js index 6a4da020b9d..51d797ffd12 100644 --- a/vendor/assets/javascripts/peek.js +++ b/vendor/assets/javascripts/peek.js @@ -3,7 +3,7 @@ var requestId; requestId = null; (function($) { - var fetchRequestResults, getRequestId, initializeTipsy, peekEnabled, toggleBar, updatePerformanceBar; + var fetchRequestResults, getRequestId, peekEnabled, toggleBar, updatePerformanceBar; getRequestId = function() { if (requestId != null) { return requestId; @@ -42,16 +42,6 @@ requestId = null; } return $(document).trigger('peek:render', [getRequestId(), results]); }; - initializeTipsy = function() { - return $('#peek .peek-tooltip, #peek .tooltip').each(function() { - var el, gravity; - el = $(this); - gravity = el.hasClass('rightwards') || el.hasClass('leftwards') ? $.fn.tipsy.autoWE : $.fn.tipsy.autoNS; - return el.tipsy({ - gravity: gravity - }); - }); - }; toggleBar = function(event) { var wrapper; if ($(event.target).is(':input')) { @@ -80,7 +70,6 @@ requestId = null; }); }; $(document).on('keypress', toggleBar); - $(document).on('peek:update', initializeTipsy); $(document).on('peek:update', fetchRequestResults); $(document).on('pjax:end', function(event, xhr, options) { if (xhr != null) { diff --git a/vendor/assets/javascripts/peek.performance_bar.js b/vendor/assets/javascripts/peek.performance_bar.js index 3318e218890..6ed86dce2f2 100644 --- a/vendor/assets/javascripts/peek.performance_bar.js +++ b/vendor/assets/javascripts/peek.performance_bar.js @@ -85,17 +85,15 @@ PerformanceBar = (function() { width = this.mapH(time); title = name + ": " + (PerformanceBar.formatTime(time)); bar = $('
  • ', { - title: title, - "class": 'peek-tooltip' + 'data-title': title, + 'data-toggle': 'tooltip', + 'data-container': 'body' }); bar.css({ width: width + "px", left: left + "px", background: color }); - bar.tipsy({ - gravity: $.fn.tipsy.autoNS - }); return this.el.append(bar); }; @@ -114,12 +112,10 @@ renderPerformanceBar = function() { bar = new PerformanceBar; bar.render(time); span = $('', { - 'class': 'peek-tooltip', - title: 'Total navigation time for this page.' + 'data-toggle': 'tooltip', + 'data-title': 'Total navigation time for this page.', + 'data-container': 'body' }).text(PerformanceBar.formatTime(bar.total())); - span.tipsy({ - gravity: $.fn.tipsy.autoNS - }); return updateStatus(span); }; @@ -168,12 +164,10 @@ $(document).on('pjax:end page:load turbolinks:load', function(event, xhr) { tech = 'Turbolinks'; } span = $('', { - 'class': 'peek-tooltip', - title: tech + " navigation time" + 'data-toggle': 'tooltip', + 'data-title': tech + " navigation time", + 'data-container': 'body' }).text(PerformanceBar.formatTime(total)); - span.tipsy({ - gravity: $.fn.tipsy.autoNS - }); updateStatus(span); return ajaxStart = null; }, 0); @@ -186,6 +180,3 @@ $(function() { return $('#peek-view-performance-bar').remove(); } }); - -// --- -// generated by coffee-script 1.9.2 diff --git a/vendor/assets/stylesheets/peek.scss b/vendor/assets/stylesheets/peek.scss index 0ceeb5b9241..344cf656bab 100644 --- a/vendor/assets/stylesheets/peek.scss +++ b/vendor/assets/stylesheets/peek.scss @@ -86,29 +86,5 @@ } #modal-peek-pg-queries-content { - // background: #999; color: #000; } - -.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; } - .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; } - - /* Rounded corners */ - .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } - - .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; } - - /* Rules to colour arrows */ - .tipsy-arrow-n { border-bottom-color: #000; } - .tipsy-arrow-s { border-top-color: #000; } - .tipsy-arrow-e { border-left-color: #000; } - .tipsy-arrow-w { border-right-color: #000; } - - .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } - .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} - .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} - .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } - .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } - .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } - .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } - .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } -- cgit v1.2.1