From dfd156972df7d47465e9222e1979fa9c91b702aa Mon Sep 17 00:00:00 2001
From: Kushal Pandya <kushal@gitlab.com>
Date: Tue, 13 Dec 2016 18:14:04 +0530
Subject: [PATCH] Refactor build log scroll button logic to prevent icon
overlaps
---
app/assets/javascripts/build.js | 27 ++++++++++++++++-----------
1 file changed, 16 insertions(+), 11 deletions(-)
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index d8c10457a4a..36612957b39 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -28,6 +28,7 @@
this.$downBuildTrace = $('#down-build-trace');
this.$scrollTopBtn = $('#scroll-top');
this.$scrollBottomBtn = $('#scroll-bottom');
+ this.$buildRefreshAnimation = $('.js-build-refresh');
clearInterval(Build.interval);
// Init breakpoint checker
@@ -91,7 +92,7 @@
$('.js-build-output').html(buildData.trace_html);
if (removeRefreshStatuses.indexOf(buildData.status) >= 0) {
this.initScrollMonitor();
- return $('.js-build-refresh').remove();
+ return this.$buildRefreshAnimation.remove();
}
}.bind(this)
});
@@ -157,23 +158,27 @@
// - Show Bottom Arrow button
// - Disable Autoscroll and hide indicator (when build is running)
Build.prototype.initScrollMonitor = function() {
- if (gl.utils.isInViewport(this.$upBuildTrace[0])) { // User is at Top of Build Log
- this.$scrollTopBtn.hide();
+ if (!gl.utils.isInViewport(this.$upBuildTrace[0]) && !gl.utils.isInViewport(this.$downBuildTrace[0])) { // User is somewhere in middle of Build Log
+ this.$scrollTopBtn.show();
this.$scrollBottomBtn.show();
- }
- if (gl.utils.isInViewport(this.$downBuildTrace[0])) { // User is at Bottom of Build Log
+ // Hide Autoscroll Status Indicator
+ this.$autoScrollContainer.hide();
+ this.$autoScrollStatusText.removeClass('animate');
+ } else if (gl.utils.isInViewport(this.$upBuildTrace[0]) && !gl.utils.isInViewport(this.$downBuildTrace[0])) { // User is at Top of Build Log
+ this.$scrollTopBtn.hide();
+ this.$scrollBottomBtn.show();
+ } else if ((!gl.utils.isInViewport(this.$upBuildTrace[0]) && gl.utils.isInViewport(this.$downBuildTrace[0])) ||
+ gl.utils.isInViewport(this.$buildRefreshAnimation[0])) { // User is at Bottom of Build Log
this.$scrollTopBtn.show();
this.$scrollBottomBtn.hide();
// Show and Reposition Autoscroll Status Indicator
this.$autoScrollContainer.css({ top: this.$body.outerHeight() - 75 }).fadeIn(100);
this.$autoScrollStatusText.addClass('animate');
- }
-
- if (!gl.utils.isInViewport(this.$upBuildTrace[0]) && !gl.utils.isInViewport(this.$downBuildTrace[0])) { // User is somewhere in middle of Build Log
- this.$scrollTopBtn.show();
- this.$scrollBottomBtn.show();
+ } else if (gl.utils.isInViewport(this.$upBuildTrace[0]) && gl.utils.isInViewport(this.$downBuildTrace[0])) { // Build Log height is small
+ this.$scrollTopBtn.hide();
+ this.$scrollBottomBtn.hide();
// Hide Autoscroll Status Indicator
this.$autoScrollContainer.hide();
@@ -182,7 +187,7 @@
if (this.buildStatus === "running" || this.buildStatus === "pending") {
// Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
- this.$autoScrollStatus.data("state", gl.utils.isInViewport($('.js-build-refresh')[0]) ? 'enabled' : 'disabled');
+ this.$autoScrollStatus.data("state", gl.utils.isInViewport(this.$buildRefreshAnimation[0]) ? 'enabled' : 'disabled');
}
};
--
GitLab