Improve rendering of rules configuration

8 files changed, 103 insertions, 80 deletions

diff --git a/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties b/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
index 37322733f53..d6ae22140e9 100644
--- a/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
+++ b/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
@@ -990,7 +990,6 @@ rules_configuration.x_rules_have_been_activated={0} rules have been activated.
 rules_configuration.x_rules_have_been_deactivated={0} rules have been deactivated.
 rules_configuration.extend_description=Extend description
 rules_configuration.edit_note=Edit note
-rules_configuration.update_description=Update description
 rules_configuration.add_note=Add note
 rules_configuration.confirm_delete_note=Do you really want to delete this note?
 rules_configuration.rule_inherited_from_profile_x=Rule inherited from profile "{0}"
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/project/history.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/project/history.html.erb
index 80b3ec0c262..a0a9f0ecd0f 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/project/history.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/project/history.html.erb
@@ -55,10 +55,10 @@
       <td class="thin nowrap"><%= l(time, :format => '%H:%M') -%></td>
       
       <td class="thin nowrap" style="padding-left: 20px;">
-          <table class="max-width">
+          <table class="width100">
             <tr id="version_<%= index -%>">
               <% if version_event %>
-              <td class="max-width"><%= version_event.name if version_event -%></td>
+              <td class="width100"><%= version_event.name if version_event -%></td>
               <td class="small edit_actions" style="padding-left:20px">
                 <a id="version_<%= index -%>_change" href="#" onclick="$('version_<%= index -%>').hide();$('version_<%= index -%>_form').show();$('version_name_<%= index -%>').focus();return false;"><%= message('project_history.rename_version') -%></a>
                 <% if version_event && !snapshot.islast? %>
@@ -87,13 +87,13 @@
       </td>
       
       <td class="thin nowrap" style="padding-left: 20px;">
-        <table class="max-width">
+        <table class="width100">
           <% 
              other_events.each_with_index do |event, index2|
                event_index = index.to_s + '-' + index2.to_s 
           %>
 	        <tr id="event_<%= event_index -%>">
-	          <td class="max-width"><%= event.name -%></td>
+	          <td class="width100"><%= event.name -%></td>
 	          <td class="small edit_actions" style="padding-left:20px">
                 <a id="event_<%= event_index -%>_change" href="#" onclick="$('event_<%= event_index -%>').hide();$('event_<%= event_index -%>_form').show();$('event_name_<%= event_index -%>').focus();return false;"><%= message('project_history.rename_event') -%></a>
                 <%= link_to( message('project_history.remove_version'),  
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb
index 60a2c050d06..79a7de0411f 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb
@@ -37,25 +37,27 @@
 </div>
 
 <% if is_admin %>
-<div id="<%= active_note_form_div_id -%>" style="display: none" class="admin">
+<table id="<%= active_note_form_div_id -%>" style="display: none" class="admin table width100">
   <%= form_remote_tag :url => {:action => 'update_active_rule_note', :active_rule_id => active_rule.id},
                       :update => "active_rule_note_#{active_rule.id}" %>
-  <table style="width:100%">
+
     <tbody>
       <tr>
-        <td class="max-width">
+        <td class="width100">
           <textarea name="text" id="<%= active_note_textarea_id -%>" rows="10" style="width:100%"
                     onkeyup="if (this.value=='') $('<%= submit_active_note_update_button_id -%>').disabled=true; else $('<%= submit_active_note_update_button_id -%>').disabled=false;"><%= h(note.plain_text) if note -%></textarea>
-          <br/>
-          <input type="submit" value="<%= note ? message('update_verb') : message('rules_configuration.add_note') -%>" name="commit" id="<%= submit_active_note_update_button_id -%>"/>
-          <a href="#" onclick="$('<%= active_note_detail_div_id -%>').show();$('<%= active_note_form_div_id -%>').hide();return false;"><%= message('cancel') %></a>
         </td>
         <td class="markdown-help">
           <%= render :partial => 'markdown/help' -%>
         </td>
       </tr>
+    <tr>
+      <td colspan="2">
+        <input type="submit" value="<%= note ? message('update_verb') : message('rules_configuration.add_note') -%>" name="commit" id="<%= submit_active_note_update_button_id -%>"/>
+        <a href="#" onclick="$('<%= active_note_detail_div_id -%>').show();$('<%= active_note_form_div_id -%>').hide();return false;"><%= message('cancel') %></a>
+      </td>
+    </tr>
     </tbody>
-  </table>
   </form>
-</div>
+</table>
 <% end %>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule.html.erb
index 838543e069d..953064298f9 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule.html.erb
@@ -29,7 +29,7 @@
     </form>
   </td>
   
-  <td valign="top" class="left">
+  <td class="left">
     <div class="h3"><%= link_to_function("#{h rule.name}", nil, :class => "") do |page|
         page.toggle "desc_#{rule.id}"
       end
@@ -47,14 +47,14 @@
          ancestor_active_rule = ancestor_profile.active_by_rule_id(rule.id) if ancestor_profile && active_rule && (active_rule.inherited? || active_rule.overrides?)
          if ancestor_active_rule || !rule.parameters.empty?
       %>
-        <table width="100%" class="table-bordered background-gray spacer-bottom">
+        <table width="100%" class="table spacer-bottom">
           <% 
              if ancestor_active_rule
                ancestor_active_rule_link = link_to ancestor_profile.name, :controller => 'rules_configuration', :action => 'index', 
                                                        :id => ancestor_profile.id, :rule_id => rule.id, :anchor => 'rule' + rule.id.to_s
           %>
           <tr>
-            <td colspan="2" style="padding: 8px">
+            <td colspan="2">
               <%= message( active_rule.inherited? ? 'rules_configuration.rule_inherited_from_profile_x' : 'rules_configuration.rule_overriding_from_profile_x',
                            :params => ancestor_active_rule_link) -%>
               <% if ancestor_active_rule.priority != active_rule.priority %>
@@ -70,7 +70,7 @@
           </tr>
           <% end %>
           <% unless rule.parameters.empty? 
-               rule.parameters.each do |parameter|
+               rule.parameters.sort.each do |parameter|
                  active_parameter = active_rule.active_param_by_param_id(parameter.id) if active_rule
           %>
           <tr id="param_<%= parameter.id -%>">
@@ -92,7 +92,6 @@
       <% end %>
       
       <% if is_admin %>
-        <br/>
         <% if rule.template? %>
           <%= link_to message('rules_configuration.copy_rule'), {:action => 'new', :id => profile.id, :rule_id => rule.id}, :id => "copy-#{u rule.key}", :class => 'link-action spacer-right' %>
         <% end %>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb
index f3dcddd8a1b..672b88d5fbf 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb
@@ -30,22 +30,25 @@
 <div id="<%= note_form_div_id -%>" style="display: none" class="admin">
   <%= form_remote_tag :url => {:action => 'update_rule_note', :rule_id => rule.id},
                       :update => "rule_note_#{rule.id}" %>
-  <table style="width:100%">
+  <table class="width100 table">
     <tbody>
       <tr>
-        <td style="padding-bottom:20px;" colspan="2"><%= rule.description %></td>
+        <td colspan="2"><%= rule.description %></td>
       </tr>
       <tr>
-        <td class="max-width">
+        <td class="width100">
           <textarea name="text" id="<%= note_textarea_id -%>" rows="10" style="width:100%"><%= h(note.plain_text) if note -%></textarea>
-          <br/>
-          <input type="submit" value="<%= message('rules_configuration.update_description') -%>" name="commit" id="<%= submit_note_update_button_id -%>"/>
-          <a href="#" onclick="$('<%= note_detail_div_id -%>').show();$('<%= note_form_div_id -%>').hide();return false;"><%= message('cancel') %></a>
         </td>
-        <td class="markdown-help">
+        <td class="markdown-help nowrap">
           <%= render :partial => 'markdown/help' -%>
         </td>
       </tr>
+    <tr>
+      <td colspan="2">
+        <input type="submit" value="<%= message('rules_configuration.extend_description') -%>" name="commit" id="<%= submit_note_update_button_id -%>"/>
+        <a href="#" onclick="$('<%= note_detail_div_id -%>').show();$('<%= note_form_div_id -%>').hide();return false;"><%= message('cancel') %></a>
+      </td>
+    </tr>
     </tbody>
   </table>
   </form>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_param.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_param.html.erb
index 806e15df641..338ba4e5562 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_param.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_param.html.erb
@@ -51,7 +51,7 @@
     %>
   </form>
         
-  <% if parameter.description %>
+  <% if parameter.description && !parameter.description.blank? %>
     <div class="form-val-note"><%= h parameter.description -%></div>
   <% end %>
 </td>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/index.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/index.html.erb
index 384d6674260..4ea2021f466 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/index.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/index.html.erb
@@ -41,7 +41,7 @@
 
 <% form_tag({:action => 'index'}, {:method => 'get'}) do %>
     <% hidden_field_tag "id", @id %>
-   <table class="spaced" id="search_table">
+   <table class="with-padding" id="search_table">
      <tr>
        <td class="left" valign="top" width="1%" nowrap>
          <span class="note"><%= message('name') -%>/<%= message('key') -%></span><br/>
@@ -101,7 +101,7 @@
      <% if @hidden_inactives && @hidden_inactives>0 %><span class="small">[<a href="<%= url_for params.merge({:rule_status => ''}) -%>" id="inactive-rules-link">+<%= message('rules_configuration.x_found_in_inactive_rules', :params => @hidden_inactives) -%></a>]</span><% end %>
   </h2>
 </div>
-<table class="data width100 marginbottom10" id="result_table">
+<table class="table table-bordered width100 spacer-bottom" id="result_table">
   <thead>
     <tr>
         <th class="left" nowrap><%= message('active') -%>/<%= message('severity') -%></th>
@@ -118,7 +118,7 @@
   @rules.each do |rule|
     active_rule = @profile.active_by_rule_id(rule.id)
 %>
-  <tr id="rule_<%= rule.id -%>" class="<%= cycle('even','odd') -%> bordered-bottom">
+  <tr id="rule_<%= rule.id -%>">
     <%= render :partial => 'rule', :object => rule, :locals => {:profile => @profile, :rule => rule, :active_rule => active_rule, :is_admin => is_admin} %>
   </tr>
 <% end %>
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index bbcf71f9c09..1997ac8fbae 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -207,7 +207,7 @@ div#sidebar .selected a, div#sidebar .selected a:hover, div#sidebar.selected a:v
 }
 
 #sidebarconf {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border: 2px solid #DDD;
   color: #666;
   line-height: 1.1em;
@@ -446,7 +446,7 @@ button[disabled], .button[disabled], input[type="submit"][disabled], input[type=
   list-style-type: none !important;
   padding: 2px 5px !important;
   cursor: pointer !important;
-  color: red  !important;
+  color: red !important;
 }
 
 .popup-menu li:hover {
@@ -508,7 +508,7 @@ h4, .h4 {
   color: #777;
   font-size: 85%;
   margin-bottom: 10px;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border: 1px solid #cdcdcd;
   padding: 4px;
 }
@@ -517,12 +517,14 @@ h4, .h4 {
   position: relative;
   cursor: pointer;
 }
+
 .treemap a {
   color: #FFF;
   text-decoration: none;
   font-size: 12px;
   padding: 1px;
 }
+
 .treemap a:hover {
   text-decoration: underline;
 }
@@ -595,7 +597,7 @@ h4, .h4 {
 
 .doc pre, pre.code {
   color: #777;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   padding: 10px;
   margin: 10px 0;
   border: 1px dashed #777;
@@ -640,7 +642,7 @@ table.data th img, table.data td img {
 }
 
 .data thead tr.total {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   font-weight: normal;
   border: 1px solid #DDD;
 }
@@ -729,10 +731,6 @@ table.spacedicon td {
   width: 1%;
 }
 
-.max-width {
-  width: 100%;
-}
-
 td.sep {
   width: 10px;
 }
@@ -795,7 +793,7 @@ ul.operations {
   height: 20px;
   list-style-type: none;
   margin: 0;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border: 1px solid #cdcdcd;
   border-radius: 3px;
   -moz-border-radius: 3px;
@@ -842,7 +840,7 @@ ul.operations li img {
 }
 
 .sources2 td.lid {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border-right: 1px solid #DDDDDD;
   border-left: 1px solid #DDDDDD;
   text-align: right;
@@ -859,7 +857,7 @@ ul.operations li img {
 .sources2 td.scm {
   border-right: 1px solid #DDD;
   border-left: 1px solid #DDD;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
 }
 
 .sources2 td.revision {
@@ -870,14 +868,14 @@ ul.operations li img {
 }
 
 .sources2 tr.row td.plus {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border-left: 1px solid #DDD;
   padding: 0;
   width: 16px;
 }
 
 .sources2 tr.row:hover td.plus {
-  background: url("../images/add.png") no-repeat scroll left 50% #ECECEC;
+  background: url("../images/add.png") no-repeat scroll left 50% #EFEFEF;
 }
 
 .sources2 td.plus a {
@@ -889,7 +887,7 @@ ul.operations li img {
 
 .sources2 td.gray {
   border-left: 1px solid #DDD;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   padding: 2px 0.5em 0;
 }
 
@@ -1066,7 +1064,7 @@ span.rulename a:hover {
 .tab_header {
   border: 1px solid #DDD;
   border-top-width: 0;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   padding: 5px 10px;
   margin-bottom: 10px;
   color: #444;
@@ -1206,7 +1204,7 @@ div.discussion {
 }
 
 div.discussionComment {
-  background-color: #F4F4F4;
+  background-color: #EFEFEF;
   border-top: 1px solid #DDDDDD;
   line-height: 1.5em;
   margin: 0;
@@ -1319,6 +1317,7 @@ div.progress div.note {
   color: #777;
   padding-right: 20px;
 }
+
 #searchingResources {
   position: absolute;
   top: 8px;
@@ -1412,7 +1411,7 @@ div.autocompleteNote {
 }
 
 .gwt-SourcePanel .ln {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   white-space: nowrap;
   text-align: right;
   font-size: 85%;
@@ -1428,7 +1427,7 @@ div.autocompleteNote {
 }
 
 .gwt-SourcePanel .val {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border-right: 1px solid #DDD;
   text-align: right;
   color: #777;
@@ -1466,7 +1465,7 @@ div.autocompleteNote {
   height: 1.6em;
   background-position: 5px 1px;
   background-repeat: no-repeat;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
 }
 
 .gwt-SourcePanel .warn {
@@ -1538,7 +1537,7 @@ div.autocompleteNote {
 }
 
 .gwt-ViewerHeader {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border: 1px solid #DDD;
   border-top: none;
   margin-bottom: 8px;
@@ -1624,7 +1623,7 @@ span.empty_widget {
 }
 
 table.header1 {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   color: #444;
   border: 1px solid #DDD;
   margin: 0 0 10px 0;
@@ -1638,7 +1637,7 @@ table.header1 td {
 }
 
 .headerLine {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   color: #444;
   border: 1px solid #DDD;
   margin: 0 0 10px 0;
@@ -1724,7 +1723,7 @@ option.sev_BLOCKER {
 /* ------------------- HELP ------------------- */
 .help {
   border: 1px solid #DDD;
-  background-color: #F4F4F4;
+  background-color: #EFEFEF;
   color: #444;
   padding: 5px;
 }
@@ -1762,7 +1761,7 @@ option.sev_BLOCKER {
 /* ------------------- BOXES ------------------- */
 .box {
   border: 1px solid #ccc;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   margin-bottom: 5px;
   color: #444;
   padding: 10px;
@@ -1879,7 +1878,7 @@ ul.bullet li {
 
 .tabs li a:link, .tabs li a:visited {
   float: left;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   color: #555;
   vertical-align: bottom;
   height: 17px;
@@ -1930,12 +1929,12 @@ ul.bullet li {
 
 .smalltabs .tab.selected {
   font-weight: bold;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
 }
 
 .smalltabs .tab.selected a {
   text-decoration: none;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   color: #777;
 }
 
@@ -1981,7 +1980,7 @@ ul.bullet li {
 }
 
 #time_machine #selector {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   border: 1px solid #DDD;
 }
 
@@ -2061,7 +2060,7 @@ ul.bullet li {
   font-weight: normal;
   text-decoration: underline;
   color: #555;
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   vertical-align: middle;
   white-space: nowrap;
   padding: 0.3em 0.6em;
@@ -2093,9 +2092,7 @@ ul.bullet li {
 }
 
 .rule_detail .markdown-help {
-  vertical-align:top;
-  width: 90px;
-  padding-left: 10px;
+  vertical-align: top;
   white-space: nowrap;
 }
 
@@ -2228,7 +2225,7 @@ h4 a, h4 a:visited, .gray, table.data tfoot a, table.data tfoot a:visited {
 }
 
 .even, table.sortable tr.rowodd {
-  background-color: #F4F4F4;
+  background-color: #EFEFEF;
 }
 
 .bordered, table.data > thead {
@@ -2317,7 +2314,7 @@ table.nowrap td, td.nowrap, th.nowrap {
 }
 
 .background-gray {
-  background-color: #ECECEC;
+  background-color: #EFEFEF;
   color: #444;
 }
 
@@ -2361,8 +2358,6 @@ table.nowrap td, td.nowrap, th.nowrap {
   background: #FFFBCC;
 }
 
-
-
 /* Used on links which are located inside a dense text place or in tables */
 /* in order to rapidly identify them                                      */
 .link-action {
@@ -2370,14 +2365,6 @@ table.nowrap td, td.nowrap, th.nowrap {
   color: #4183C4;
 }
 
-.table-bordered {
-  border: 1px solid #DDD;
-  border-collapse: separate;
-  *border-collapse: collapsed;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
 .form-key-cell {
   padding: 2px 8px 4px 10px;
   text-align: right;
@@ -2385,20 +2372,24 @@ table.nowrap td, td.nowrap, th.nowrap {
   white-space: nowrap;
   vertical-align: top;
 }
+
 .form-val-cell {
   padding: 2px 8px 4px 0;
   text-align: left;
   white-space: normal;
 }
+
 .form-val-note {
-  font-size: 12px;
   color: #999;
+  padding: 5px 0;
 }
+
 blockquote {
   border-left: 3px solid #E5E5E5;
   padding: 0 8px;
   line-height: 16px;
 }
+
 blockquote cite {
   line-height: 16px;
   background-image: url('../images/reviews/comment.png');
@@ -2408,30 +2399,59 @@ blockquote cite {
   font-size: 12px;
   color: #888;
 }
+
 .spacer-left {
-  margin-left: 10px;
+  margin-left: 8px;
 }
+
 .spacer-right {
-  margin-right: 10px;
+  margin-right: 8px;
 }
+
 .spacer-bottom {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
+
 .spacer-top {
-  margin-top: 10px;
+  margin-top: 8px;
 }
+
 .bordered {
   border: 1px solid #DDD;
 }
+
 .bordered-left {
   border-left: 1px solid #DDD;
 }
+
 .bordered-right {
   border-right: 1px solid #DDD;
 }
+
 .bordered-bottom {
   border-bottom: 1px solid #DDD;
 }
+
 .bordered-top {
   border-top: 1px solid #DDD;
-}
\ No newline at end of file
+}
+
+.table > thead > tr > th {
+  border-top: 0 none;
+  font-weight: bold;
+  vertical-align: bottom;
+  line-height: 16px;
+  padding: 4px 5px;
+}
+.table > tbody > tr > td {
+  line-height: 16px;
+  padding: 4px 5px;
+}
+.table-bordered > tbody {
+  border-left: 1px solid #DDD;
+  border-right: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+}
+.table-bordered > tbody > tr > td {
+  border-top: 1px solid #DDD;
+}