Improve the size widget

9 files changed, 112 insertions, 44 deletions

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 b0b7e4f44dd..648baa48277 100644
--- 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
@@ -24,8 +24,10 @@
       <% if ncloc %>
         <p class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('metric.ncloc.name') -%></span>
-          <a class="widget-link widget-big" href="<%= url_for_drilldown(ncloc) -%>"><%= ncloc.formatted_value -%></a>
-          <%= dashboard_configuration.selected_period? ? format_variation(ncloc) : trend_icon(ncloc) -%>
+          <span class="nowrap">
+            <%= format_measure(ncloc, :url => url_for_drilldown(ncloc)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(ncloc) : trend_icon(ncloc) -%>
+          </span>
         </p>
         <% if ncloc_language_dist_hash %>
           <% if ncloc_language_dist_hash.size > 1 %>
@@ -38,15 +40,13 @@
                 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">
                     <% language = languages.find { |l| l.getKey()==language_key.to_s } -%>
-                    <%= language ? language.getName() : language_key -%>
-                  </span>
-                  <span class="widget-histogram-line-bar"
-                        style="width: <%= (50 * language_ncloc.to_i / max).to_i -%>px"></span>
-                  <span class="widget-histogram-line-value">
-                    <%= ncloc.format_numeric_value(language_ncloc) %>
+                      <%= language ? language.getName() : language_key -%>
                   </span>
+                  <span class="widget-histogram-line-value"><%= ncloc.format_numeric_value(language_ncloc) %></span>
                 </div>
               <% end %>
             </div>
@@ -61,8 +61,10 @@
       <% else %>
         <p class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('metric.lines.name') -%></span>
-          <a class="widget-link widget-big" href="<%= url_for_drilldown(lines) -%>"><%= lines.formatted_value -%></a>
-          <%= dashboard_configuration.selected_period? ? format_variation(lines) : trend_icon(lines) -%>
+          <span class="nowrap">
+            <%= format_measure(lines, :url => url_for_drilldown(ncloc)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(lines) : trend_icon(lines) -%>
+          </span>
         </p>
       <% end %>
     </div>
@@ -72,28 +74,38 @@
     <div class="widget-measure-container">
       <p class="widget-measure widget-measure-main">
         <span class="widget-label"><%= message('metric.files.name') -%></span>
-        <a class="widget-link widget-big" href="<%= url_for_drilldown(files) -%>"><%= files.formatted_value -%></a>
-        <%= dashboard_configuration.selected_period? ? format_variation(files) : trend_icon(files) -%>
+        <span class="nowrap">
+          <%= format_measure(files, :url => url_for_drilldown(ncloc)) -%>
+          <%= dashboard_configuration.selected_period? ? format_variation(files) : trend_icon(files) -%>
+        </span>
       </p>
 
-      <p class="widget-measure">
-        <span class="widget-label"><%= message('metric.directories.name') -%></span>
-        <a class="widget-link widget-medium" href="<%= url_for_drilldown(directories) -%>"><%= directories.formatted_value -%></a>
-        <%= dashboard_configuration.selected_period? ? format_variation(directories) : trend_icon(directories) -%>
-      </p>
+      <% if directories %>
+        <p class="widget-measure">
+          <span class="widget-label"><%= message('metric.directories.name') -%></span>
+          <span class="nowrap">
+            <%= format_measure(directories, :url => url_for_drilldown(directories)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(directories) : trend_icon(directories) -%>
+          </span>
+        </p>
+      <% end %>
 
       <% if ncloc && generated_ncloc && generated_ncloc.value > 0 %>
         <p>
-          <a class="widget-link widget-medium" href="<%= url_for_drilldown(generated_ncloc) -%>">+<%= generated_ncloc.formatted_value -%></a>
-          <%= dashboard_configuration.selected_period? ? format_variation(generated_ncloc) : trend_icon(generated_ncloc) -%>
-          <span class="widget-label"><%= message('metric.generated.name.suffix') -%></span>
+          <%= format_measure(generated_ncloc, :url => url_for_drilldown(generated_ncloc)) -%>
+          <span class="nowrap">
+            <%= dashboard_configuration.selected_period? ? format_variation(generated_ncloc) : trend_icon(generated_ncloc) -%>
+            <span class="widget-label"><%= message('metric.generated.name.suffix') -%></span>
+          </span>
         </p>
       <% end %>
 
       <p class="widget-measure">
         <span class="widget-label"><%= message('metric.lines.name') -%></span>
-        <a class="widget-link widget-medium" href="<%= url_for_drilldown(lines) -%>"><%= lines.formatted_value -%></a>
-        <%= dashboard_configuration.selected_period? ? format_variation(lines) : trend_icon(lines) -%>
+        <span class="nowrap">
+          <%= format_measure(lines, :url => url_for_drilldown(lines)) -%>
+          <%= dashboard_configuration.selected_period? ? format_variation(lines) : trend_icon(lines) -%>
+        </span>
       </p>
 
       <%  if generated_lines && generated_lines.value>0 %>
@@ -101,40 +113,56 @@
       <% end %>
 
       <% if projects %>
-        <p><%= format_measure(projects, :suffix => message('metric.projects.name.suffix')) -%> <%= dashboard_configuration.selected_period? ? format_variation(projects) : trend_icon(projects) -%></p>
+        <p class="widget-measure">
+          <span class="widget-label"><%= message('projects') -%></span>
+          <span class="nowrap">
+            <span class="widget-number"><%= format_measure(projects) -%></span>
+            <%= dashboard_configuration.selected_period? ? format_variation(projects) : trend_icon(projects) -%>
+          </span>
+        </p>
       <% end %>
     </div>
   </div>
 
   <div class="widget-span widget-span-5">
     <div class="widget-measure-container">
-      <p class="widget-measure widget-measure-main">
-        <span class="widget-label"><%= message('metric.functions.name') -%></span>
-        <a class="widget-link widget-big" href="<%= url_for_drilldown(functions) -%>"><%= functions.formatted_value -%></a>
-        <%= dashboard_configuration.selected_period? ? format_variation(functions) : trend_icon(functions) -%>
-      </p>
+      <% if functions %>
+        <p class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('metric.functions.name') -%></span>
+          <span class="nowrap">
+            <%= format_measure(functions, :url => url_for_drilldown(functions)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(functions) : trend_icon(functions) -%>
+          </span>
+        </p>
+      <% end %>
 
       <% if classes %>
         <p class="widget-measure">
           <span class="widget-label"><%= message('metric.classes.name') -%></span>
-          <a class="widget-link widget-medium" href="<%= url_for_drilldown(classes) -%>"><%= classes.formatted_value -%></a>
-          <%= dashboard_configuration.selected_period? ? format_variation(classes) : trend_icon(classes) -%>
+          <span class="nowrap">
+            <%= format_measure(classes, :url => url_for_drilldown(classes)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(classes) : trend_icon(classes) -%>
+          </span>
         </p>
       <% end %>
 
       <% if statements %>
         <p class="widget-measure">
           <span class="widget-label"><%= message('metric.statements.name') -%></span>
-          <a class="widget-link widget-medium" href="<%= url_for_drilldown(statements) -%>"><%= statements.formatted_value -%></a>
-          <%= dashboard_configuration.selected_period? ? format_variation(statements) : trend_icon(statements) -%>
+          <span class="nowrap">
+            <%= format_measure(statements, :url => url_for_drilldown(statements)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(statements) : trend_icon(statements) -%>
+          </span>
         </p>
       <% end %>
 
       <% if accessors %>
         <p class="widget-measure">
           <span class="widget-label"><%= message('metric.accessors.name') -%></span>
-          <a class="widget-link widget-medium" href="<%= url_for_drilldown(accessors) -%>"><%= accessors.formatted_value -%></a>
-          <%= dashboard_configuration.selected_period? ? format_variation(accessors) : trend_icon(accessors) -%>
+          <span class="nowrap">
+            <%= format_measure(accessors, :url => url_for_drilldown(accessors)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(accessors) : trend_icon(accessors) -%>
+          </span>
         </p>
       <% end %>
     </div>
diff --git a/sonar-server/src/main/less/dashboard.less b/sonar-server/src/main/less/dashboard.less
index e4c284818f6..7d1dcade6fe 100644
--- a/sonar-server/src/main/less/dashboard.less
+++ b/sonar-server/src/main/less/dashboard.less
@@ -333,6 +333,10 @@
   font-weight: 300;
 }
 
+.widget-number {
+  color: @darkBlue;
+}
+
 .widget-big {
   line-height: 1.5;
   font-size: 24px;
@@ -349,10 +353,17 @@
   display: inline-block;
   vertical-align: top;
   margin: 0 15px 10px 0;
+
+  .widget-link, .widget-number { .widget-medium; }
 }
 
 .widget-measure-main {
   display: block;
+
+  .widget-link, .widget-number { .widget-big; }
+  .widget-label {
+    text-transform: uppercase;
+  }
 }
 
 .widget-measure-container {
@@ -387,21 +398,18 @@
 .widget-histogram-line-label,
 .widget-histogram-line-value {
   font-size: @smallFontSize;
-  font-weight: 300;
 }
 
 .widget-histogram-line-label {
-  width: 60px;
-  margin-right: 8px;
-  overflow: hidden;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  margin-left: 5px;
+  font-weight: 300;
 }
 
 .widget-histogram-line-value {
   margin-left: 5px;
 
+  &:before { content: "("; font-weight: 300; }
+  &:after { content: ")"; font-weight: 300; }
 }
 
 .widget-histogram-line-bar {
diff --git a/sonar-server/src/main/less/style.less b/sonar-server/src/main/less/style.less
index 1a0a7344a8b..e0247c0332c 100644
--- a/sonar-server/src/main/less/style.less
+++ b/sonar-server/src/main/less/style.less
@@ -1506,7 +1506,7 @@ span.empty_widget {
   h3 {
     color: @secondFontColor;
     font-size: @smallFontSize;
-    font-weight: normal;
+    font-weight: 300;
   }
 
   a { .widget-link; }
diff --git a/sonar-server/src/main/less/ui.less b/sonar-server/src/main/less/ui.less
index 98c5718a841..b4e9b7df9af 100644
--- a/sonar-server/src/main/less/ui.less
+++ b/sonar-server/src/main/less/ui.less
@@ -1,12 +1,44 @@
 @import "variables";
 @import "mixins";
 
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/roboto-light.woff') format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto-normal.woff') format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/roboto-medium.woff') format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/roboto-bold.woff') format('woff');
+}
+
 body {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 
 /*
+ * Common
+ */
+
+.nowrap { white-space: nowrap; }
+
+
+/*
  * Links
  */
 
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 401ea7f193d..1ead358218b 100644
--- 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
@@ -295,7 +295,7 @@ module ApplicationHelper
           link_class=''
         end
         # Do not put url between simple quotes to prevent problem if url contain simple quote
-        html='<a href="'+ url +'"'+ " class='#{link_class}' rel='#{link_rel}' title='#{link_rel}'>#{html}</a>"
+        html='<a href="'+ url +'"'+ " class='widget-link #{link_class}' rel='#{link_rel}' title='#{link_rel}'>#{html}</a>"
       end
     end
     html
diff --git a/sonar-server/src/main/webapp/fonts/roboto-bold.woff b/sonar-server/src/main/webapp/fonts/roboto-bold.woff
new file mode 100644
index 00000000000..1621ba170ea
--- /dev/null
+++ b/sonar-server/src/main/webapp/fonts/roboto-bold.woff
diff --git a/sonar-server/src/main/webapp/fonts/roboto-light.woff b/sonar-server/src/main/webapp/fonts/roboto-light.woff
new file mode 100644
index 00000000000..797f14d0beb
--- /dev/null
+++ b/sonar-server/src/main/webapp/fonts/roboto-light.woff
diff --git a/sonar-server/src/main/webapp/fonts/roboto-medium.woff b/sonar-server/src/main/webapp/fonts/roboto-medium.woff
new file mode 100644
index 00000000000..9f6caee9529
--- /dev/null
+++ b/sonar-server/src/main/webapp/fonts/roboto-medium.woff
diff --git a/sonar-server/src/main/webapp/fonts/roboto-normal.woff b/sonar-server/src/main/webapp/fonts/roboto-normal.woff
new file mode 100644
index 00000000000..3be8671f927
--- /dev/null
+++ b/sonar-server/src/main/webapp/fonts/roboto-normal.woff