Use gl.utils.isInViewport and improve gl.utils.animateToElement.

4 files changed, 33 insertions, 22 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 31332cbe488..7bf62cfd927 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -128,18 +128,17 @@
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
 
-  })(window);
+    gl.utils.animateToElement = function($el) {
+      var top = $el.offset().top;
+      gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height();
+      gl.navLinksHieght = gl.navLinksHieght || $('.nav-links').height();
+      gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height();
+
+      return $('body, html').animate({
+        scrollTop: top - (gl.navBarHeight + gl.navLinksHieght + gl.mrTabsHeight)
+      }, 200);
+    };
 
-  gl.utils.isElementVisibleInViewport = function(el) {
-    var rect = el.getBoundingClientRect();
-    var height = Math.max(document.documentElement.clientHeight, window.innerHeight);
-    return !(rect.bottom - 110 < 0 || rect.top - height >= 0); // -110 for sticky GitLab navigation header
-  };
-
-  gl.utils.animateToElement = function($el) {
-    return $('body, html').animate({
-      scrollTop: $el.offset().top - 110
-    }, 200);
-  };
+  })(window);
 
 }).call(this);
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index ef545ae8ad2..8400d615818 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -498,10 +498,9 @@
       }
       else {
         var $buttons = $el.find('.note-form-actions');
-        var isButtonsVisible = gl.utils.isElementVisibleInViewport($buttons[0]);
-        var isWidgetVisible = gl.utils.isElementVisibleInViewport($el[0]);
+        var isWidgetVisible = gl.utils.isInViewport($el[0]);
 
-        if (!isButtonsVisible || !isWidgetVisible) {
+        if (!isWidgetVisible) {
           gl.utils.animateToElement($el);
         }
 
@@ -536,7 +535,7 @@
         }
       }
 
-      $note.find('.js-note-attachment-delete').show(); // Show the attachment delete link
+      $note.find('.js-note-attachment-delete').show();
       $editForm.addClass('current-note-edit-form');
       $note.addClass('is-editting');
       this.putEditFormInPlace($target);
@@ -580,11 +579,11 @@
     };
 
     Notes.prototype.removeNoteEditForm = function(note) {
-      var form = note.find(".current-note-edit-form");
-      note.removeClass("is-editting");
-      form.removeClass("current-note-edit-form");
+      var form = note.find('.current-note-edit-form');
+      note.removeClass('is-editting');
+      form.removeClass('current-note-edit-form');
       // Replace markdown textarea text with original note text.
-      return form.find(".js-note-text").val(form.find('form.edit-note').data('original-note'));
+      return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note'));
     };
 
 
@@ -885,7 +884,6 @@
     };
 
     Notes.prototype.putEditFormInPlace = function($el) {
-
       var $editForm = $(this.getEditFormSelector($el));
       var $note = $el.closest('.note');
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 10a9df18c47..43fab67ad75 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -585,3 +585,17 @@ ul.notes {
     }
   }
 }
+
+// Merge request notes in diffs
+.diff-file {
+  // Diff is side by side
+  .notes_content.parallel .note-header .note-headline-light {
+    display: block;
+    position: relative;
+  }
+  // Diff is inline
+  .notes_content .note-header .note-headline-light {
+    display: inline-block;
+    position: relative;
+  }
+}
diff --git a/spec/javascripts/zen_mode_spec.js b/spec/javascripts/zen_mode_spec.js
index 2723956a680..5b4d007c8f7 100644
--- a/spec/javascripts/zen_mode_spec.js
+++ b/spec/javascripts/zen_mode_spec.js
@@ -67,7 +67,7 @@
     return $('.notes-form .js-zen-enter').click();
   };
 
-  exitZen = function() { // Ohmmmmmmm
+  exitZen = function() {
     return $('.notes-form .js-zen-leave').click();
   };