SONAR-4853 New design of the Issues page

9 files changed, 206 insertions, 207 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_issue.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_issue.html.erb
index 4e16f08f412..cd94b0cbc94 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_issue.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issue/_issue.html.erb
@@ -1,53 +1,29 @@
-<div class="code-issue" data-issue-key="<%= issue.key -%>" data-issue-component="<%= issue.componentKey() -%>" data-issue-rule="<%= u issue.ruleKey().toString() -%>">
+<div class="code-issue"
+     data-issue-key="<%= issue.key -%>"
+     data-issue-component="<%= issue.componentKey() -%>"
+     data-issue-rule="<%= u issue.ruleKey().toString() -%>">
+
   <div class="code-issue-name">
+    <i class="icon-severity-<%= issue.severity.downcase -%>" title="<%= h message("severity.#{issue.severity}") -%>"></i>
+    <a href="#" onclick="return toggleIssueRule(this)" class="rulename issue-rule-link"><%= h @issue_results.rule(issue).getName() -%></a>
+
     <div style="float: right">
+      <% unless issue.status == "OPEN" %>
+        <i class="icon-status-<%= issue.status.downcase -%>"></i><%= h message("issue.status.#{issue.status}") -%>&nbsp;
+      <% end %>
+      <% if issue.resolution %>
+        <i class="icon-status-<%= issue.resolution.downcase -%>"></i><%= h message("issue.resolution.#{issue.resolution}") -%>&nbsp;
+      <% end %>
+
+      <a href="#" onclick="return toggleIssueChangelog(this)" class="gray issue-changelog-link"
+         id="toggle-issue-changelog"><%= distance_of_time_in_words_to_now(Api::Utils.java_to_ruby_datetime(issue.updateDate())) -%></a>
+
       <a href="#" onclick="return openIssuePopup(this)" class="issue-permalink"><img src="<%= ApplicationController.root_context -%>/images/new-window-16.gif"></a>
     </div>
-
-    <img src="<%= ApplicationController.root_context -%>/images/priority/<%= issue.severity -%>.png" title="<%= h message("severity.#{issue.severity}") -%>">
-    &nbsp;
-    <a href="#" onclick="return toggleIssueRule(this)" class="rulename issue-rule-link"><%= h @issue_results.rule(issue).getName() -%></a>
-    &nbsp;
-    <% if issue.resolution %>
-      <img src="<%= ApplicationController.root_context -%>/images/sep12.png"/>
-      &nbsp;
-      <span><%= message("issue.resolution.#{issue.resolution}") -%></span>
-      &nbsp;
-    <% else %>
-      <img src="<%= ApplicationController.root_context -%>/images/sep12.png"/>
-      &nbsp;
-      <span><%= message("issue.status.#{issue.status}") -%></span>
-      &nbsp;
-    <% end %>
-    <img src="<%= ApplicationController.root_context -%>/images/sep12.png"/>
-    &nbsp;
-    <%= message('issue.updated') -%>&nbsp;<a href="#" onclick="return toggleIssueChangelog(this)" class="gray issue-changelog-link"
-       id="toggle-issue-changelog"><%= distance_of_time_in_words_to_now(Api::Utils.java_to_ruby_datetime(issue.updateDate())) -%></a>
-    &nbsp;
-    <% if issue.reporter %>
-      <img src="<%= ApplicationController.root_context -%>/images/sep12.png"/>
-      &nbsp;
-      <span><%= message('issue.reported_by') -%> <%= @issue_results.user(issue.reporter).name -%></span>
-      &nbsp;
-    <% end %>
-    <% if issue.authorLogin %>
-      <img src="<%= ApplicationController.root_context -%>/images/sep12.png"/>
-      &nbsp;
-     <span><%= message('issue.authorLogin') -%>&nbsp;<%= issue.authorLogin -%></span>
-      &nbsp;
-    <% end %>
-    <% if issue.technicalDebt %>
-      <img src="<%= ApplicationController.root_context -%>/images/sep12.png"/>
-      &nbsp;
-      <%= message('issue.technical_debt') -%>&nbsp;<a href="#" onclick="return toggleTechnicalDebt(this)" class="gray issue-technicaldebt-link"
-           id="toggle-issue-technicaldebt"><%= Internal.technical_debt.format(issue.technicalDebt) -%></a>
-        &nbsp;
-    <% end %>
   </div>
 
   <div class="issue-rule rule-desc" style="display: none"></div>
   <div class="issue-changelog" id="issue-changelog" style="display: none"></div>
-  <div class="issue-technicaldebt" id="issue-technicaldebt" style="display: none"></div>
 
   <% unless issue.message.blank? %>
     <div class="code-issue-msg">
@@ -55,6 +31,94 @@
     </div>
   <% end %>
 
+  <div class="code-issue-details">
+    <ul class="tabs">
+      <li>
+        <a href="#tab-issue-details"><%= message('issue.details') -%></a>
+      </li>
+      <li>
+        <a href="/dev/issue/rule/<%= u issue.ruleKey().toString() -%>"><%= message('rule') -%></a>
+      </li>
+      <li>
+        <a href="/dev/issue/changelog/<%= issue.key -%>"><%= message('changelog') -%></a>
+      </li>
+    </ul>
+    <div id="tab-issue-details">
+      <ul class="code-issue-details-list">
+        <li>
+          <div class="code-issue-details-term"><%= message('severity') -%></div>
+          <div class="code-issue-details-value">
+            <i class="icon-severity-<%= issue.severity.downcase -%>"></i><%= h message("severity.#{issue.severity}") -%>
+          </div>
+        </li>
+        <li>
+          <div class="code-issue-details-term"><%= message('status') -%></div>
+          <div class="code-issue-details-value">
+            <i class="icon-status-<%= issue.status.downcase -%>"></i><%= h message("issue.status.#{issue.status}") -%>
+          </div>
+        </li>
+          <li>
+            <div class="code-issue-details-term"><%= message('resolution') -%></div>
+            <div class="code-issue-details-value">
+              <% if issue.resolution %>
+                <i class="icon-status-<%= issue.resolution.downcase -%>"></i><%= h message("issue.resolution.#{issue.resolution}") -%>;
+              <% else %>
+                <%= message('unresolved') -%>
+              <% end %>
+            </div>
+          </li>
+        <li>
+          <div class="code-issue-details-term"><%= message('issue_filter.header.action_plan') -%></div>
+          <div class="code-issue-details-value">
+            <% if issue.actionPlanKey %>
+              <%= h @issue_results.actionPlan(issue).name() -%>
+            <% else %>
+              <%= message('none') -%>
+            <% end %>
+          </div>
+        </li>
+        <li>
+          <div class="code-issue-details-term"><%= message('issue.technical_debt_clear') -%></div>
+          <div class="code-issue-details-value">
+            <%= h Internal.technical_debt.format(issue.technicalDebt) -%>
+          </div>
+        </li>
+        <% if issue.reporter %>
+          <li>
+            <div class="code-issue-details-term"><%= message('reporter') -%></div>
+            <div class="code-issue-details-value"><%= h @issue_results.user(issue.reporter).name -%></div>
+          </li>
+        <% end %>
+        <li>
+          <div class="code-issue-details-term"><%= message('author') -%></div>
+          <div class="code-issue-details-value"><%= h issue.authorLogin -%></div>
+        </li>
+        <li>
+          <div class="code-issue-details-term"><%= message('assignee') -%></div>
+          <div class="code-issue-details-value">
+            <% if issue.assignee %>
+              <%= h @issue_results.user(issue.assignee).name -%>
+            <% else %>
+              <%= message('unassigned') -%>
+            <% end %>
+          </div>
+        </li>
+        <li>
+          <div class="code-issue-details-term"><%= message('created') -%></div>
+          <div class="code-issue-details-value">
+            <%= human_short_date(Api::Utils.java_to_ruby_datetime(issue.updateDate)) -%>
+          </div>
+        </li>
+        <li>
+          <div class="code-issue-details-term"><%= message('updated') -%></div>
+          <div class="code-issue-details-value">
+            <%= human_short_date(Api::Utils.java_to_ruby_datetime(issue.creationDate)) -%>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+
   <%
      issue.comments.each do |comment|
        comment_html_id = "comment-#{comment.key}-#{rand(100)}"
@@ -164,3 +228,9 @@
     </div>
   <% end %>
 </div>
+
+<script>
+  $j(function() {
+    $j('.code-issue-details').tabs();
+  });
+</script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_list.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_list.html.erb
index 731a60c1913..864bb2ea1af 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_list.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/_list.html.erb
@@ -1,126 +1,41 @@
-<%
-   if @issues_result.issues && !@issues_result.issues.empty?
-    colspan = 6
-%>
-  <div id="issues-list">
-    <table class="data width100">
-      <thead>
-        <tr>
-          <th width="1%" nowrap class="column-severity">
-            <%= column_html(@issues_query, @issues_result, message('severity_abbreviated'), message('severity'), 'SEVERITY') %>
-          </th>
-          <th width="1%" nowrap class="column-status">
-            <%= column_html(@issues_query, @issues_result, message('status'), message('status'), 'STATUS') %>
-          </th>
-          <th>
-            <%= message('description') -%>
-          </th>
-          <th nowrap>
-            <%= message('component') -%>
-          </th>
-          <th class="column-assignee">
-            <%= column_html(@issues_query, @issues_result, message('issue_filter.header.assignee'), message('issue_filter.header.assignee'), 'ASSIGNEE') %>
-          </th>
-          <th width="1%" nowrap>
-            <%= message('issue_filter.header.action_plan') -%>
-          </th>
-          <th width="1%" nowrap class="column-update-date">
-            <%= column_html(@issues_query, @issues_result, message('issue_filter.header.update_date'), message('issue_filter.header.update_date'), 'UPDATE_DATE') %>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-      <%
-         @issues_result.issues.each do |issue|
-      %>
-        <tr class="<%= cycle('even', 'odd') -%>">
-          <td width="1%" nowrap>
-            <img src="<%= ApplicationController.root_context -%>/images/priority/<%= issue.severity -%>.png" title="<%= message(issue.severity.downcase).capitalize -%>"/>
-          </td>
-          <td>
-            <%= message("issue.status.#{issue.status}") -%>
-            <% if issue.resolution %>
-              <span class="note" style="white-space: nowrap">[<%= message("issue.resolution.#{issue.resolution}") -%>]</span>
-            <% end %>
-          </td>
-          <td>
-            <a class='open-modal rule-modal issue-detail-link' modal-width='900' href='<%= url_for :controller => 'issue', :action => 'show', :id => issue.key, :modal => true -%>'>
-              <%= h truncate(issue.message, :length => 100) -%></a>
-          </td>
-          <td>
-            <% project = @issues_result.project(issue)
-               component = @issues_result.component(issue) -%>
-            <div class="subtitle"><%= h (truncate(project.name, :length => 100)) -%></div>
-            <% if component %>
-              <!-- Do not display component name when issue is on module -->
-              <% if component.key != project.key %>
-                <%= h component.longName() -%>
-              <% end %>
-            <% else %>
-              <del><%= h issue.componentKey() %></del>
-            <% end %>
-          </td>
-          <td>
-            <%= h @issues_result.user(issue.assignee).name if issue.assignee -%>
-          </td>
-          <td>
-            <%= h @issues_result.actionPlan(issue).name if issue.actionPlanKey() -%>
-          </td>
-          <td width="1%" nowrap>
-            <%= human_short_date(Api::Utils.java_to_ruby_datetime(issue.updateDate())) -%>
-          </td>
-        </tr>
-      <%
-         end
-      %>
-      </tbody>
-      <%= if @ajax_mode
-           paginate_java(@issues_result.paging, :colspan => colspan, :id => 'issue-filter-foot', :include_loading_icon => true,
-                :url_results => url_for({:controller => 'issues', :action => 'search'}.merge(params))) { |label, page_id|
-             link_to_function label, "refreshList('#{@issues_query.sort}', #{@issues_query.asc}, #{page_id})"
-           }
-         else
-           paginate_java(@issues_result.paging, :colspan => colspan, :id => 'issue-filter-foot', :include_loading_icon => true) { |label, page_id|
-               link_to(label, params.merge({:pageIndex => page_id}))
-           }
-        end
-      %>
-    </table>
-  </div>
-<%
-   end
-%>
+<ol class="navigator-results-list">
 
-<script type="text/javascript">
-  var filterCriteria = <%= json_escape(@issues_query_params.to_json) -%>;
+  <% @issues_result.issues.each do |issue| %>
 
-  function refreshList(sort, asc, page) {
-    $j('#issue-filter-foot_pages').hide();
-    $j('#issue-filter-foot_loading').show();
+  <li data-key="<%= h issue.key -%>">
 
-    filterCriteria['sort']=sort;
-    filterCriteria['asc']=asc;
-    filterCriteria['pageIndex']=page;
-    var url = baseUrl + '/issues/search?' + $j.param(filterCriteria);
+    <div class="line line-small">
+      <i class="icon-severity-<%= issue.severity.downcase -%>" title="<%= message(issue.severity.downcase).capitalize -%>"></i><%= message(issue.severity.downcase).capitalize -%>
+      &nbsp;
+      <i class="icon-status-<%= issue.status.downcase -%>" title="<%= message(issue.status.downcase).capitalize -%>"></i><%= message(issue.status.downcase).capitalize -%>
+      <% if issue.resolution %>
+        &nbsp;
+        <i class="icon-resolution-<%= issue.resolution.downcase -%>" title="<%= message(issue.resolution.downcase).capitalize -%>"></i><%= message(issue.resolution.downcase).capitalize -%>
+      <% end %>
 
-    <% if @ajax_mode %>
-      $j('.issues-content').load(url, function () {
-        // As issues will be loaded after open-modal has been processed by jQuery, we have to process manually modal classes
-        processModal();
-      });
-    <% else %>
-      window.location = url;
-    <% end %>
-    return false;
-  }
+      <div class="line-right">
+        <%= human_short_date(Api::Utils.java_to_ruby_datetime(issue.updateDate())) -%>
+      </div>
+    </div>
 
-  function processModal(){
-    $j('.issues-content .open-modal').modal();
-  }
+    <div class="line line-nowrap">
+      <%= h issue.message -%>
+    </div>
+
+    <div class="line">
+      <% project = @issues_result.project(issue)
+         component = @issues_result.component(issue) -%>
+      <div class="subtitle"><%= h (truncate(project.name, :length => 100)) -%></div>
+      <% if component %>
+        <% if component.key != project.key %>
+          <%= h component.longName -%>
+        <% end %>
+      <% else %>
+        <del><%= h issue.componentKey %></del>
+      <% end %>
+    </div>
+
+  </li>
 
-  <% if @ajax_mode %>
-    $j(document).ready(function() {
-      processModal();
-    });
   <% end %>
-</script>
+</ol>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
index 972321c274d..0fd737aefb6 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
@@ -1,47 +1,27 @@
 <div class="navigator">
 
+  <div class="navigator-header">
+    <h1 class="navigator-header-title">Issues</h1>
+  </div>
+
   <div class="navigator-filters"></div>
+  <div class="navigator-results"></div>
+  <div class="navigator-details"></div>
 
+  <div class="navigator-actions"></div>
 
-  <div class="navigator-results">
-    <%= render :partial => 'search' -%>
-  </div>
 </div>
 
-<script type="text/javascript">
-  function onBulkIssues(issues_query_params){
-    // SONAR-4723 pagination parameters should be removed after applying bulk change
-    delete issues_query_params.pageIndex;
-    window.location = baseUrl + '/issues/search?' + jQuery.param(issues_query_params);
-  }
-</script>
 
 <script id="filterBarTemplate" type="text/template">
-  <form method="get" action="<%= ApplicationController.root_context -%>/issues/search">
-    <% if @filter && @filter.id %>
-      <input type="hidden" name="id" value="<%= h @filter.id.to_s -%>">
-    <% end %>
-    <input type="hidden" name="sort" value="<%= h @issues_query.sort -%>"/>
-    <input type="hidden" name="asc" value="<%= h @issues_query.asc -%>"/>
-
-    <div class="navigator-filters-list"></div>
-    <button class="navigator-filter-submit"><%= message('search_verb') -%></button>
-    <a class="navigator-filter-new-search link-action" href="<%= ApplicationController.root_context -%>/issues/search"><%= message 'issue_filter.new_search' -%></a>
-  </form>
+  <div class="navigator-filters-list"></div>
 </script>
 
 <%= render :partial => '/navigator/filter_templates' -%>
+<%= render :partial => '/issues/templates/issue.hbs' -%>
+<%= render :partial => '/issues/templates/issues_actions.hbs' -%>
+<%= render :partial => '/issues/templates/no_issues.hbs' -%>
 
-<%
-   component_labels = Project.by_keys(@issues_query.componentRoots).map{|c| c ? c.name : nil}
-   assignee_keys = @issues_query.assignees
-   assignee_labels = user_labels(@issues_query.assignees)
-   if @issues_query.assigned==false
-     assignee_keys = ['<unassigned>'] + assignee_keys
-     assignee_labels = [message('unassigned')] + assignee_labels
-   end
-   reporter_labels = user_labels(@issues_query.reporters)
-%>
 
 <script>
   _.templateSettings = {
@@ -95,17 +75,7 @@
     }
   });
 
-  var queryParams = [
-    { key: 'componentRoots', value: <%= @issues_query.componentRoots.to_json -%>, text: <%= component_labels.to_json -%> },
-    { key: 'severities[]', value: <%= @issues_query.severities.to_json -%> },
-    { key: 'statuses[]', value: <%= @issues_query.statuses.to_json -%> },
-    { key: 'resolutions[]', value: <%= @issues_query.resolutions.to_json -%> },
-    { key: 'assignees', value: <%= assignee_keys.to_json -%>, text: <%= assignee_labels.to_json -%> },
-    { key: 'reporters', value: <%= @issues_query.reporters.to_json -%>, text: <%= reporter_labels.to_json -%> },
-    { key: 'createdAfter', value: '<%= Api::Utils.format_date(@issues_query.createdAfter) -%>' },
-    { key: 'createdBefore', value: '<%= Api::Utils.format_date(@issues_query.createdBefore) -%>' }
-  ];
-
-  window.SS.IssuesNavigatorApp.start();
-  window.SS.IssuesNavigatorApp.filterBarView.restoreFromQuery(queryParams);
+  jQuery(function() {
+    window.SS.IssuesNavigatorApp.start();
+  });
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb
new file mode 100644
index 00000000000..74cca976847
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb
@@ -0,0 +1,22 @@
+<script id="issue-template" type="text/x-handlebars-template">
+  <div class="line line-small">
+      {{severityIcon severity}}{{capitalize severity}}&nbsp;
+      {{statusIcon status}}{{capitalize status}}
+      {{#if resolution}}
+        &nbsp;{{resolutionIcon resolution}}{{capitalize resolution}}
+      {{/if}}
+
+      <div class="line-right">
+        {{fromNow updateDate}}
+      </div>
+    </div>
+
+    <div class="line line-nowrap" title="{{rule.name}}">
+      {{rule.name}}
+    </div>
+
+    <div class="line">
+      <div class="subtitle">{{project.longName}}</div>
+      {{component.longName}}
+    </div>
+</script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
new file mode 100644
index 00000000000..3f5aea023b4
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
@@ -0,0 +1,7 @@
+<script id="issues-actions-template" type="text/x-handlebars-template">
+  <div class="navigator-actions-order">Order by <i class="icon-arrow-down"></i></div>
+  <div class="navigator-actions-total">
+    Found: {{paging.total}}
+    <span class="navigator-actions-bulk" title="Bulk Change"><i class="icon-settings"></i></span>
+  </div>
+</script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_no_issues.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_no_issues.hbs.erb
new file mode 100644
index 00000000000..1ff2e0ec3b5
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_no_issues.hbs.erb
@@ -0,0 +1,6 @@
+<script id="no-issues-template" type="text/x-handlebars-template">
+  <div class="navigator-results-no-issues">
+    <i class="icon-emoticon-sad"></i>
+    <p>No issues to display</p>
+  </div>
+</script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
index 77d4b16e06d..e0669ded869 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
@@ -29,6 +29,7 @@
     <%= stylesheet_link_tag 'select2-sonar', :media => 'all' %>
     <%= stylesheet_link_tag 'layout', :media => 'all' %>
     <%= stylesheet_link_tag 'style', :media => 'all' %>
+    <%= stylesheet_link_tag 'icons', :media => 'all' %>
     <%= stylesheet_link_tag 'ui', :media => 'all' %>
     <%= stylesheet_link_tag 'sonar-colorizer', :media => 'all' %>
     <%= stylesheet_link_tag 'dashboard', :media => 'all' %>
@@ -44,8 +45,10 @@
     <%= javascript_include_tag 'third-party/underscore-min' %>
     <%= javascript_include_tag 'third-party/backbone-min' %>
     <%= javascript_include_tag 'third-party/backbone.marionette.min' %>
+    <%= javascript_include_tag 'third-party/handlebars' %>
     <%= javascript_include_tag 'third-party/jquery.ba-throttle-debounce.min.js' %>
     <%= javascript_include_tag 'third-party/select2.min' %>
+    <%= javascript_include_tag 'third-party/moment.min' %>
 
     <%= javascript_include_tag 'widgets/widget' %>
     <%= javascript_include_tag 'widgets/bubble-chart' %>
@@ -53,9 +56,12 @@
     <%= javascript_include_tag 'widgets/stack-area' %>
     <%= javascript_include_tag 'widgets/pie-chart' %>
     <%= javascript_include_tag 'widgets/histogram' %>
+    <%= javascript_include_tag 'widgets/word-cloud' %>
 
     <%= javascript_include_tag 'select-list' %>
 
+    <%= javascript_include_tag 'navigator/handlebars-extensions' %>
+
     <%= javascript_include_tag 'navigator/filters/base-filters' %>
     <%= javascript_include_tag 'navigator/filters/select-filters' %>
     <%= javascript_include_tag 'navigator/filters/ajax-select-filters' %>
@@ -65,7 +71,10 @@
     <%= javascript_include_tag 'navigator/filters/metric-filters' %>
     <%= javascript_include_tag 'navigator/filters/favorite-filters' %>
     <%= javascript_include_tag 'navigator/filters/more-criteria-filters' %>
+
+    <%= javascript_include_tag 'navigator/issues' %>
     <%= javascript_include_tag 'navigator/issues-app' %>
+
     <%= javascript_include_tag 'navigator/measures-app' %>
 
     <%= javascript_include_tag 'application' %>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb
index 4696464cc94..709e1caf4d3 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/measures/search.html.erb
@@ -1,4 +1,4 @@
-<div class="navigator">
+<div class="navigator navigator-simple">
 
   <div class="navigator-filters"></div>
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/navigator/_filter_templates.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/navigator/_filter_templates.html.erb
index 15f95ff7521..4f6f4bf5ce3 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/navigator/_filter_templates.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/navigator/_filter_templates.html.erb
@@ -18,7 +18,7 @@
       <input type="checkbox" value="{{ item.id }}"
       {[ if (checked) { ]}checked{[ } ]}>
       {[ if (item.icon) { ]}
-      <img src="{{ item.icon }}" alt="{{ item.text }}">
+      <i class="icon-{{ item.icon }}"></i>
       {[ } ]}
       <span>
         {{ item.text }}