Commit 5defad2d authored by Luke Bennett's avatar Luke Bennett Committed by Annabel Dunstone Gray

Finished up margin JS logic

parent eb55ac7d
......@@ -126,6 +126,9 @@
new TreeView();
}
break;
case 'projects:pipelines:show':
new window.gl.Pipelines();
break;
case 'groups:activity':
new Activities();
break;
......
(function() {
((global) => {
function addMarginToBuild () {
const $secondChildBuildNode = $('.build:nth-child(2)');
const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
// const $previousBuildColumn = $secondChildBuildNode.closest('.stage-column').prev('.stage-column');
if ($secondChildBuildNode.length) {
$secondChildBuildNode.closest('.stage-column').addClass('left-margin');
$firstChildBuildNode.addClass('left-connector');
}
class Pipelines {
constructor() {
$(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
$(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns);
}
function toggleGraph() {
toggleGraph() {
const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
const $btnText = $(this).find('.toggle-btn-text');
const $icon = $(this).find('.fa');
$($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
const expandIcon = 'fa-caret-down';
const hideIcon = 'fa-caret-up';
if(graphCollapsed) {
$btnText.text('Expand');
$icon.removeClass(hideIcon).addClass(expandIcon);
} else {
$btnText.text('Hide');
$icon.removeClass(expandIcon).addClass(hideIcon);
graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
}
addMarginToBuildColumns() {
const $secondChildBuildNode = $('.build:nth-child(2)');
if ($secondChildBuildNode.length) {
const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
const $multiBuildColumn = $secondChildBuildNode.closest('.stage-column');
const $previousColumn = $multiBuildColumn.prev('.stage-column');
$multiBuildColumn.addClass('left-margin');
$firstChildBuildNode.addClass('left-connector');
$previousColumn.each(function() {
$this = $(this);
if ($('.build', $this).length === 1) $this.addClass('no-margin');
});
}
$('.pipeline-graph-container').removeClass('hidden');
}
}
$(document).on('click', '.toggle-pipeline-btn', toggleGraph);
$(document).on('ready', addMarginToBuild);
})();
global.Pipelines = Pipelines;
})(window.gl || (window.gl = {}));
......@@ -326,6 +326,10 @@
}
}
&.no-margin {
margin: 0;
}
li {
list-style: none;
}
......
.row-content-block.build-content.middle-block.pipeline-actions
.pipeline-graph-container.hidden
.row-content-block.build-content.middle-block.pipeline-actions
.pull-right
.btn.btn-grouped.btn-white.toggle-pipeline-btn
%span.toggle-btn-text Hide
%span pipeline graph
= icon('caret-up')
%span.caret
- if can?(current_user, :update_pipeline, pipeline.project)
- if pipeline.builds.latest.failed.any?(&:retryable?)
= link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
......@@ -27,7 +28,7 @@
in
= time_interval_in_words pipeline.duration
.row-content-block.build-content.middle-block.pipeline-graph
.row-content-block.build-content.middle-block.pipeline-graph
.pipeline-visualization
%ul.stage-column-list
- stages = pipeline.stages_with_latest_statuses
......
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