Improve consistency of the widgets

1 files changed, 56 insertions, 43 deletions

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 ec4384a6c06..6f9f007965c 100644
--- 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
@@ -1,48 +1,61 @@
 <%
-  package_tangle_index=measure('package_tangle_index')
-  if package_tangle_index
+   package_tangle_index=measure('package_tangle_index')
+   if package_tangle_index
+     package_cycles=measure('package_cycles')
+     package_feedback_edges=measure('package_feedback_edges')
+     package_tangles=measure('package_tangles')
 %>
-<table width="100%">
-  <tbody>
-    <tr>
-    <%
-      if package_tangle_index
-        package_cycles=measure('package_cycles')
-        package_feedback_edges=measure('package_feedback_edges')
-        package_tangles=measure('package_tangles')
-    %>
-      <td valign="top" width="50%">
-        <div class="dashbox">
-          <p class="title"><%= message('widget.package_design.package_tangle_index') -%></p>
-          <p>
-            <span class="big"><%= format_measure(package_tangle_index, :suffix => '', :default => '-', :url => url_for_drilldown('package_tangle_index')) -%></span> <%= dashboard_configuration.selected_period? ? format_variation(package_tangle_index) : trend_icon(package_tangle_index, :big => true) -%>
-          </p>
-          <% if package_cycles %>
-          <p>
-            > <%= format_measure(package_cycles, :suffix => message('widget.package_design.cycles.suffix'), :url => url_for_drilldown('package_cycles')) %> <%= dashboard_configuration.selected_period? ? format_variation(package_cycles) : trend_icon(package_cycles) -%>
-          </p>
-          <% end %>
+  <div class="widget-row">
+    <div class="widget-span widget-span-5">
+      <div class="widget-measure-container">
+        <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)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(package_tangle_index) : trend_icon(package_tangle_index) -%>
+          </span>
         </div>
-      </td>
-      <td valign="top" width="50%">
-        <% if package_feedback_edges || package_tangles %>
-        <div class="dashbox">
-          <p class="title"><%= message('widget.package_design.dependencies_to_cut') -%></p>
-          <p>
-            <%= format_measure(package_feedback_edges, :suffix => message('widget.package_design.between_packages.suffix'), :url => url_for_drilldown('package_feedback_edges')) %>
-            <%= dashboard_configuration.selected_period? ? format_variation(package_feedback_edges) : trend_icon(package_feedback_edges) -%>
-          </p>
-          <p>
-            <%= format_measure(package_tangles, :suffix => message('widget.package_design.between_files.suffix'), :url => url_for_drilldown('package_tangles')) %>
-            <%= dashboard_configuration.selected_period? ? format_variation(package_tangles) : trend_icon(package_tangles) -%>
-          </p>
+
+        <% if package_cycles %>
+          <div class="widget-measure">
+            <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)) -%>
+              <%= dashboard_configuration.selected_period? ? format_variation(package_cycles) : trend_icon(package_cycles) -%>
+            </span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="widget-span widget-span-5">
+      <div class="widget-measure-container">
+        <div class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('widget.package_design.dependencies_to_cut') -%></span>
         </div>
+
+        <% if package_feedback_edges %>
+          <div class="widget-measure">
+            <span class="nowrap">
+              <%= 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>
+          </div>
         <% end %>
-      </td>
-    <% end %>
-    </tr>
-  </tbody>
-</table>
-<%
-  end
-%>
\ No newline at end of file
+
+        <% if package_tangles %>
+          <div class="widget-measure">
+            <span class="nowrap">
+              <%= 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>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+<% end %>
\ No newline at end of file