From 454c79fce0a97005be2db98a3cf4ab0074bfdf32 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Tue, 20 Jun 2017 16:45:26 +0200
Subject: [PATCH] Fixes scrolling + improves Performance through assigning
found $ elements to variables
---
app/assets/javascripts/right_sidebar.js | 21 +++++++++++++++------
app/assets/stylesheets/pages/issuable.scss | 2 +-
2 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index b71c3097706..da7c0c5a36c 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -7,6 +7,13 @@ import Cookies from 'js-cookie';
function Sidebar(currentUser) {
this.toggleTodo = this.toggleTodo.bind(this);
this.sidebar = $('aside');
+
+ this.$sidebarInner = this.sidebar.find('.issuable-sidebar');
+ this.$navGitlab = $('.navbar-gitlab');
+ this.$layoutNav = $('.layout-nav');
+ this.$subScroll = $('.sub-nav-scroll');
+ this.$rightSidebar = $('.js-right-sidebar');
+
this.removeListeners();
this.addEventListeners();
}
@@ -21,14 +28,15 @@ import Cookies from 'js-cookie';
Sidebar.prototype.addEventListeners = function() {
const $document = $(document);
- const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight, 10);
+ const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight.bind(this), 20);
+ const debouncedSetSidebarHeight = _.debounce(this.setSidebarHeight.bind(this), 200);
this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
$('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
$('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
$('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
$(window).on('resize', () => throttledSetSidebarHeight());
- $document.on('scroll', () => throttledSetSidebarHeight());
+ $document.on('scroll', () => debouncedSetSidebarHeight());
$document.on('click', '.js-sidebar-toggle', function(e, triggered) {
var $allGutterToggleIcons, $this, $thisIcon;
e.preventDefault();
@@ -207,13 +215,14 @@ import Cookies from 'js-cookie';
};
Sidebar.prototype.setSidebarHeight = function() {
- const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight() + $('.sub-nav-scroll').outerHeight();
- const $rightSidebar = $('.js-right-sidebar');
+ const $navHeight = this.$navGitlab.outerHeight() + this.$layoutNav.outerHeight() + (this.$subScroll ? this.$subScroll.outerHeight() : 0);
const diff = $navHeight - $(window).scrollTop();
if (diff > 0) {
- $rightSidebar.outerHeight($(window).height() - diff);
+ this.$rightSidebar.outerHeight($(window).height() - diff);
+ this.$sidebarInner.height('100%');
} else {
- $rightSidebar.outerHeight('100%');
+ this.$rightSidebar.outerHeight('100%');
+ this.$sidebarInner.height('');
}
};
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b3f310ff67d..cd363d68fa9 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -204,7 +204,7 @@
.issuable-sidebar {
width: calc(100% + 100px);
- height: 100%;
+ height: calc(100% - #{$header-height});
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
--
GitLab