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

Bisq dashboard: Change color between red/green when price changes

Browse Source
This commit is contained in:
softsimon 2021-05-13 19:23:43 +04:00
parent bbd21c9401
commit 5aa57d6df9
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
4 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
View File

@ -8,7 +8,9 @@
<div class="card-body">
<h5 class="card-title" i18n="bisq-dashboard.price-index-title">Bisq Price Index</h5>
<div class="big-fiat">
<span class="green-color" *ngIf="usdPrice$ | async as usdPrice; else loading">{{ usdPrice | currency:'USD':'symbol':'1.2-2' }}</span>
<span *ngIf="usdPrice$ | async as usdPrice; else loading">
<span [appColoredPrice]="usdPrice">{{ usdPrice | currency:'USD':'symbol':'1.2-2' }}</span>
</span>
</div>
</div>
</div>
@ -18,7 +20,9 @@
<div class="card-body">
<h5 class="card-title" i18n="bisq-dashboard.market-price-title">Bisq Market Price</h5>
<div class="big-fiat">
<span class="green-color" *ngIf="bisqMarketPrice; else loading">{{ bisqMarketPrice | currency:'USD':'symbol':'1.2-2' }}</span>
<span class="green-color" *ngIf="bisqMarketPrice; else loading">
<span [appColoredPrice]="bisqMarketPrice">{{ bisqMarketPrice | currency:'USD':'symbol':'1.2-2' }}</span>
</span>
</div>
</div>
</div>

22
frontend/src/app/shared/directives/colored-price.directive.ts Normal file
View File

@ -0,0 +1,22 @@
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({
selector: '[appColoredPrice]',
})
export class ColoredPriceDirective implements OnChanges {
@Input() appColoredPrice: number;
previousValue = null;
constructor(
private element: ElementRef
) { }
ngOnChanges() {
if (this.previousValue && this.appColoredPrice < this.previousValue) {
this.element.nativeElement.classList.add('red-color');
} else {
this.element.nativeElement.classList.remove('red-color');
}
this.previousValue = this.appColoredPrice;
}
}

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

@ -19,6 +19,7 @@ import { TxFeaturesComponent } from '../components/tx-features/tx-features.compo
import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
import { ReactiveFormsModule } from '@angular/forms';
import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
import { ColoredPriceDirective } from './directives/colored-price.directive';
@NgModule({
declarations: [
@ -39,6 +40,7 @@ import { LanguageSelectorComponent } from '../components/language-selector/langu
CeilPipe,
ShortenStringPipe,
Decimal2HexPipe,
ColoredPriceDirective,
],
imports: [
CommonModule,
@ -77,6 +79,7 @@ import { LanguageSelectorComponent } from '../components/language-selector/langu
CeilPipe,
ShortenStringPipe,
Decimal2HexPipe,
ColoredPriceDirective,
]
})
export class SharedModule {}

4
frontend/src/styles.scss
View File

@ -218,6 +218,10 @@ body {
color: #3bcc49;
}
.red-color {
color: #dc3545;
}
.yellow-color {
color: #ffd800;
}