Finished up margin JS logic

4 files changed, 79 insertions, 67 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 8d99b12102d..45494afe7aa 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -126,6 +126,9 @@
             new TreeView();
           }
           break;
+        case 'projects:pipelines:show':
+          new window.gl.Pipelines();
+          break;
         case 'groups:activity':
           new Activities();
           break;
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 = {}));
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 36c57f3ca30..f4211ea3b2d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -326,6 +326,10 @@
     }
   }
 
+  &.no-margin {
+    margin: 0;
+  }
+
   li {
     list-style: none;
   }
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index da5b9832ba5..bdf3c0a2aba 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,45 +1,46 @@
-.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')
-    - 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
+.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
+        %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
 
-      - if pipeline.builds.running_or_pending.any?
-        = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
+        - if pipeline.builds.running_or_pending.any?
+          = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
 
-  .oneline.clearfix
-    - if defined?(pipeline_details) && pipeline_details
-      Pipeline
-      = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
-      with
-      = pluralize pipeline.statuses.count(:id), "build"
-      - if pipeline.ref
-        for
-        = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
-      - if defined?(link_to_commit) && link_to_commit
-        for commit
-        = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
-      - if pipeline.duration
-        in
-        = time_interval_in_words pipeline.duration
+    .oneline.clearfix
+      - if defined?(pipeline_details) && pipeline_details
+        Pipeline
+        = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
+        with
+        = pluralize pipeline.statuses.count(:id), "build"
+        - if pipeline.ref
+          for
+          = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
+        - if defined?(link_to_commit) && link_to_commit
+          for commit
+          = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
+        - if pipeline.duration
+          in
+          = time_interval_in_words pipeline.duration
 
-.row-content-block.build-content.middle-block.pipeline-graph
-  .pipeline-visualization
-    %ul.stage-column-list
-      - stages = pipeline.stages_with_latest_statuses
-      - stages.each do |stage, statuses|
-        %li.stage-column
-          .stage-name
-            %a{name: stage}
-            - if stage
-              = stage.titleize
-          .builds-container
-            %ul
-              = render "projects/commit/pipeline_stage", statuses: statuses
+  .row-content-block.build-content.middle-block.pipeline-graph
+    .pipeline-visualization
+      %ul.stage-column-list
+        - stages = pipeline.stages_with_latest_statuses
+        - stages.each do |stage, statuses|
+          %li.stage-column
+            .stage-name
+              %a{name: stage}
+              - if stage
+                = stage.titleize
+            .builds-container
+              %ul
+                = render "projects/commit/pipeline_stage", statuses: statuses
 
 
 - if pipeline.yaml_errors.present?