Remove nicescroll from job trace
This commit is contained in:
Filipa Lacerda
Phil Hughes
parent
2368ffd9ef
commit
481040e229
3 changed files with 59 additions and 48 deletions
|
|
@ -20,6 +20,7 @@ window.Build = (function () {
|
|||
this.$document = $(document);
|
||||
this.logBytes = 0;
|
||||
this.scrollOffsetPadding = 30;
|
||||
this.hasBeenScrolled = false;
|
||||
|
||||
this.updateDropdown = this.updateDropdown.bind(this);
|
||||
this.getBuildTrace = this.getBuildTrace.bind(this);
|
||||
|
|
@ -62,6 +63,15 @@ window.Build = (function () {
|
|||
.off('click')
|
||||
.on('click', this.scrollToBottom.bind(this));
|
||||
|
||||
const scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
|
||||
|
||||
this.$scrollContainer
|
||||
.off('scroll')
|
||||
.on('scroll', () => {
|
||||
this.hasBeenScrolled = true;
|
||||
scrollThrottled();
|
||||
});
|
||||
|
||||
$(window)
|
||||
.off('resize.build')
|
||||
.on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
|
||||
|
|
@ -70,25 +80,16 @@ window.Build = (function () {
|
|||
|
||||
// eslint-disable-next-line
|
||||
this.getBuildTrace()
|
||||
.then(() => this.makeTraceScrollable())
|
||||
.then(() => this.scrollToBottom());
|
||||
.then(() => this.toggleScroll())
|
||||
.then(() => {
|
||||
if (!this.hasBeenScrolled) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
});
|
||||
|
||||
this.verifyTopPosition();
|
||||
}
|
||||
|
||||
Build.prototype.makeTraceScrollable = function () {
|
||||
this.$scrollContainer.niceScroll({
|
||||
cursorcolor: '#fff',
|
||||
cursoropacitymin: 1,
|
||||
cursorwidth: '7px',
|
||||
railpadding: { top: 5, bottom: 5, right: 5 },
|
||||
});
|
||||
|
||||
this.$scrollContainer.on('scroll', _.throttle(this.toggleScroll.bind(this), 100));
|
||||
|
||||
this.toggleScroll();
|
||||
};
|
||||
|
||||
Build.prototype.canScroll = function () {
|
||||
return (this.$scrollContainer.prop('scrollHeight') - this.scrollOffsetPadding) > this.$scrollContainer.height();
|
||||
};
|
||||
|
|
@ -104,12 +105,11 @@ window.Build = (function () {
|
|||
*
|
||||
*/
|
||||
Build.prototype.toggleScroll = function () {
|
||||
const bottomScroll = this.$scrollContainer.scrollTop() +
|
||||
this.scrollOffsetPadding +
|
||||
this.$scrollContainer.height();
|
||||
const currentPosition = this.$scrollContainer.scrollTop();
|
||||
const bottomScroll = currentPosition + this.$scrollContainer.innerHeight();
|
||||
|
||||
if (this.canScroll()) {
|
||||
if (this.$scrollContainer.scrollTop() === 0) {
|
||||
if (currentPosition === 0) {
|
||||
this.toggleDisableButton(this.$scrollTopBtn, true);
|
||||
this.toggleDisableButton(this.$scrollBottomBtn, false);
|
||||
} else if (bottomScroll === this.$scrollContainer.prop('scrollHeight')) {
|
||||
|
|
@ -123,12 +123,14 @@ window.Build = (function () {
|
|||
};
|
||||
|
||||
Build.prototype.scrollToTop = function () {
|
||||
this.$scrollContainer.getNiceScroll(0).doScrollTop(0);
|
||||
this.hasBeenScrolled = true;
|
||||
this.$scrollContainer.scrollTop(0);
|
||||
this.toggleScroll();
|
||||
};
|
||||
|
||||
Build.prototype.scrollToBottom = function () {
|
||||
this.$scrollContainer.getNiceScroll(0).doScrollTo(this.$scrollContainer.prop('scrollHeight'));
|
||||
this.hasBeenScrolled = true;
|
||||
this.$scrollContainer.scrollTop(this.$scrollContainer.prop('scrollHeight'));
|
||||
this.toggleScroll();
|
||||
};
|
||||
|
||||
|
|
@ -216,7 +218,11 @@ window.Build = (function () {
|
|||
Build.timeout = setTimeout(() => {
|
||||
//eslint-disable-next-line
|
||||
this.getBuildTrace()
|
||||
.then(() => this.scrollToBottom());
|
||||
.then(() => {
|
||||
if (!this.hasBeenScrolled) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
});
|
||||
}, 4000);
|
||||
} else {
|
||||
this.$buildRefreshAnimation.remove();
|
||||
|
|
@ -253,7 +259,7 @@ window.Build = (function () {
|
|||
|
||||
this.verifyTopPosition();
|
||||
|
||||
if (this.$scrollContainer.getNiceScroll(0)) {
|
||||
if (this.canScroll()) {
|
||||
this.toggleScroll();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -71,7 +71,9 @@
|
|||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px outset $white-light;
|
||||
background: $gray-light;
|
||||
border: 1px solid $gray-normal;
|
||||
color: $gl-text-color;
|
||||
|
||||
.truncated-info {
|
||||
margin: 0 auto;
|
||||
|
|
@ -82,7 +84,7 @@
|
|||
}
|
||||
|
||||
.raw-link {
|
||||
color: inherit;
|
||||
color: $gl-text-color;
|
||||
margin-left: 5px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -93,17 +95,25 @@
|
|||
display: flex;
|
||||
align-self: center;
|
||||
font-size: 15px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
display: block;
|
||||
fill: $white-light;
|
||||
fill: $gl-text-color;
|
||||
}
|
||||
|
||||
a,
|
||||
.controllers-buttons,
|
||||
.btn-scroll {
|
||||
margin: 0 8px;
|
||||
color: $white-light;
|
||||
color: $gl-text-color;
|
||||
height: 15px;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.controllers-buttons {
|
||||
margin: 1px 10px;
|
||||
}
|
||||
|
||||
.btn-scroll.animate {
|
||||
|
|
@ -137,9 +147,9 @@
|
|||
top: 35px;
|
||||
left: 10px;
|
||||
bottom: 0;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 20px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding: 10px 20px 20px 5px;
|
||||
}
|
||||
|
||||
.environment-information {
|
||||
|
|
|
|||
|
|
@ -66,29 +66,24 @@
|
|||
.controllers
|
||||
- if @build.has_trace?
|
||||
= link_to raw_namespace_project_job_path(@project.namespace, @project, @build),
|
||||
title: 'Open raw trace',
|
||||
title: 'Show complete raw',
|
||||
data: { placement: 'top', container: 'body' },
|
||||
class: 'js-raw-link-controller has-tooltip' do
|
||||
= icon('download')
|
||||
class: 'js-raw-link-controller has-tooltip controllers-buttons' do
|
||||
= icon('file-text-o')
|
||||
|
||||
- if can?(current_user, :update_build, @project) && @build.erasable?
|
||||
= link_to erase_namespace_project_job_path(@project.namespace, @project, @build),
|
||||
method: :post,
|
||||
data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
|
||||
title: 'Erase Build',
|
||||
class: 'has-tooltip js-erase-link' do
|
||||
title: 'Erase job log',
|
||||
class: 'has-tooltip js-erase-link controllers-buttons' do
|
||||
= icon('trash')
|
||||
|
||||
%button.js-scroll-up.btn-scroll.btn-transparent.btn-blank.has-tooltip{ type: 'button',
|
||||
disabled: true,
|
||||
title: 'Scroll Up',
|
||||
data: { placement: 'top', container: 'body'} }
|
||||
= custom_icon('scroll_up')
|
||||
%button.js-scroll-down.btn-scroll.btn-transparent.btn-blank.has-tooltip{ type: 'button',
|
||||
disabled: true,
|
||||
title: 'Scroll Down',
|
||||
data: { placement: 'top', container: 'body'} }
|
||||
= custom_icon('scroll_down')
|
||||
.has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
|
||||
%button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
|
||||
= custom_icon('scroll_up')
|
||||
.has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
|
||||
%button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
|
||||
= custom_icon('scroll_down')
|
||||
.bash.sticky.js-scroll-container
|
||||
%code.js-build-output
|
||||
.build-loader-animation.js-build-refresh
|
||||
|
|
|
|||
Loading…
Reference in a new issue