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 14b7b6427a
commit 44339daedf
No known key found for this signature in database
GPG Key ID: 819EDEE4673F3EBB
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"