kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Remove nicescroll from job trace

Browse source
This commit is contained in:
Filipa Lacerda 2017-06-09 11:58:52 +00:00 committed by Phil Hughes
parent 2368ffd9ef
commit 481040e229
3 changed files with 59 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/assets/javascripts/build.js
View file

@ -20,6 +20,7 @@ window.Build = (function () {
this.$document = $(document); this.$document = $(document);
this.logBytes = 0; this.logBytes = 0;
this.scrollOffsetPadding = 30; this.scrollOffsetPadding = 30;
this.hasBeenScrolled = false;
this.updateDropdown = this.updateDropdown.bind(this); this.updateDropdown = this.updateDropdown.bind(this);
this.getBuildTrace = this.getBuildTrace.bind(this); this.getBuildTrace = this.getBuildTrace.bind(this);
@ -62,6 +63,15 @@ window.Build = (function () {
.off('click') .off('click')
.on('click', this.scrollToBottom.bind(this)); .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) $(window)
.off('resize.build') .off('resize.build')
.on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100)); .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
@ -70,25 +80,16 @@ window.Build = (function () {
// eslint-disable-next-line // eslint-disable-next-line
this.getBuildTrace() this.getBuildTrace()
.then(() => this.makeTraceScrollable()) .then(() => this.toggleScroll())
.then(() => this.scrollToBottom()); .then(() => {
if (!this.hasBeenScrolled) {
this.scrollToBottom();
}
});
this.verifyTopPosition(); 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 () { Build.prototype.canScroll = function () {
return (this.$scrollContainer.prop('scrollHeight') - this.scrollOffsetPadding) > this.$scrollContainer.height(); return (this.$scrollContainer.prop('scrollHeight') - this.scrollOffsetPadding) > this.$scrollContainer.height();
}; };
@ -104,12 +105,11 @@ window.Build = (function () {
* *
*/ */
Build.prototype.toggleScroll = function () { Build.prototype.toggleScroll = function () {
const bottomScroll = this.$scrollContainer.scrollTop() + const currentPosition = this.$scrollContainer.scrollTop();
this.scrollOffsetPadding + const bottomScroll = currentPosition + this.$scrollContainer.innerHeight();
this.$scrollContainer.height();
if (this.canScroll()) { if (this.canScroll()) {
if (this.$scrollContainer.scrollTop() === 0) { if (currentPosition === 0) {
this.toggleDisableButton(this.$scrollTopBtn, true); this.toggleDisableButton(this.$scrollTopBtn, true);
this.toggleDisableButton(this.$scrollBottomBtn, false); this.toggleDisableButton(this.$scrollBottomBtn, false);
} else if (bottomScroll === this.$scrollContainer.prop('scrollHeight')) { } else if (bottomScroll === this.$scrollContainer.prop('scrollHeight')) {
@ -123,12 +123,14 @@ window.Build = (function () {
}; };
Build.prototype.scrollToTop = function () { Build.prototype.scrollToTop = function () {
this.$scrollContainer.getNiceScroll(0).doScrollTop(0); this.hasBeenScrolled = true;
this.$scrollContainer.scrollTop(0);
this.toggleScroll(); this.toggleScroll();
}; };
Build.prototype.scrollToBottom = function () { 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(); this.toggleScroll();
}; };
@ -216,7 +218,11 @@ window.Build = (function () {
Build.timeout = setTimeout(() => { Build.timeout = setTimeout(() => {
//eslint-disable-next-line //eslint-disable-next-line
this.getBuildTrace() this.getBuildTrace()
.then(() => this.scrollToBottom()); .then(() => {
if (!this.hasBeenScrolled) {
this.scrollToBottom();
}
});
}, 4000); }, 4000);
} else { } else {
this.$buildRefreshAnimation.remove(); this.$buildRefreshAnimation.remove();
@ -253,7 +259,7 @@ window.Build = (function () {
this.verifyTopPosition(); this.verifyTopPosition();
if (this.$scrollContainer.getNiceScroll(0)) { if (this.canScroll()) {
this.toggleScroll(); this.toggleScroll();
} }
}; };

28
app/assets/stylesheets/pages/builds.scss
View file

@ -71,7 +71,9 @@
height: 35px; height: 35px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
border-bottom: 1px outset $white-light; background: $gray-light;
border: 1px solid $gray-normal;
color: $gl-text-color;
.truncated-info { .truncated-info {
margin: 0 auto; margin: 0 auto;
@ -82,7 +84,7 @@
} }
.raw-link { .raw-link {
color: inherit; color: $gl-text-color;
margin-left: 5px; margin-left: 5px;
text-decoration: underline; text-decoration: underline;
} }
@ -93,17 +95,25 @@
display: flex; display: flex;
align-self: center; align-self: center;
font-size: 15px; font-size: 15px;
margin-bottom: 4px;
svg { svg {
height: 15px; height: 15px;
display: block; display: block;
fill: $white-light; fill: $gl-text-color;
} }
a, .controllers-buttons,
.btn-scroll { .btn-scroll {
margin: 0 8px; color: $gl-text-color;
color: $white-light; height: 15px;
vertical-align: middle;
padding: 0;
width: 12px;
}
.controllers-buttons {
margin: 1px 10px;
} }
.btn-scroll.animate { .btn-scroll.animate {
@ -137,9 +147,9 @@
top: 35px; top: 35px;
left: 10px; left: 10px;
bottom: 0; bottom: 0;
overflow-y: hidden; overflow-y: scroll;
padding-bottom: 20px; overflow-x: hidden;
padding-right: 20px; padding: 10px 20px 20px 5px;
} }
.environment-information { .environment-information {

27
app/views/projects/jobs/show.html.haml
View file

@ -66,29 +66,24 @@
.controllers .controllers
- if @build.has_trace? - if @build.has_trace?
= link_to raw_namespace_project_job_path(@project.namespace, @project, @build), = link_to raw_namespace_project_job_path(@project.namespace, @project, @build),
title: 'Open raw trace', title: 'Show complete raw',
data: { placement: 'top', container: 'body' }, data: { placement: 'top', container: 'body' },
class: 'js-raw-link-controller has-tooltip' do class: 'js-raw-link-controller has-tooltip controllers-buttons' do
= icon('download') = icon('file-text-o')
- if can?(current_user, :update_build, @project) && @build.erasable? - if can?(current_user, :update_build, @project) && @build.erasable?
= link_to erase_namespace_project_job_path(@project.namespace, @project, @build), = link_to erase_namespace_project_job_path(@project.namespace, @project, @build),
method: :post, method: :post,
data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' }, data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
title: 'Erase Build', title: 'Erase job log',
class: 'has-tooltip js-erase-link' do class: 'has-tooltip js-erase-link controllers-buttons' do
= icon('trash') = icon('trash')
.has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
%button.js-scroll-up.btn-scroll.btn-transparent.btn-blank.has-tooltip{ type: 'button', %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
disabled: true, = custom_icon('scroll_up')
title: 'Scroll Up', .has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
data: { placement: 'top', container: 'body'} } %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
= custom_icon('scroll_up') = custom_icon('scroll_down')
%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')
.bash.sticky.js-scroll-container .bash.sticky.js-scroll-container
%code.js-build-output %code.js-build-output
.build-loader-animation.js-build-refresh .build-loader-animation.js-build-refresh