diff --git a/lib/pact_broker/ui/view_models/matrix_line.rb b/lib/pact_broker/ui/view_models/matrix_line.rb index 992cbe5ef..b2536dcdf 100644 --- a/lib/pact_broker/ui/view_models/matrix_line.rb +++ b/lib/pact_broker/ui/view_models/matrix_line.rb @@ -37,6 +37,10 @@ def pact_version_sha @line.pact_version_sha end + def pact_version_sha_message + "The highlighted pact(s) have content that has a SHA of #{pact_version_sha}" + end + # verification number, used in verification_url method def number @line.verification_number diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml index dd61eb2f4..b10439bdf 100644 --- a/lib/pact_broker/ui/views/matrix/show.haml +++ b/lib/pact_broker/ui/views/matrix/show.haml @@ -119,7 +119,7 @@ %a{href: tag.url} .tag.label.label-default = tag.name - %td.pact-published{'data-sort-value' => line.pact_published_order, "data-toggle": "tooltip"} + %td.pact-published{'data-sort-value' => line.pact_published_order, "data-toggle": "tooltip", "title": line.pact_version_sha_message, "data-placement": "right", "data-pact-version-sha": line.pact_version_sha} %a{href: line.pact_publication_date_url} - if options.all_rows_checked = "#{line.pact_publication_date} (revision #{line.pact_revision_number})" @@ -146,7 +146,7 @@ %a{href: tag.url} .tag.label.label-default = tag.name - %td.verification-result{class: line.verification_status_class, "title": line.pre_verified_message, "data-toggle": "tooltip"} + %td.verification-result{class: line.verification_status_class, "title": line.pre_verified_message, "data-toggle": "tooltip", "data-placement": "left"} %a{href: line.verification_status_url} - if options.all_rows_checked && line.number = "#{line.verification_status} (number #{line.number})" @@ -154,8 +154,3 @@ = line.verification_status - if line.pre_verified_message %span.glyphicon.glyphicon-time.pre-verified-icon{"aria-hidden": true} - - :javascript - $(document).ready(function(){ - initializeClipper(".clippable"); - }); diff --git a/public/javascripts/matrix.js b/public/javascripts/matrix.js index dd3f6d913..2ce02309f 100644 --- a/public/javascripts/matrix.js +++ b/public/javascripts/matrix.js @@ -53,6 +53,26 @@ function disableFieldsThatShouldNotBeSubmitted() { $('.version-selectorizor').prop('disabled', 'disabled'); } +function highlightPactPublicationsWithSameContent(td) { + const pactVersionSha = $(td).data('pact-version-sha'); + $('*[data-pact-version-sha="' + pactVersionSha +'"]').addClass('bg-info'); +} + +function unHighlightPactPublicationsWithSameContent(td, event) { + var destinationElement = $(event.toElement || event.relatedTarget); + // Have to use mouseout instead of mouseleave, because the tooltip is a child + // of the td, and the mouseleave will consider that hovering over the tooltip + // does not count as leaving. Unfortunately, if you then leave the tooltip, + // the div gets removed without firing the mouseleave event, so the cells remain + // highlighted. + // The tooltip needs to be a child of the td so that we can style the one showing + // the SHA so that it's wide enough to fit the SHA in. + if (!$(td).find('a').is(destinationElement)) { + const pactVersionSha = $(td).data('pact-version-sha'); + $('*[data-pact-version-sha="' + pactVersionSha +'"]').removeClass('bg-info'); + } +} + $(document).ready(function(){ $('.version-selectorizor').change(handleSelectorizorChanged); $('.version-selectorizor').each(function(){ showApplicableTextBoxes($(this)); }); @@ -65,6 +85,11 @@ $(document).ready(function(){ }); $('[data-toggle="tooltip"]').each(function(index, el){ - $(el).tooltip({container: $(el)}); + $(el).tooltip({container: $(el)}) }); + + initializeClipper('.clippable'); + + $('td.pact-published').mouseover(function(event) { highlightPactPublicationsWithSameContent(this) }); + $('td.pact-published').mouseout(function(event) { unHighlightPactPublicationsWithSameContent(this, event)}); }); diff --git a/public/stylesheets/matrix.css b/public/stylesheets/matrix.css index 3895df8bd..ec62969ff 100644 --- a/public/stylesheets/matrix.css +++ b/public/stylesheets/matrix.css @@ -23,3 +23,8 @@ div.tag { span.pre-verified-icon { color: #337ab7; } + +/* Need to make the tooltip wide enough to show the full SHA */ +td.pact-published .tooltip-inner { + max-width: 300px; +}