Commit ac7efb29 authored by Luke Bennett's avatar Luke Bennett Committed by Luke "Jared" Bennett

Removed inline JS and added new affix declaration

Tidied up UX

Corrected naming convention issues with removing inline JS

@deckar01 saves the day! Simplified `toggleSidebar` and `hideSidebar`

Review changes

Merge conflicts and update autoscroll button
parent 5368b9f2
......@@ -8,41 +8,44 @@
Build.state = null;
function Build(options) {
this.page_url = options.page_url;
this.build_url = options.build_url;
this.build_status = options.build_status;
options = options || $('.js-build-options').data();
this.pageUrl = options.pageUrl;
this.buildUrl = options.buildUrl;
this.buildStatus = options.buildStatus;
this.state = options.state1;
this.build_stage = options.build_stage;
this.hideSidebar = bind(this.hideSidebar, this);
this.toggleSidebar = bind(this.toggleSidebar, this);
this.buildStage = options.buildStage;
this.updateDropdown = bind(this.updateDropdown, this);
this.$document = $(document);
clearInterval(Build.interval);
// Init breakpoint checker
this.bp = Breakpoints.get();
this.initSidebar();
this.$buildScroll = $('#js-build-scroll');
this.populateJobs(this.build_stage);
this.updateStageDropdownText(this.build_stage);
this.populateJobs(this.buildStage);
this.updateStageDropdownText(this.buildStage);
this.sidebarOnResize();
$(window).off('resize.build').on('resize.build', this.hideSidebar);
this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
$('#js-build-scroll > a').off('click').on('click', this.stepTrace);
$(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this));
$('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace);
this.updateArtifactRemoveDate();
if ($('#build-trace').length) {
this.getInitialBuildTrace();
this.initScrollButtons();
this.initScrollButtonAffix();
}
if (this.build_status === "running" || this.build_status === "pending") {
if (this.buildStatus === "running" || this.buildStatus === "pending") {
$('#autoscroll-button').on('click', function() {
var state;
state = $(this).data("state");
if ("enabled" === state) {
$(this).data("state", "disabled");
return $(this).text("enable autoscroll");
return $(this).text("Enable autoscroll");
} else {
$(this).data("state", "enabled");
return $(this).text("disable autoscroll");
return $(this).text("Disable autoscroll");
}
//
// Bind autoscroll button to follow build output
......@@ -50,7 +53,7 @@
});
Build.interval = setInterval((function(_this) {
return function() {
if (window.location.href.split("#").first() === _this.page_url) {
if (window.location.href.split("#").first() === _this.pageUrl) {
return _this.getBuildTrace();
}
};
......@@ -72,7 +75,6 @@
top: this.sidebarTranslationLimits.max
});
this.$sidebar.niceScroll();
this.hideSidebar();
this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
this.$document.off('scroll.translateSidebar').on('scroll.translateSidebar', this.translateSidebar.bind(this));
};
......@@ -81,11 +83,11 @@
var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped']
return $.ajax({
url: this.build_url,
url: this.buildUrl,
dataType: 'json',
success: function(build_data) {
$('.js-build-output').html(build_data.trace_html);
if (removeRefreshStatuses.indexOf(build_data.status) >= 0) {
success: function(buildData) {
$('.js-build-output').html(buildData.trace_html);
if (removeRefreshStatuses.indexOf(buildData.status) >= 0) {
return $('.js-build-refresh').remove();
}
}
......@@ -94,7 +96,7 @@
Build.prototype.getBuildTrace = function() {
return $.ajax({
url: this.page_url + "/trace.json?state=" + (encodeURIComponent(this.state)),
url: this.pageUrl + "/trace.json?state=" + (encodeURIComponent(this.state)),
dataType: "json",
success: (function(_this) {
return function(log) {
......@@ -108,8 +110,8 @@
$('.js-build-output').html(log.html);
}
return _this.checkAutoscroll();
} else if (log.status !== _this.build_status) {
return Turbolinks.visit(_this.page_url);
} else if (log.status !== _this.buildStatus) {
return Turbolinks.visit(_this.pageUrl);
}
};
})(this)
......@@ -122,12 +124,11 @@
}
};
Build.prototype.initScrollButtons = function() {
var $body, $buildScroll, $buildTrace;
$buildScroll = $('#js-build-scroll');
Build.prototype.initScrollButtonAffix = function() {
var $body, $buildTrace;
$body = $('body');
$buildTrace = $('#build-trace');
return $buildScroll.affix({
return this.$buildScroll.affix({
offset: {
bottom: function() {
return $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top);
......@@ -136,18 +137,12 @@
});
};
Build.prototype.shouldHideSidebar = function() {
Build.prototype.shouldHideSidebarForViewport = function() {
var bootstrapBreakpoint;
bootstrapBreakpoint = this.bp.getBreakpointSize();
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
};
Build.prototype.toggleSidebar = function() {
if (this.shouldHideSidebar()) {
return this.$sidebar.toggleClass('right-sidebar-expanded right-sidebar-collapsed');
}
};
Build.prototype.translateSidebar = function(e) {
var newPosition = this.sidebarTranslationLimits.max - (document.body.scrollTop || document.documentElement.scrollTop);
if (newPosition < this.sidebarTranslationLimits.min) newPosition = this.sidebarTranslationLimits.min;
......@@ -156,12 +151,20 @@
});
};
Build.prototype.hideSidebar = function() {
if (this.shouldHideSidebar()) {
return this.$sidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
} else {
return this.$sidebar.removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
}
Build.prototype.toggleSidebar = function(shouldHide) {
var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
.toggleClass('sidebar-collapsed', shouldHide);
this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow)
.toggleClass('right-sidebar-collapsed', shouldHide);
};
Build.prototype.sidebarOnResize = function() {
this.toggleSidebar(this.shouldHideSidebarForViewport());
};
Build.prototype.sidebarOnClick = function() {
if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
};
Build.prototype.updateArtifactRemoveDate = function() {
......
......@@ -29,6 +29,9 @@
case 'projects:boards:index':
shortcut_handler = new ShortcutsNavigation();
break;
case 'projects:builds:show':
new Build();
break;
case 'projects:merge_requests:index':
case 'projects:issues:index':
Issuable.init();
......
......@@ -14,18 +14,10 @@
}
}
.autoscroll-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
}
.scroll-controls {
&.affix-top {
position: absolute;
top: 10px;
right: 25px;
.scroll-step {
width: 31px;
margin: 0 0 0 auto;
}
&.affix-bottom {
......@@ -34,13 +26,13 @@
}
&.affix {
right: 30px;
right: 25px;
bottom: 15px;
z-index: 1;
@media (min-width: $screen-md-min) {
right: 26%;
}
&.sidebar-expanded {
right: #{$gutter_width + ($gl-padding * 2)};
}
a {
......
......@@ -5,4 +5,14 @@ module BuildsHelper
build_class += ' retried' if build.retried?
build_class
end
def javascript_build_options
{
page_url: namespace_project_build_url(@project.namespace, @project, @build),
build_url: namespace_project_build_url(@project.namespace, @project, @build, :json),
build_status: @build.status,
build_stage: @build.stage,
state1: @build.trace_with_state[:state]
}
end
end
- @no_container = true
- page_title "#{@build.name} (##{@build.id})", "Builds"
- trace_with_state = @build.trace_with_state
- header_title project_title(@project, "Builds", project_builds_path(@project))
= render "projects/pipelines/head", build_subnav: true
......@@ -28,19 +27,21 @@
Runners page
.prepend-top-default
- if @build.active?
.autoscroll-container
%button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
- if @build.erased?
.erased.alert.alert-warning
- erased_by = "by #{link_to @build.erased_by.name, user_path(@build.erased_by)}" if @build.erased_by
Build has been erased #{erased_by.html_safe} #{time_ago_with_tooltip(@build.erased_at)}
- else
#js-build-scroll.scroll-controls
.scroll-step
= link_to '#build-trace', class: 'btn' do
%i.fa.fa-angle-up
= link_to '#down-build-trace', class: 'btn' do
%i.fa.fa-angle-down
- if @build.active?
.autoscroll-container
%button.btn.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}}
Enable autoscroll
%pre.build-trace#build-trace
%code.bash.js-build-output
= icon("refresh spin", class: "js-build-refresh")
......@@ -49,11 +50,4 @@
= render "sidebar"
:javascript
new Build({
page_url: "#{namespace_project_build_url(@project.namespace, @project, @build)}",
build_url: "#{namespace_project_build_url(@project.namespace, @project, @build, :json)}",
build_status: "#{@build.status}",
build_stage: "#{@build.stage}",
state1: "#{trace_with_state[:state]}"
})
.js-build-options{ data: javascript_build_options }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment