machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toggle button to dropdown menu.

Browse Source 
Revert left margin from tv page.
Change text dropdown filter to icon.
Change dropdown inactive item color.
Revert 500 limit rate.
This commit is contained in:
Miguel Medeiros 2021-10-06 15:44:05 -03:00
parent 55dd4274f3
commit 717a3a3cc4
5 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/app.module.ts
View File

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

40
frontend/src/app/components/statistics/statistics.component.html
View File

@ -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>

11
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -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;
}
}
}

7
frontend/src/app/components/statistics/statistics.component.ts
View File

@ -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;
}
}

2
frontend/src/app/components/television/television.component.html
View File

@ -10,7 +10,7 @@
[template]="'advanced'"
[limitFee]="500"
[height]="600"
[left]="75"
[left]="60"
[right]="10"
[data]="mempoolStats"
[showZoom]="false"