From 44339daedf6c1dfd9157daabbd6289cad8b5243a Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Wed, 6 Oct 2021 15:44:05 -0300
Subject: [PATCH] Add toggle button to dropdown menu. Revert left margin from
 tv page. Change text dropdown filter to icon. Change dropdown inactive item
 color. Revert 500 limit rate.

---
 frontend/src/app/app.module.ts                |  3 +-
 .../statistics/statistics.component.html      | 40 ++++++++++---------
 .../statistics/statistics.component.scss      | 11 ++++-
 .../statistics/statistics.component.ts        |  7 +++-
 .../television/television.component.html      |  2 +-
 5 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 729a650f7..de67559b3 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -47,7 +47,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
+import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { CodeTemplateComponent } from './components/api-docs/code-template.component';
@@ -140,6 +140,7 @@ export class AppModule {
     library.addIcons(faLink);
     library.addIcons(faBolt);
     library.addIcons(faTint);
+    library.addIcons(faFilter);
     library.addIcons(faAngleDown);
     library.addIcons(faAngleUp);
     library.addIcons(faExchangeAlt);
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 6f3a2d4d4..ec12da928 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -38,33 +38,37 @@
             </div>
 
             <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
-              <button class="btn btn-primary btn-sm ml-2" id="dropdownFees" ngbDropdownAnchor (focus)="myDrop.open()">Fees Range</button>
+              <button class="btn btn-primary btn-sm ml-2" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
+                <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
+              </button>
               <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
-                <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
-                  <ng-template [ngIf]="fee === 1">
-                    <li (click)="filterFees(fee)" [class]="filterFeeIndex < fee ? 'inactive' : ''">
+                <ul>
+                  <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
+                    <ng-template [ngIf]="fee === 1">
+                      <li (click)="filterFees(fee)" [class]="filterFeeIndex < fee ? 'inactive' : ''">
+                        <ng-template [ngIf]="inverted">
+                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
+                        </ng-template>
+                        <ng-template [ngIf]="!inverted">
+                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                        </ng-template>
+                        <span class="fee-text" >0 - {{ fee }}</span>
+                      </li>
+                    </ng-template>
+                    <ng-template [ngIf]="fee <= 500 && fee !== 1">
+                      <li (click)="filterFees(fee)" [class]="filterFeeIndex < fee ? 'inactive' : ''">
                       <ng-template [ngIf]="inverted">
                         <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
+                        <span class="fee-text" >{{feeLevels[i - 1]}} - {{ fee }}</span>
                       </ng-template>
                       <ng-template [ngIf]="!inverted">
-                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                          <span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
                       </ng-template>
-                      <span class="fee-text" >0 - {{ fee }}</span>
                     </li>
-                  </ng-template>
-                  <ng-template [ngIf]="fee <= 200 && fee !== 1">
-                    <li (click)="filterFees(fee)" [class]="filterFeeIndex < fee ? 'inactive' : ''">
-                    <ng-template [ngIf]="inverted">
-                      <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
-                      <span class="fee-text" >{{feeLevels[i - 1]}} - {{ fee }}</span>
                     </ng-template>
-                    <ng-template [ngIf]="!inverted">
-                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
-                        <span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
-                    </ng-template>
-                  </li>
                   </ng-template>
-                </ng-template>
+                </ul>
               </div>
             </div>
 
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index 39d5de1b1..ca367bf17 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -67,6 +67,14 @@
   padding: 10px 0px;
   min-width: 130px;
   padding: 2px ​20px 0px;
+  left: -38px !important;
+  position: absolute !important;
+
+  ul {
+    list-style: none;
+    padding: 0px;
+    margin-bottom: 0px;
+  }
   li {
     width: 100%;
     font-size: 14px;
@@ -90,10 +98,11 @@
   }
   .inactive {
     .square {
-      background-color: #aaa !important;
+      background-color: #ffffff66 !important;
     }
     .fee-text {
       text-decoration: line-through;
+      color: #777;
     }
   }
 }
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts
index 9302d8d0d..c55b9b4e1 100644
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/frontend/src/app/components/statistics/statistics.component.ts
@@ -25,7 +25,8 @@ export class StatisticsComponent implements OnInit {
   spinnerLoading = false;
   feeLevels = feeLevels;
   chartColors = chartColors;
-  filterFeeIndex = 200;
+  filterFeeIndex = 500;
+  dropDownOpen = false;
 
   mempoolStats: OptimizedMempoolStats[] = [];
 
@@ -143,4 +144,8 @@ export class StatisticsComponent implements OnInit {
   filterFees(index: number) {
     this.filterFeeIndex = index;
   }
+
+  filterClick() {
+    this.dropDownOpen = !this.dropDownOpen;
+  }
 }
diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html
index 4e1a588cc..3644c4d6a 100644
--- a/frontend/src/app/components/television/television.component.html
+++ b/frontend/src/app/components/television/television.component.html
@@ -10,7 +10,7 @@
         [template]="'advanced'"
         [limitFee]="500"
         [height]="600"
-        [left]="75"
+        [left]="60"
         [right]="10"
         [data]="mempoolStats"
         [showZoom]="false"