Replace bootstrap caret with fontawesome caret

1 files changed, 10 insertions, 1 deletions

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);