diff options
| author | Kushal Pandya <kushal@gitlab.com> | 2016-12-13 18:14:04 +0530 |
|---|---|---|
| committer | Kushal Pandya <kushal@gitlab.com> | 2016-12-21 13:16:18 +0530 |
| commit | dfd156972df7d47465e9222e1979fa9c91b702aa (patch) | |
| tree | 206b2a7f221b7fd3917a9022e89eecb5cfd3b287 | |
| parent | 3ed1f6dca770f11e9b86eb3163bbd5476c94e4e0 (diff) | |
| download | gitlab-ce-dfd156972df7d47465e9222e1979fa9c91b702aa.tar.gz | |
Refactor build log scroll button logic to prevent icon overlaps
| -rw-r--r-- | app/assets/javascripts/build.js | 27 |
1 files 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'); } }; |