From 52f3c71ce80caf941767dcbf6b7c35aaaacc1a13 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Sun, 26 Apr 2020 01:55:59 +0200
Subject: [PATCH] added arrows to collaps itles

---
 src/app/tabs/staticanalysis/staticAnalysisView.js | 15 +++++++++++++--
 .../styles/staticAnalysisView-styles.js           |  4 ++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/tabs/staticanalysis/staticAnalysisView.js b/src/app/tabs/staticanalysis/staticAnalysisView.js
index 7e4e10380f..a26aa70b54 100644
--- a/src/app/tabs/staticanalysis/staticAnalysisView.js
+++ b/src/app/tabs/staticanalysis/staticAnalysisView.js
@@ -172,6 +172,13 @@ staticAnalysisView.prototype.checkAll = function (event) {
   this.correctRunBtnDisabled()
 }
 
+staticAnalysisView.prototype.handleCollapse = function (e) {
+  const downs = e.toElement.parentElement.getElementsByClassName("fas fa-angle-double-right")
+  const iEls = document.getElementsByTagName("i")
+  for (var i = 0; i < iEls.length; i++) { iEls[i].hidden = false }
+  downs[0].hidden = true
+}
+
 staticAnalysisView.prototype.renderModules = function () {
   const groupedModules = utils.groupBy(preProcessModules(this.runner.modules()), 'categoryId')
   const moduleEntries = Object.keys(groupedModules).map((categoryId, i) => {
@@ -197,9 +204,12 @@ staticAnalysisView.prototype.renderModules = function () {
     })
     return yo`
       <div class="${css.block}">
-        <input type="radio" name="accordion" class="w-100 d-none card" id="heading${categoryId}"/>
-        <label for="heading${categoryId}" style="cursor: pointer;" class="h6 card-header font-weight-bold border-bottom px-1 py-2 w-100">
+        <input type="radio" name="accordion" class="w-100 d-none card" id="heading${categoryId}" onclick=${(e) => this.handleCollapse(e)}"/>
+        <label for="heading${categoryId}" style="cursor: pointer;" class="h6 card-header d-flex justify-content-between font-weight-bold border-bottom px-1 py-2 w-100">
           <span>${category[0].categoryDisplayName}</span>
+          <div>
+            <i class="fas fa-angle-double-right"></i>
+          </div>
         </label>
         <div class="w-100 d-block px-2 my-1 ${css.entries}">
           ${entriesDom}
@@ -209,6 +219,7 @@ staticAnalysisView.prototype.renderModules = function () {
   })
   // collaps first module
   moduleEntries[0].getElementsByTagName('input')[0].checked = true
+  moduleEntries[0].getElementsByTagName('i')[0].hidden = true
   return yo`
     <div class="accordion" id="accordionModules">
       ${moduleEntries}
diff --git a/src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js b/src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js
index 5fec33ab13..9536f6931e 100644
--- a/src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js
+++ b/src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js
@@ -24,12 +24,12 @@ var css = csjs`
   }
   .block input[type='radio']:checked ~ .entries{
     height: auto;
-    transition: .3s ease-in;
+    transition: .5s ease-in;
   }
   .entries{
     height: 0;
     overflow: hidden;
-    transition: .3s ease-out;
+    transition: .5s ease-out;
   }
 `