From 5aa57d6df9060bea2d5521648d23e29e7061586e Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 13 May 2021 19:23:43 +0400
Subject: [PATCH] Bisq dashboard: Change color between red/green when price
 changes

---
 .../bisq-main-dashboard.component.html        |  8 +++++--
 .../directives/colored-price.directive.ts     | 22 +++++++++++++++++++
 frontend/src/app/shared/shared.module.ts      |  3 +++
 frontend/src/styles.scss                      |  4 ++++
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/shared/directives/colored-price.directive.ts

diff --git a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
index b0d337f62..52c604882 100644
--- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
+++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
@@ -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>
diff --git a/frontend/src/app/shared/directives/colored-price.directive.ts b/frontend/src/app/shared/directives/colored-price.directive.ts
new file mode 100644
index 000000000..4ba79174a
--- /dev/null
+++ b/frontend/src/app/shared/directives/colored-price.directive.ts
@@ -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;
+  }
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 58adaddcb..ac0efca35 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -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 {}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 7530acc68..733cf12d1 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -218,6 +218,10 @@ body {
   color: #3bcc49;
 }
 
+.red-color {
+  color: #dc3545;
+}
+
 .yellow-color { 
   color: #ffd800;
 }