From e23c1d88e2d20ffd5cadde6bb06148b9295461b5 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 23 Aug 2016 11:02:52 -0500 Subject: Replace bootstrap caret with fontawesome caret --- app/assets/javascripts/pipeline.js.es6 | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index bf33eb10100..8813bb5dfef 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -3,12 +3,21 @@ 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'; - graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide') + if(graphCollapsed) { + $btnText.text('Expand'); + $icon.removeClass(hideIcon).addClass(expandIcon); + } else { + $btnText.text('Hide'); + $icon.removeClass(expandIcon).addClass(hideIcon); + } } $(document).on('click', '.toggle-pipeline-btn', toggleGraph); -- cgit v1.2.1 From cc8ad60fc42e9a115da63f0e0eca71c4b2567c35 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 12 Sep 2016 12:19:20 +0200 Subject: Update pipeline graph styles to match mockup --- app/assets/javascripts/pipeline.js.es6 | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index 8813bb5dfef..d3ed9757afe 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -1,4 +1,12 @@ (function() { + + function addMarginToBuild () { + const $secondChild = $('.build:nth-child(2)'); + if ($secondChild.length) { + $secondChild.closest('.stage-column').addClass('left-margin'); + } + } + function toggleGraph() { const $pipelineBtn = $(this).closest('.toggle-pipeline-btn'); const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph'); @@ -21,4 +29,5 @@ } $(document).on('click', '.toggle-pipeline-btn', toggleGraph); + $(document).on('ready', addMarginToBuild); })(); -- cgit v1.2.1 From ff0f70c0fe75773d060ecf5cf75d6fc5f879283b Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Wed, 14 Sep 2016 13:51:36 +0200 Subject: Change length of connecting lines based on number of builds --- app/assets/javascripts/pipeline.js.es6 | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index d3ed9757afe..f501761b1ec 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -1,9 +1,12 @@ (function() { function addMarginToBuild () { - const $secondChild = $('.build:nth-child(2)'); - if ($secondChild.length) { - $secondChild.closest('.stage-column').addClass('left-margin'); + 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'); } } -- cgit v1.2.1 From 5defad2d21b6481c07fb4a77f0a56ed7c19ff899 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Sep 2016 22:24:37 +0100 Subject: Finished up margin JS logic --- app/assets/javascripts/pipeline.js.es6 | 60 ++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 28 deletions(-) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index f501761b1ec..6299ba2269d 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -1,36 +1,40 @@ -(function() { - - 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'); +((global) => { + + 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() { - 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'); + 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'); - $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed'); + $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed'); - const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed'); - const expandIcon = 'fa-caret-down'; - const hideIcon = 'fa-caret-up'; + const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed'); - 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 = {})); -- cgit v1.2.1 From c2deaa7e0db808abad86e87bac9524784b02e602 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 4 Oct 2016 13:59:57 -0500 Subject: Move hidden class to graph itself; remove background color from play node & align icon --- app/assets/javascripts/pipeline.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index 6299ba2269d..68a34dda2af 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -31,7 +31,7 @@ if ($('.build', $this).length === 1) $this.addClass('no-margin'); }); } - $('.pipeline-graph-container').removeClass('hidden'); + $('.pipeline-graph').removeClass('hidden'); } } -- cgit v1.2.1 From 6a7b673035752890023e630755f27ec0d412a129 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 6 Oct 2016 18:00:06 +0100 Subject: JS review changes - Removed window from window.gl in dispatcher Added page:load event as ready isnt fired by turbolinks Fix dropdown menu link click registration --- app/assets/javascripts/pipeline.js.es6 | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index 68a34dda2af..1030447f74a 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -4,6 +4,7 @@ constructor() { $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph); $(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns); + $(document).off('page:load.addMarginToBuildColumns').on('page:load.addMarginToBuildColumns', this.addMarginToBuildColumns); } toggleGraph() { -- cgit v1.2.1 From a57b3fc80c50b951d3a54ce2108608d45826c5ef Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 6 Oct 2016 21:20:25 +0100 Subject: Corrected my correction for turbolinks -.-' Removed extra cell on generic pipeline --- app/assets/javascripts/pipeline.js.es6 | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index 1030447f74a..a29f6ecdd59 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -3,8 +3,7 @@ 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); - $(document).off('page:load.addMarginToBuildColumns').on('page:load.addMarginToBuildColumns', this.addMarginToBuildColumns); + this.addMarginToBuildColumns(); } toggleGraph() { -- cgit v1.2.1 From 274ac4efdb94efe4d3ea4d5fff193eb2f02db507 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 7 Oct 2016 12:23:00 +0100 Subject: JS review changes and fixed conflicts --- app/assets/javascripts/pipeline.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 index a29f6ecdd59..6bf63ee6979 100644 --- a/app/assets/javascripts/pipeline.js.es6 +++ b/app/assets/javascripts/pipeline.js.es6 @@ -10,10 +10,10 @@ 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 graphCollapsed = $pipelineGraph.hasClass('graph-collapsed'); $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed'); - const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed'); graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide') } -- cgit v1.2.1 From b9f351e8798529f09316c0d8ab77a01c6a18f7bf Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Fri, 14 Oct 2016 17:12:50 +0000 Subject: Rename pipeline.js.es6 to pipelines.js.es6 --- app/assets/javascripts/pipeline.js.es6 | 40 ---------------------------------- 1 file changed, 40 deletions(-) delete mode 100644 app/assets/javascripts/pipeline.js.es6 (limited to 'app/assets/javascripts/pipeline.js.es6') diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6 deleted file mode 100644 index 6bf63ee6979..00000000000 --- a/app/assets/javascripts/pipeline.js.es6 +++ /dev/null @@ -1,40 +0,0 @@ -((global) => { - - class Pipelines { - constructor() { - $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph); - this.addMarginToBuildColumns(); - } - - 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 graphCollapsed = $pipelineGraph.hasClass('graph-collapsed'); - - $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed'); - - - 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').removeClass('hidden'); - } - } - - global.Pipelines = Pipelines; - -})(window.gl || (window.gl = {})); -- cgit v1.2.1