SONAR-5078 Fix different issues of new design

8 files changed, 43 insertions, 29 deletions

diff --git a/sonar-server/src/main/coffee/coding-rules/views/coding-rules-bulk-change-dropdown-view.coffee b/sonar-server/src/main/coffee/coding-rules/views/coding-rules-bulk-change-dropdown-view.coffee
index 3353b9ccc4c..3edc4c8423f 100644
--- a/sonar-server/src/main/coffee/coding-rules/views/coding-rules-bulk-change-dropdown-view.coffee
+++ b/sonar-server/src/main/coffee/coding-rules/views/coding-rules-bulk-change-dropdown-view.coffee
@@ -31,6 +31,9 @@ define [
     onRender: ->
       jQuery('body').append @el
       jQuery('body').off('click.bulk-change').on 'click.bulk-change', => @hide()
+      @$el.css
+        top: jQuery('.navigator-actions').offset().top + jQuery('.navigator-actions').height() + 1
+        left: jQuery('.navigator-actions').offset().left + jQuery('.navigator-actions').outerWidth() - @$el.outerWidth()
 
 
     toggle: ->
diff --git a/sonar-server/src/main/js/issues/app.js b/sonar-server/src/main/js/issues/app.js
index 26543828640..f2a6d04068b 100644
--- a/sonar-server/src/main/js/issues/app.js
+++ b/sonar-server/src/main/js/issues/app.js
@@ -312,6 +312,13 @@ requirejs(
               detailsHeight = jQuery(window).height() - detailsEl.offset().top -
                   parseInt(detailsEl.css('margin-bottom'), 10) - footerHeight;
           detailsEl.width(detailsWidth).height(detailsHeight);
+
+          var resultsLoadingEl = jQuery('.navigator-results-loader');
+          resultsLoadingEl
+              .css('top', resultsEl.offset().top)
+              .css('left', resultsEl.offset().left)
+              .width(resultsEl.width() + 10)
+              .height(resultsEl.height() + 10);
         };
         jQuery(window).on('resize', this.onResize);
         this.onResize();
@@ -329,6 +336,7 @@ requirejs(
         if (resultsWidth) {
           jQuery('.navigator-results').width(+resultsWidth);
           jQuery('.navigator-side').width(+resultsWidth + 20);
+          this.onResize();
         }
       });
 
@@ -428,12 +436,12 @@ requirejs(
         this.storeQuery(query, this.issues.sorting);
 
         var that = this;
-        this.issuesView.$el.addClass('navigator-fetching');
+        jQuery('.navigator-results').addClass('fetching');
         if (firstPage) {
           this.issues.fetch({
             data: fetchQuery,
             success: function () {
-              that.issuesView.$el.removeClass('navigator-fetching');
+              jQuery('.navigator-results').removeClass('fetching');
               that.issuesView.selectFirst();
             }
           });
@@ -443,7 +451,7 @@ requirejs(
             data: fetchQuery,
             remove: false,
             success: function () {
-              that.issuesView.$el.removeClass('navigator-fetching');
+              jQuery('.navigator-results').removeClass('fetching');
             }
           });
         }
diff --git a/sonar-server/src/main/js/issues/extra.js b/sonar-server/src/main/js/issues/extra.js
index 0d83417e8c6..9b5f92376b3 100644
--- a/sonar-server/src/main/js/issues/extra.js
+++ b/sonar-server/src/main/js/issues/extra.js
@@ -237,16 +237,16 @@ define(
       });
 
 
-      var IssuesView = Marionette.CollectionView.extend({
-        tagName: 'ol',
-        className: 'navigator-results-list',
+      var IssuesView = Marionette.CompositeView.extend({
+        template: Handlebars.compile(jQuery('#issues-template').html() || ''),
+        itemViewContainer: '.navigator-results-list',
         itemView: IssueView,
         emptyView: NoIssuesView,
 
 
         initialize: function() {
           var openIssue = function(el) { el.click(); };
-          this.openRule = _.debounce(openIssue, 300);
+          this.openIssue = _.debounce(openIssue, 300);
         },
 
 
@@ -262,7 +262,7 @@ define(
           this.$('.active').removeClass('active');
           el.addClass('active');
           if (open) {
-            this.openRule(el);
+            this.openIssue(el);
           }
         },
 
@@ -276,7 +276,7 @@ define(
         selectNext: function() {
           if (this.selected < this.collection.length - 1) {
             this.selected++;
-            var child = this.$el.children().eq(this.selected),
+            var child = this.$(this.itemViewContainer).children().eq(this.selected),
                 container = jQuery('.navigator-results'),
                 containerHeight = container.height(),
                 bottom = child.position().top + child.outerHeight();
diff --git a/sonar-server/src/main/less/coding-rules.less b/sonar-server/src/main/less/coding-rules.less
index 359c2737498..a3c2eabc92f 100644
--- a/sonar-server/src/main/less/coding-rules.less
+++ b/sonar-server/src/main/less/coding-rules.less
@@ -272,10 +272,8 @@
 
 // Bulk Change
 .coding-rules-bulk-change-dropdown {
-  position: fixed;
+  position: absolute;
   z-index: 10;
-  top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorFacetsHeight + @navigatorStatusHeight - 1px;
-  left: @navigatorResultsWidth - 200px;
   width: 200px;
   border: 1px solid @navigatorBorderLightColor;
   .box-sizing(border-box);
diff --git a/sonar-server/src/main/less/navigator/base.less b/sonar-server/src/main/less/navigator/base.less
index ca6ded4c1e9..a7f71937a96 100644
--- a/sonar-server/src/main/less/navigator/base.less
+++ b/sonar-server/src/main/less/navigator/base.less
@@ -209,7 +209,7 @@
 
 // Notes
 .navigator-notes {
-  margin: 0 @navigatorPadding @navigatorPadding 0;
+  margin: 0 @navigatorPadding @navigatorPadding @navigatorPadding;
   padding: 0 @navigatorPadding;
   border: 1px solid @navigatorBorderColor;
   background-color: @navigatorBarBackground;
@@ -291,6 +291,18 @@
   background-color: @white;
   overflow-x: hidden;
   overflow-y: auto;
+
+  &.fetching {
+    .navigator-results-list { visibility: hidden; }
+    .navigator-results-loader { display: block; }
+  }
+}
+
+.navigator-results-loader {
+  position: fixed;
+  z-index: 10;
+  display: none;
+  background-color: #fff;
 }
 
 .navigator-results-list {
@@ -336,19 +348,6 @@
   }
 
   & > li + li { margin-top: -1px; }
-
-  &.navigator-fetching {
-
-    & > li .line-nowrap {
-      text-overflow: clip; /* thanks to FF */
-    }
-
-    &:before {
-      position: absolute;
-      z-index: 3;
-      top: 0; bottom: 0; left: 0; right: 0;
-    }
-  }
 }
 
 .navigator-results-no-results {
diff --git a/sonar-server/src/main/less/navigator/filters.less b/sonar-server/src/main/less/navigator/filters.less
index 47912285bc1..918003a0e86 100644
--- a/sonar-server/src/main/less/navigator/filters.less
+++ b/sonar-server/src/main/less/navigator/filters.less
@@ -26,12 +26,11 @@
 
 .navigator-filter-submit {
   position: absolute;
-  top: 0; right: 0;
-  .size(85px, 100%);
+  bottom: 0; right: 0;
+  .size(85px, @navigatorFiltersHeight);
   margin: -1px -1px -1px 0;
   padding: 0;
   border: 1px solid darken(@blue, 10%);
-  .box-sizing(content-box);
   background: @blue;
   color: #fff;
   font-weight: normal;
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 385c8517c4e..0962c0f660d 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
@@ -26,6 +26,7 @@
 <%= render :partial => '/issues/templates/header.hbs' -%>
 <%= render :partial => '/issues/templates/issue.hbs' -%>
 <%= render :partial => '/issues/templates/issues_actions.hbs' -%>
+<%= render :partial => '/issues/templates/issues.hbs' -%>
 <%= render :partial => '/issues/templates/no_issues.hbs' -%>
 <%= render :partial => '/issues/templates/issues_details_favorite_filter.hbs' -%>
 <%= render :partial => '/issues/templates/issue_detail.hbs' -%>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues.hbs.erb
new file mode 100644
index 00000000000..a4c8b45b907
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues.hbs.erb
@@ -0,0 +1,6 @@
+<script id="issues-template" type="text/x-handlebars-template">
+  <ol class="navigator-results-list"></ol>
+  <div class="navigator-results-loader">
+    <i class="spinner"></i>
+  </div>
+</script>