SONAR-4716 Improve issue technical debt display

2 files changed, 12 insertions, 8 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_technicaldebt.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_technicaldebt.html.erb
index e742beb20c3..61634c7321a 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_technicaldebt.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_technicaldebt.html.erb
@@ -1,7 +1,6 @@
-<div>
+<div class="<%= @requirement.isLinear() ? '' : 'marginbottom10' %>">
   <% if @requirement.isConstant() %>
     <%= message('issue.technical_debt.constant_resource') -%>
-    <br/>
   <% elsif @requirement.isLinearWithThreshold() or @requirement.isLinearWithOffset() %>
     <%
        case @requirement.offset.unit
@@ -18,7 +17,9 @@
     <% else %>
       <%= message('issue.technical_debt.linear_offset', :params => value) -%>
     <% end %>
-    <br/>
   <% end %>
+</div>
+
+<div class="note">
   <%= @requirement.rootCharacteristic.name %>&nbsp;&gt;&nbsp;<%= @requirement.characteristic.name %>
 </div>
diff --git a/sonar-server/src/main/webapp/javascripts/issue.js b/sonar-server/src/main/webapp/javascripts/issue.js
index 4bff90d182c..e38027e80dc 100644
--- a/sonar-server/src/main/webapp/javascripts/issue.js
+++ b/sonar-server/src/main/webapp/javascripts/issue.js
@@ -210,6 +210,7 @@ function toggleIssueRule(elt) {
     ruleElt.slideUp('fast');
   } else {
     issueElt.find('.issue-changelog').slideUp('fast');
+    issueElt.find('.issue-technicaldebt').slideUp('fast');
     var ruleKey = issueElt.attr('data-issue-rule');
     $j.get(baseUrl + "/issue/rule/" + ruleKey, function (html) {
       ruleElt.html(html);
@@ -229,6 +230,7 @@ function toggleIssueChangelog(elt) {
     changelogElt.slideUp('fast');
   } else {
     issueElt.find('.issue-rule').slideUp('fast');
+    issueElt.find('.issue-technicaldebt').slideUp('fast');
     var issueKey = issueElt.attr('data-issue-key');
     $j.get(baseUrl + "/issue/changelog/" + issueKey, function (html) {
       changelogElt.html(html);
@@ -240,15 +242,16 @@ function toggleIssueChangelog(elt) {
 
 function toggleTechnicalDebt(elt) {
   var issueElt = $j(elt).closest('[data-issue-key]');
-  var changelogElt = issueElt.find('.issue-technicaldebt');
-  if (changelogElt.is(':visible')) {
-    changelogElt.slideUp('fast');
+  var debtElt = issueElt.find('.issue-technicaldebt');
+  if (debtElt.is(':visible')) {
+    debtElt.slideUp('fast');
   } else {
+    issueElt.find('.issue-changelog').slideUp('fast');
     issueElt.find('.issue-rule').slideUp('fast');
     var issueKey = issueElt.attr('data-issue-key');
     $j.get(baseUrl + "/issue/technicaldebt/" + issueKey, function (html) {
-      changelogElt.html(html);
-      changelogElt.slideDown('fast');
+      debtElt.html(html);
+      debtElt.slideDown('fast');
     });
   }
   return false;