Improve widget bar charts

diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb
index 47f80fed8caadf41766f2f47f9746c922f46d74d..1068d094699c7cad7af2a1297f4605598b2298ef 100644 (file)
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb
@@ -11,7 +11,7 @@
    new_technical_debt = @snapshot.measure('new_technical_debt')
 %>
 <div class="widget-row">
-  <div class="widget-span widget-span-4">
+  <div class="widget-span widget-span-3">
     <div class="widget-measure-container">
       <div class="widget-measure widget-measure-main">
         <span class="widget-label"><%= message('widget.rules.issues') -%></span>
@@ -21,6 +21,8 @@
           </span>
           <%= dashboard_configuration.selected_period? ? format_variation(issues) : trend_icon(issues) -%>
         </span>
+      </div>
+      <div class="widget-measure-delta">
         <%
            if @dashboard_configuration.selected_period?
              issues_variation = variation_value(issues)
@@ -28,30 +30,35 @@
              estimated_cleared_issues = (new_issues_variation - issues_variation).to_i if issues_variation && new_issues_variation
         %>
           <% if new_issues_variation && new_issues_variation > 0 %>
-            <br/>
-                    <span style="font-weight: bold">
-                      <%= message('widget.rules.added') -%>&nbsp;
+                    <p class="small">
+                      <%= message('widget.rules.added') -%>
                       <a href="<%= url_for(:controller => 'drilldown', :action => 'issues', :id => @project.key, :period => dashboard_configuration.period_index) -%>"
-                         class="varw link-<%= widget.key %>-new-issues">
+                         class="varw widget-link widget-link-red link-<%= widget.key %>-new-issues">
                         <%= format_variation(new_issues, :style => 'none', :default => '-') -%></a>
-                    </span>
+                    </p>
           <% end %>
           <% if estimated_cleared_issues && estimated_cleared_issues > 0 %>
-            <br/>
-                    <span style="font-weight: bold">
-                      <%= message('widget.rules.removed') -%>&nbsp;
+                    <p class="small">
+                      <%= message('widget.rules.removed') -%>
                       <span class="varb"><%= number_with_precision(estimated_cleared_issues, :precision => 0) -%></span>
-                    </span>
+                    </p>
           <% end %>
         <% end %>
       </div>
-      <% if technical_debt %>
+    </div>
+  </div>
+
+  <% if technical_debt %>
+    <div class="widget-span widget-span-3">
+      <div class="widget-measure-container">
         <div class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('widget.rules.technical_debt') -%></span>
           <span class="nowrap">
             <%= format_measure(technical_debt, :url => url_for_drilldown('sqale_index')) %>
             <%= dashboard_configuration.selected_period? ? format_variation(technical_debt) : trend_icon(technical_debt) -%>
           </span>
+        </div>
+        <div class="widget-measure-delta">
           <%
              if @dashboard_configuration.selected_period?
                technical_debt_variation = variation_value(technical_debt)
@@ -59,27 +66,26 @@
                estimated_cleared_technical_debt = (new_technical_debt_variation - technical_debt_variation).to_i if technical_debt_variation && new_technical_debt_variation
           %>
             <% if new_technical_debt_variation && new_technical_debt_variation > 0 %>
-              <br/>
-                  <span style="font-weight: bold">
-                    <%= message('widget.rules.added') -%>&nbsp;
-                    <a href="<%= url_for_drilldown('new_technical_debt', :period => @dashboard_configuration.period_index) -%>" class="varw link-<%= widget.key %>-new-debt">
-                      <%= format_variation(new_technical_debt, :style => 'none', :default => '-') -%></a>
-                  </span>
+                    <p class="small">
+                      <%= message('widget.rules.added') -%>&nbsp;
+                      <a href="<%= url_for_drilldown('new_technical_debt', :period => @dashboard_configuration.period_index) -%>"
+                         class="varw widget-link widget-link-red link-<%= widget.key %>-new-debt">
+                        <%= format_variation(new_technical_debt, :style => 'none', :default => '-') -%></a>
+                    </p>
             <% end %>
             <% if estimated_cleared_technical_debt && estimated_cleared_technical_debt > 0 %>
-              <br/>
-                  <span style="font-weight: bold">
-                    <%= message('widget.rules.removed') -%>&nbsp;
-                    <span class="varb"><%= Internal.i18n.formatLongDuration(estimated_cleared_technical_debt, 'SHORT') -%></span>
-                  </span>
+                    <p class="small">
+                      <%= message('widget.rules.removed') -%>&nbsp;
+                      <span class="varb"><%= Internal.i18n.formatLongDuration(estimated_cleared_technical_debt, 'SHORT') -%></span>
+                    </p>
             <% end %>
           <% end %>
         </div>
-      <% end %>
+      </div>
     </div>
-  </div>
+  <% end %>
 
-  <div class="widget-span widget-span-8">
+  <div class="widget-span widget-span-6">
     <%
        values = [blocker_issues, critical_issues, major_issues, minor_issues, info_issues]
        if dashboard_configuration.selected_period?
@@ -89,21 +95,23 @@
        end
        max = values.map { |val| val.abs }.max
     %>
-    <table class="clear width100">
+    <table class="data zebra widget-barchar">
       <tr>
-        <td><i class="icon-severity-blocker"></i> <%= message('blocker') -%></td>
-        <td style="padding: 0 5px;" align="right">
-          <%= link_to format_measure(blocker_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'BLOCKER'}, :class => 'nolink drilldown_BLOCKER' -%>
-        </td>
         <td>
+          <i class="icon-severity-blocker"></i>
+          <%= link_to message('blocker'), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'BLOCKER'}, :class => 'widget-link drilldown_BLOCKER' -%>
+        </td>
+        <td class="thin right">
+          <%= format_measure(blocker_issues) -%>
+        </td>
+        <td class="thin">
           <%= dashboard_configuration.selected_period? ? format_variation(blocker_issues) : trend_icon(blocker_issues, :empty => true) -%>
         </td>
-        <td>&nbsp;</td>
-        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+        <td class="nowrap">
           <% if max > 0 %>
             <% if dashboard_configuration.selected_period? %>
-              <%= barchart(:width => 35, :percent => (values[0]<0 ? (100 * values[0] / max).to_i : 0), :color => '#078C00') %>
-              <%= barchart(:width => 35, :percent => (values[0]>0 ? (100 * values[0] / max).to_i : 0), :color => '#cc0000') %>
+              <%= barchart(:width => 35, :percent => (values[0]<0 ? (100 * values[0] / max).to_i : 0), :color => '#85bb43') %>
+              <%= barchart(:width => 35, :percent => (values[0]>0 ? (100 * values[0] / max).to_i : 0), :color => '#d4333f') %>
             <% else %>
               <%= barchart(:width => 70, :percent => (100 * values[0] / max).to_i) %>
             <% end %>
@@ -111,19 +119,21 @@
         </td>
       </tr>
       <tr>
-        <td><i class="icon-severity-critical"></i> <%= message('critical') -%></td>
-        <td style="padding: 0 5px;" align="right">
-          <%= link_to format_measure(critical_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'CRITICAL'}, :class => 'nolink drilldown_CRITICAL' -%>
-        </td>
         <td>
+          <i class="icon-severity-critical"></i>
+          <%= link_to message('critical'), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'CRITICAL'}, :class => 'widget-link drilldown_CRITICAL' -%>
+        </td>
+        <td class="thin right">
+          <%= format_measure(critical_issues) -%>
+        </td>
+        <td class="thin">
           <%= dashboard_configuration.selected_period? ? format_variation(critical_issues) : trend_icon(critical_issues, :empty => true) -%>
         </td>
-        <td>&nbsp;</td>
-        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+        <td class="nowrap">
           <% if max > 0 %>
             <% if dashboard_configuration.selected_period? %>
-              <%= barchart(:width => 35, :percent => (values[1]<0 ? (100 * values[1] / max).to_i : 0), :color => '#078C00') %>
-              <%= barchart(:width => 35, :percent => (values[1]>0 ? (100 * values[1] / max).to_i : 0), :color => '#cc0000') %>
+              <%= barchart(:width => 35, :percent => (values[1]<0 ? (100 * values[1] / max).to_i : 0), :color => '#85bb43') %>
+              <%= barchart(:width => 35, :percent => (values[1]>0 ? (100 * values[1] / max).to_i : 0), :color => '#d4333f') %>
             <% else %>
               <%= barchart(:width => 70, :percent => (100 * values[1] / max).to_i) %>
             <% end %>
@@ -131,19 +141,21 @@
         </td>
       </tr>
       <tr>
-        <td><i class="icon-severity-major"></i> <%= message('major') -%></td>
-        <td style="padding: 0 5px;" align="right">
-          <%= link_to format_measure(major_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MAJOR'}, :class => 'nolink drilldown_MAJOR' -%>
-        </td>
         <td>
+          <i class="icon-severity-major"></i>
+          <%= link_to message('major'), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MAJOR'}, :class => 'widget-link drilldown_MAJOR' -%>
+        </td>
+        <td class="thin right">
+          <%= format_measure(major_issues) -%>
+        </td>
+        <td class="thin">
           <%= dashboard_configuration.selected_period? ? format_variation(major_issues) : trend_icon(major_issues, :empty => true) -%>
         </td>
-        <td>&nbsp;</td>
-        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+        <td class="nowrap">
           <% if max > 0 %>
             <% if dashboard_configuration.selected_period? %>
-              <%= barchart(:width => 35, :percent => (values[2]<0 ? (100 * values[2] / max).to_i : 0), :color => '#078C00') %>
-              <%= barchart(:width => 35, :percent => (values[2]>0 ? (100 * values[2] / max).to_i : 0), :color => '#cc0000') %>
+              <%= barchart(:width => 35, :percent => (values[2]<0 ? (100 * values[2] / max).to_i : 0), :color => '#85bb43') %>
+              <%= barchart(:width => 35, :percent => (values[2]>0 ? (100 * values[2] / max).to_i : 0), :color => '#d4333f') %>
             <% else %>
               <%= barchart(:width => 70, :percent => (100 * values[2] / max).to_i) %>
             <% end %>
@@ -151,19 +163,21 @@
         </td>
       </tr>
       <tr>
-        <td><i class="icon-severity-minor"></i> <%= message('minor') -%></td>
-        <td style="padding: 0 5px;" align="right">
-          <%= link_to format_measure(minor_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MINOR'}, :class => 'nolink drilldown_MINOR' -%>
-        </td>
         <td>
+          <i class="icon-severity-minor"></i>
+          <%= link_to message('minor'), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MINOR'}, :class => 'widget-link drilldown_MINOR' -%>
+        </td>
+        <td class="thin right">
+          <%= format_measure(minor_issues) -%>
+        </td>
+        <td class="thin">
           <%= dashboard_configuration.selected_period? ? format_variation(minor_issues) : trend_icon(minor_issues, :empty => true) -%>
         </td>
-        <td>&nbsp;</td>
-        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+        <td class="nowrap">
           <% if max > 0 %>
             <% if dashboard_configuration.selected_period? %>
-              <%= barchart(:width => 35, :percent => (values[3]<0 ? (100 * values[3] / max).to_i : 0), :color => '#078C00') %>
-              <%= barchart(:width => 35, :percent => (values[3]>0 ? (100 * values[3] / max).to_i : 0), :color => '#cc0000') %>
+              <%= barchart(:width => 35, :percent => (values[3]<0 ? (100 * values[3] / max).to_i : 0), :color => '#85bb43') %>
+              <%= barchart(:width => 35, :percent => (values[3]>0 ? (100 * values[3] / max).to_i : 0), :color => '#d4333f') %>
             <% else %>
               <%= barchart(:width => 70, :percent => (100 * values[3] / max).to_i) %>
             <% end %>
@@ -171,19 +185,21 @@
         </td>
       </tr>
       <tr>
-        <td><i class="icon-severity-info"></i> <%= message('info') -%></td>
-        <td style="padding: 0 5px;" align="right">
-          <%= link_to format_measure(info_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'INFO'}, :class => 'nolink drilldown_INFO' -%>
-        </td>
         <td>
+          <i class="icon-severity-info"></i>
+          <%= link_to message('info'), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'INFO'}, :class => 'widget-link drilldown_INFO' -%>
+        </td>
+        <td class="thin right">
+          <%= format_measure(info_issues) -%>
+        </td>
+        <td class="thin">
           <%= dashboard_configuration.selected_period? ? format_variation(info_issues) : trend_icon(info_issues, :empty => true) -%>
         </td>
-        <td>&nbsp;</td>
-        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+        <td class="nowrap">
           <% if max > 0 %>
             <% if dashboard_configuration.selected_period? %>
-              <%= barchart(:width => 35, :percent => (values[4]<0 ? (100 * values[4] / max).to_i : 0), :color => '#078C00') %>
-              <%= barchart(:width => 35, :percent => (values[4]>0 ? (100 * values[4] / max).to_i : 0), :color => '#cc0000') %>
+              <%= barchart(:width => 35, :percent => (values[4]<0 ? (100 * values[4] / max).to_i : 0), :color => '#85bb43') %>
+              <%= barchart(:width => 35, :percent => (values[4]>0 ? (100 * values[4] / max).to_i : 0), :color => '#d4333f') %>
             <% else %>
               <%= barchart(:width => 70, :percent => (100 * values[4] / max).to_i) %>
             <% end %>

diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
index 8f85719f4379d1490bfe332bfc62dea1595262f4..1fe407b7e6d7765f979cb54242b7ba75b67118bf 100644 (file)
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
@@ -20,7 +20,7 @@
 <div class="widget-row widget-row-x">
 
   <div class="widget-span widget-span-3-5">
-    <div class=" widget-measure-container">
+    <div class="widget-measure-container">
       <% if ncloc %>
         <p class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('metric.ncloc.name') -%></span>
@@ -29,27 +29,31 @@
             <%= dashboard_configuration.selected_period? ? format_variation(ncloc) : trend_icon(ncloc) -%>
           </span>
         </p>
+
         <% if ncloc_language_dist_hash %>
           <% if ncloc_language_dist_hash.size > 1 %>
-            <div class="widget-histogram">
+            <table class="data zebra widget-barchar">
               <%
-                max = ncloc_language_dist_hash.max_by{|_k,v| v.to_i}[1].to_i
+                 max = ncloc_language_dist_hash.max_by{|_k,v| v.to_i}[1].to_i
 
-                # Sort lines language distribution by language name
-                languages_by_key = Hash[languages.collect { |l| [l.getKey(), l.getName] }]
-                ncloc_language_dist_hash.sort {|v1,v2| (languages_by_key[v1[0]] ? languages_by_key[v1[0]].to_s : v1[0]) <=> (languages_by_key[v2[0]] ? languages_by_key[v2[0]].to_s : v2[0]) }.each do |language_key, language_ncloc|
+                 # Sort lines language distribution by language name
+                 languages_by_key = Hash[languages.collect { |l| [l.getKey(), l.getName] }]
+                 ncloc_language_dist_hash.sort {|v1,v2| (languages_by_key[v1[0]] ? languages_by_key[v1[0]].to_s : v1[0]) <=> (languages_by_key[v2[0]] ? languages_by_key[v2[0]].to_s : v2[0]) }.each do |language_key, language_ncloc|
               %>
-                <div class="widget-histogram-line">
-                  <span class="widget-histogram-line-bar"
-                        style="width: <%= (40 * language_ncloc.to_i / max).to_i -%>%"></span>
-                  <span class="widget-histogram-line-label">
+                <tr>
+                  <td>
                     <% language = languages.find { |l| l.getKey()==language_key.to_s } -%>
-                      <%= language ? language.getName() : language_key -%>
-                  </span>
-                  <span class="widget-histogram-line-value"><%= ncloc.format_numeric_value(language_ncloc) %></span>
-                </div>
+                    <%= language ? language.getName() : language_key -%>
+                  </td>
+                  <td class="thin right">
+                    <%= ncloc.format_numeric_value(language_ncloc) %>
+                  </td>
+                  <td>
+                    <%= barchart(:width => 70, :percent => (40 * language_ncloc.to_i / max).to_i) %>
+                  </td>
+                </tr>
               <% end %>
-            </div>
+            </table>
           <% else %>
             <%
               language_key = ncloc_language_dist_hash.first[0]

diff --git a/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb b/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb
index 6f9f007965c557d14bcfaeee49e70c732b8c7aae..a9b83d9345fbca970a4224e1661ae8eb0f093cd1 100644 (file)
--- a/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb
+++ b/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb
@@ -11,7 +11,7 @@
         <div class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('widget.package_design.package_tangle_index') -%></span>
           <span class="nowrap">
-            <%= format_measure(package_tangle_index, :suffix => '', :default => '-', :url => url_for_drilldown(package_tangle_index)) -%>
+            <%= format_measure(package_tangle_index, :suffix => '', :default => '-', :url => url_for_drilldown(package_tangle_index)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(package_tangle_index) : trend_icon(package_tangle_index) -%>
           </span>
         </div>
@@ -21,7 +21,7 @@
             <span class="widget-label"><%= message('widget.package_design.cycles.suffix') -%></span>
             <span class="nowrap">
               <span class="widget-medium">&gt;</span>
-              <%= format_measure(package_cycles, :default => '-', :url => url_for_drilldown(package_cycles)) -%>
+              <%= format_measure(package_cycles, :default => '-', :url => url_for_drilldown(package_cycles)) %>
               <%= dashboard_configuration.selected_period? ? format_variation(package_cycles) : trend_icon(package_cycles) -%>
             </span>
           </div>
@@ -38,7 +38,7 @@
         <% if package_feedback_edges %>
           <div class="widget-measure">
             <span class="nowrap">
-              <%= format_measure(package_feedback_edges, :default => '-', :url => url_for_drilldown(package_feedback_edges)) -%>
+              <%= format_measure(package_feedback_edges, :default => '-', :url => url_for_drilldown(package_feedback_edges)) %>
               <%= dashboard_configuration.selected_period? ? format_variation(package_feedback_edges) : trend_icon(package_feedback_edges) -%>
             </span>
             <span class="widget-label"><%= message('widget.package_design.between_packages.suffix') -%></span>
@@ -48,7 +48,7 @@
         <% if package_tangles %>
           <div class="widget-measure">
             <span class="nowrap">
-              <%= format_measure(package_tangles, :default => '-', :url => url_for_drilldown(package_tangles)) -%>
+              <%= format_measure(package_tangles, :default => '-', :url => url_for_drilldown(package_tangles)) %>
               <%= dashboard_configuration.selected_period? ? format_variation(package_tangles) : trend_icon(package_tangles) -%>
             </span>
             <span class="widget-label"><%= message('widget.package_design.between_files.suffix') -%></span>

diff --git a/sonar-server/src/main/less/dashboard.less b/sonar-server/src/main/less/dashboard.less
index 3fa9bfdc4584a3c6352cdd001d8a779428877ec7..602ab689ecffb7be6a569a7f8271a468e20b9211 100644 (file)
--- a/sonar-server/src/main/less/dashboard.less
+++ b/sonar-server/src/main/less/dashboard.less
@@ -363,52 +363,25 @@
   margin: -10px 0;
 }
 
-// Widget Histogram
-
-.widget-histogram {
+.widget-measure-delta {
+  margin-top: -5px;
   margin-bottom: 10px;
+  line-height: 1.5;
 }
 
-.widget-histogram-line {
-  font-size: 0;
-  white-space: nowrap;
-}
-
-.widget-histogram-line + .widget-histogram-line {
-  padding-top: 1px;
-}
-
-.widget-histogram-line-label,
-.widget-histogram-line-bar,
-.widget-histogram-line-bar-fill,
-.widget-histogram-line-value {
-  display: inline-block;
-  vertical-align: middle;
-  height: 16px;
-  line-height: 16px;
-}
-
-.widget-histogram-line-label,
-.widget-histogram-line-value {
-  font-size: @smallFontSize;
-}
+// Widget Histogram
 
-.widget-histogram-line-label {
-  margin-left: 5px;
-  font-weight: 300;
-}
+.widget-barchar {
+  line-height: 1;
 
-.widget-histogram-line-value {
-  margin-left: 5px;
+  td {
+    vertical-align: middle !important;
+  }
 
-  &:before { content: "("; font-weight: 300; }
-  &:after { content: ")"; font-weight: 300; }
+  div.barchart div { height: 1em; }
 }
 
-.widget-histogram-line-bar {
-  min-width: 1px;
-  background-color: @blue;
-}
+.widget-measure-container .widget-barchar { margin-bottom: 10px; }
 
 // Description Widget
 

diff --git a/sonar-server/src/main/less/style.less b/sonar-server/src/main/less/style.less
index 258532e16d3289c3b6a5f6b6a6c585a8397ae401..d831295cd76705a6cae43c0c0d370bbe5b9da999 100644 (file)
--- a/sonar-server/src/main/less/style.less
+++ b/sonar-server/src/main/less/style.less
@@ -1613,12 +1613,12 @@ option.sev_BLOCKER, span.sev_BLOCKER {
 
 .varb {
   /* better */
-  color: #078C00 !important;
+  color: @green !important;
 }
 
 .varw {
   /* worst */
-  color: #cc0000 !important;
+  color: @red !important;
 }
 
 /* ------------------- HELP ------------------- */
@@ -1858,14 +1858,14 @@ ul.bullet li {
 }
 
 .alert_WARN {
-  background-color: #ff8500;
+  background-color: @orange;
   color: #fff;
   margin: 0;
   padding: 0 3px;
 }
 
 .alert_ERROR {
-  background-color: #f93f40;
+  background-color: @red;
   color: #fff;
   margin: 0;
   padding: 0 3px;

diff --git a/sonar-server/src/main/less/ui.less b/sonar-server/src/main/less/ui.less
index b58ab229bfcf7c9e691f7536bc03d28beaf8ed9a..73ab6b55bfa8ba417a2baaa75d0e2442e6170221 100644 (file)
--- a/sonar-server/src/main/less/ui.less
+++ b/sonar-server/src/main/less/ui.less
@@ -90,6 +90,16 @@ a {
   border-bottom: 1px solid @lightBlue;
 }
 
+.widget-link-red {
+  color: @red;
+  border-bottom-color: @lightRed;
+
+  &:hover, &:active, &:focus {
+    color: @red;
+    border-bottom-color: @red;
+  }
+}
+
 
 
 /*

diff --git a/sonar-server/src/main/less/variables.less b/sonar-server/src/main/less/variables.less
index e381aaaec52f356665b058416545e5d0921af902..729a845f9b2c82d72385528f06d4ab3924d19894 100644 (file)
--- a/sonar-server/src/main/less/variables.less
+++ b/sonar-server/src/main/less/variables.less
@@ -22,6 +22,7 @@
 @blue: #4b9fd5;
 @lightBlue: #cae3f2;
 @red: #d4333f;
+@lightRed: #d49f98;
 @green: #85bb43;
 @yellow: #fede06;
 @orange: #f90;

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb b/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
index 1ead358218b14b8a8147056cbc1170802e4c099c..21c85d89e9e8c808abd0df08c3d99950a1e97fe5 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
@@ -388,7 +388,7 @@ module ApplicationHelper
     elsif options[:negative_color] && percent<0
       color = options[:negative_color]
     else
-      color = options[:color]||'#777'
+      color = options[:color]||'#236a97'
     end
 
     align=(percent<0 ? 'float: right;' : nil)
@@ -527,7 +527,7 @@ module ApplicationHelper
 
         if options[:style]!='light'
           formatted_val=(val>=0 ? "+" : "") + formatted_val
-          formatted_val="<b>(#{formatted_val})</b>"
+          formatted_val="(#{formatted_val})"
         else
           # if zero, then we do not put a '+' before in the 'light' case
           formatted_val=(val>0 ? "+" : "") + formatted_val