From: Stas Vilchik <vilchiks@gmail.com>
Date: Mon, 2 Feb 2015 09:49:04 +0000 (+0100)
Subject: SONAR-6041 fix the navigation on top
X-Git-Tag: 5.1-RC1~469
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=9a967ab6d4fc570f867cadf0bcad32cefa7e7f62;p=sonarqube.git

SONAR-6041 fix the navigation on top
---

diff --git a/server/sonar-web/src/main/coffee/issues/layout.coffee b/server/sonar-web/src/main/coffee/issues/layout.coffee
index 1c7a2f7ff74..06815bfe844 100644
--- a/server/sonar-web/src/main/coffee/issues/layout.coffee
+++ b/server/sonar-web/src/main/coffee/issues/layout.coffee
@@ -17,28 +17,14 @@ define [
       workspaceComponentViewerRegion: '.issues-workspace-component-viewer'
 
 
-    initialize: ->
-      @topOffset = 0
-      $(window).on 'scroll.issues-layout', (=> @onScroll())
-
-
-    onClose: ->
-      $(window).off 'scroll.issues-layout'
-
-
     onRender: ->
       @$(@filtersRegion.el).addClass('hidden') if @options.app.state.get('isContext')
+      $('.search-navigator').addClass 'sticky'
       top = $('.search-navigator').offset().top
-      @topOffset = top
+      @$('.search-navigator-workspace-header').css top: top
       @$('.search-navigator-side').css({ top: top }).isolatedScroll()
 
 
-    onScroll: ->
-      scrollTop = $(window).scrollTop()
-      $('.search-navigator').toggleClass 'sticky', scrollTop >= @topOffset
-      @$('.search-navigator-side').css top: Math.max(0, Math.min(@topOffset - scrollTop, @topOffset))
-
-
     showSpinner: (region) ->
       @[region].show new Marionette.ItemView
         template: _.template('<i class="spinner"></i>')
diff --git a/server/sonar-web/src/main/js/coding-rules/layout.js b/server/sonar-web/src/main/js/coding-rules/layout.js
index 87259bbb8e9..8dea2fe326f 100644
--- a/server/sonar-web/src/main/js/coding-rules/layout.js
+++ b/server/sonar-web/src/main/js/coding-rules/layout.js
@@ -15,32 +15,14 @@ define([
       workspaceDetailsRegion: '.search-navigator-workspace-details'
     },
 
-    initialize: function () {
-      var that = this;
-      this.topOffset = 0;
-      $(window).on('scroll.search-navigator-layout', function () {
-        that.onScroll();
-      });
-    },
-
-    onClose: function () {
-      $(window).off('scroll.search-navigator-layout');
-    },
-
     onRender: function () {
-      var top = $('.search-navigator').offset().top;
-      this.topOffset = top;
+      var navigator = $('.search-navigator');
+      navigator.addClass('sticky');
+      var top = navigator.offset().top;
+      this.$('.search-navigator-workspace-header').css({ top: top });
       this.$('.search-navigator-side').css({ top: top }).isolatedScroll();
     },
 
-    onScroll: function () {
-      var scrollTop = $(window).scrollTop();
-      $('.search-navigator').toggleClass('sticky', scrollTop >= this.topOffset);
-      this.$('.search-navigator-side').css({
-        top: Math.max(0, Math.min(this.topOffset - scrollTop, this.topOffset))
-      });
-    },
-
     showDetails: function () {
       this.scroll = $(window).scrollTop();
       $('.search-navigator').addClass('search-navigator-extended-view');
diff --git a/server/sonar-web/src/main/js/nav/app.js b/server/sonar-web/src/main/js/nav/app.js
index ffacb9dab4a..12b5571bfd1 100644
--- a/server/sonar-web/src/main/js/nav/app.js
+++ b/server/sonar-web/src/main/js/nav/app.js
@@ -39,6 +39,11 @@ define([
     });
   }
 
+  App.addInitializer(function () {
+    var navHeight = $('.navbar-global').outerHeight() + $('.navbar-context').outerHeight();
+    $(document.body).css('padding-top', navHeight).data('top-offset', navHeight);
+  });
+
   window.requestMessages().done(function () {
     App.start();
   });
diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/navbar.less
index 87234f80161..0a686693e49 100644
--- a/server/sonar-web/src/main/less/navbar.less
+++ b/server/sonar-web/src/main/less/navbar.less
@@ -14,6 +14,9 @@
 }
 
 .navbar {
+  position: fixed;
+  left: 0;
+  right: 0;
   .clearfix;
   height: @navbarHeight;
 }
@@ -132,6 +135,8 @@
 
 
 .navbar-global {
+  top: 0;
+  z-index: 499;
   background-color: @navbarGlobalBackground;
 
   .navbar-nav > li > a {
@@ -175,6 +180,8 @@
 
 
 .navbar-context {
+  top: @navbarHeight;
+  z-index: 498;
   height: auto;
   background-color: @navbarContextBackground;