Added sliding ON/OFF button for list of techniques

monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Collapse from '@kunukn/react-collapse';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuestionCircle, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { faQuestionCircle, faChevronUp, faChevronDown, faToggleOn } from '@fortawesome/free-solid-svg-icons'
 
 import {Button} from 'react-bootstrap';
 import AttackReport from '../AttackReport';
@@ -80,13 +80,19 @@ class TechniqueDropdowns extends React.Component{
       });
     }
     return (
-      <div className='dropdown-list'>
+      <div className='attack-technique-list-component'>
+        List of all techniques
         <Button bsStyle='link'
                 bsSize='large'
-                onClick={() => this.toggleTechList()}>
+                onClick={() => this.toggleTechList()}
-          {this.state.techniquesHidden ? 'Show all' : 'Hide all'}
+                className={classNames({'toggle-btn': true,
+                                       'toggled-off' : this.state.techniquesHidden,
+                                       'toggled-on': !this.state.techniquesHidden})}>
+
+          <FontAwesomeIcon icon={faToggleOn} className={'switch-on'} size={"2x"}/>
+          <FontAwesomeIcon icon={faToggleOn} className={'switch-off'} size={"2x"}/>
         </Button>
-        <section className={`attack-report ${listClass}`}>{content}</section>
+        <section className={`dropdown-list ${listClass}`}>{content}</section>
       </div>);
   }
 }

monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss

@@ -12,7 +12,7 @@
   display: none;
 }
 
-.attack-report .dropdown-list .btn-lg {
+.attack-technique-list-component .dropdown-list .btn-lg {
   margin-top: 30px;
   margin-bottom: 20px;
   padding: 0;
@@ -44,3 +44,40 @@
 .attack-link{
   padding: 0 7px 3px 7px !important;
 }
+
+.attack-report .toggle-btn{
+  position:relative;
+  height:30px;
+  width:30px;
+}
+
+.attack-report .toggle-btn {
+  padding: 0;
+  margin-bottom: 33px;
+  margin-left: 6px;
+  outline: none !important;
+  font-size: 15px;
+}
+
+.attack-report .toggle-btn svg {
+  position:absolute;
+  left:0;
+  -webkit-transition: opacity 0.15s ease-in-out;
+  -moz-transition: opacity 0.15s ease-in-out;
+  -o-transition: opacity 0.15s ease-in-out;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.attack-report .toggle-btn.toggled-on .switch-off{
+  opacity:0;
+}
+
+.attack-report .toggle-btn.toggled-off .switch-on{
+  opacity:0;
+}
+
+.attack-report .switch-off {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+  color: gray;
+}