SONAR-4421 Add severity dropdown component to display severities with images in a select2 box

4 files changed, 35 insertions, 19 deletions

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 b27a0d7e6be..cd5385ef39e 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
@@ -833,6 +833,14 @@ module ApplicationHelper
     "#{html}<script>$j(document).ready(function() {#{js}});</script>"
   end
 
+  # Creates an enhanced dropdown selection box of severities.
+  # Options are the same as dropdown_tag()
+  def severity_dropdown_tag(name, option_tags, options={}, html_options={})
+    format_function = "function (state) {return \"<span class='sev_\" + state.id + \" withIcons'>\" + state.text + \"</span>\"}"
+    options[:select2_options] = {:formatResult => format_function, :formatSelection => format_function}
+    dropdown_tag(name, option_tags, options, html_options)
+  end
+
   #
   # Creates a link linked to a POST action. A confirmation popup is opened when user clicks on the button.
   # ==== Options
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/helpers/issues_helper.rb b/sonar-server/src/main/webapp/WEB-INF/app/helpers/issues_helper.rb
index 911d658f87d..aa64fcc2918 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/helpers/issues_helper.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/helpers/issues_helper.rb
@@ -48,4 +48,13 @@ module IssuesHelper
     user.has_role?(:admin) && filter.shared
   end
 
+  def severitiy_select_option_tags
+    options = ''
+    Severity::KEYS.each do |severity|
+      selected = (severity == Severity::MAJOR ? 'selected' : '')
+      options += "<option #{selected} value='#{ severity }' class='sev_#{ severity } '>#{ message('severity.'+ severity) }</option>"
+    end
+    options
+  end
+
 end
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb
index e69277c4f48..2fd386e4bf4 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_bulk_change_form.html.erb
@@ -10,9 +10,9 @@
       <div class="bulk-change errors" style="display:none;"/>
       <div class="modal-field">
         <label for="assignee">
-          <input id="assign-action" name="actions[]" type="checkbox" value="assign"/>
           <%= message('issue.assign.formlink') -%>
         </label>
+        <input id="assign-action" name="actions[]" type="checkbox" value="assign"/>
         <%= user_select_tag('assign.assignee', :html_id => 'assignee', :open => false,
                             :include_choices => {'' => escape_javascript(message('unassign')), current_user.login => escape_javascript(message('assign_to_me'))}) -%>
       </div>
@@ -36,28 +36,23 @@
       %>
         <div class="modal-field">
           <label for="plan">
-            <input id="plan-action" name="actions[]" type="checkbox" value="plan"/>
             <%= message('issue.do_plan') -%>
           </label>
+          <input id="plan-action" name="actions[]" type="checkbox" value="plan"/>
           <%= dropdown_tag('plan.plan', plan_options, {:show_search_box => false}, {:id => 'plan'}) -%>
         </div>
       <% end %>
       <div class="modal-field">
         <label for="severity">
-          <input id="set-severity-action" name="actions[]" type="checkbox" value="set_severity"/>
           <%= message('issue.set_severity') -%>
         </label>
-        <select name="set_severity.severity" class="withIcons" id="severity">
-          <% Severity::KEYS.each do |severity| %>
-            <option class="sev_<%= severity -%>" value="<%= severity -%>" <%= 'selected' if severity==Severity::MAJOR -%>><%= message("severity.#{severity}") -%></option>
-          <% end %>
-        </select>
+        <input id="set-severity-action" name="actions[]" type="checkbox" value="set_severity"/>
+        <%= severity_dropdown_tag('set_severity.severity', severitiy_select_option_tags, {:show_search_box => false},
+                         {:id => 'severity'}) -%>
       </div>
       <div class="modal-field">
-        <%
-           @transitions_by_issues.keys.each do |transition|
-        %>
-          <input type="radio" name="transition.transition" value="<%= transition -%>" onClick="addTransitionAction();"><%= message("issue.transition.#{transition}") -%>
+        <% @transitions_by_issues.keys.each do |transition| %>
+          <input type="radio" name="transition.transition" value="<%= transition -%>" onClick="addTransitionAction();">&nbsp;<%= message("issue.transition.#{transition}") -%>
           (<%= @transitions_by_issues[transition].to_s %>) <br>
         <% end %>
       </div>
@@ -87,4 +82,4 @@
   function addTransitionAction() {
     $j('#bulk-change-transition-action').val("transition");
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 796a68e4701..7e314e02ebb 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -1427,7 +1427,7 @@ ul.headerLine select, ul.headerLine input, ul.headerLine button, ul.headerLine t
   vertical-align: middle;
 }
 
-select.withIcons option {
+select.withIcons option, span.withIcons {
   background-repeat: no-repeat;
   background-position: 2px 0;
   padding: 0 2px 0 22px;
@@ -1450,23 +1450,23 @@ option.status_closed {
   background-image: url('../images/status/CLOSED.png');
 }
 
-option.sev_INFO {
+option.sev_INFO, span.sev_INFO {
   background-image: url('../images/priority/INFO.png');
 }
 
-option.sev_MINOR {
+option.sev_MINOR, span.sev_MINOR {
   background-image: url('../images/priority/MINOR.png');
 }
 
-option.sev_MAJOR {
+option.sev_MAJOR, span.sev_MAJOR {
   background-image: url('../images/priority/MAJOR.png');
 }
 
-option.sev_CRITICAL {
+option.sev_CRITICAL, span.sev_CRITICAL {
   background-image: url('../images/priority/CRITICAL.png');
 }
 
-option.sev_BLOCKER {
+option.sev_BLOCKER, span.sev_BLOCKER {
   background-image: url('../images/priority/BLOCKER.png');
 }
 
@@ -2331,6 +2331,10 @@ ul.modal-head-metadata li {
   padding-top: 5px;
 }
 
+.modal-field input {
+  position: relative;
+}
+
 .modal-foot {
   text-align: right;
   padding: 2px 10px;