Add symbol icon to position detail dialog (#37)

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Improved the user table of the admin control panel
+- Added the symbol logo to the position detail dialog
 
 ## 0.89.0 - 21.04.2021
 

apps/client/src/app/components/dialog-header/dialog-header.component.html

@@ -1,3 +1,9 @@
+<gf-symbol-icon
+  *ngIf="symbolUrl"
+  class="mr-1"
+  size="large"
+  [url]="symbolUrl"
+></gf-symbol-icon>
 <span class="flex-grow-1 text-truncate">{{ title }}</span>
 <button
   *ngIf="deviceType !== 'mobile'"

apps/client/src/app/components/dialog-header/dialog-header.component.scss

@@ -1,3 +1,4 @@
 :host {
+  align-items: center;
   display: flex;
 }

apps/client/src/app/components/dialog-header/dialog-header.component.ts

@@ -16,6 +16,7 @@ import {
 })
 export class DialogHeaderComponent implements OnInit {
   @Input() deviceType: string;
+  @Input() symbolUrl: string;
   @Input() title: string;
 
   @Output() closeButtonClicked = new EventEmitter<void>();

apps/client/src/app/components/dialog-header/dialog-header.module.ts

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 
 @NgModule({
   declarations: [DialogHeaderComponent],
   exports: [DialogHeaderComponent],
-  imports: [CommonModule, MatButtonModule],
+  imports: [CommonModule, GfSymbolIconModule, MatButtonModule],
   providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts

@@ -3,5 +3,6 @@ export interface PositionDetailDialogParams {
   deviceType: string;
   locale: string;
   symbol: string;
+  symbolUrl: string;
   title: string;
 }

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -1,6 +1,7 @@
 <gf-dialog-header
   mat-dialog-title
   [deviceType]="data.deviceType"
+  [symbolUrl]="data.symbolUrl"
   [title]="data.title"
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>

apps/client/src/app/components/position/position.component.html

@@ -35,11 +35,6 @@
         <div class="h6 m-0 text-truncate">{{ position?.name }}</div>
         <div class="d-flex">
           <span>{{ position?.symbol | gfSymbol }}</span>
-          <gf-symbol-icon
-            *ngIf="position?.url"
-            class="ml-1"
-            [url]="position?.url"
-          ></gf-symbol-icon>
           <span *ngIf="position?.exchange" class="ml-2 text-muted"
             >({{ position.exchange }})</span
           >

apps/client/src/app/components/position/position.component.ts

@@ -51,6 +51,11 @@ export class PositionComponent implements OnDestroy, OnInit {
 
   public ngOnInit() {}
 
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private openDialog(): void {
     const dialogRef = this.dialog.open(PositionDetailDialog, {
       autoFocus: false,
@@ -59,6 +64,7 @@ export class PositionComponent implements OnDestroy, OnInit {
         deviceType: this.deviceType,
         locale: this.locale,
         symbol: this.position?.symbol,
+        symbolUrl: this.position?.url,
         title: this.position?.name
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
@@ -69,9 +75,4 @@ export class PositionComponent implements OnDestroy, OnInit {
       this.router.navigate(['.'], { relativeTo: this.route });
     });
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

apps/client/src/app/components/position/position.module.ts

@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
 import { GfTrendIndicatorModule } from '../trend-indicator/trend-indicator.module';
 import { GfValueModule } from '../value/value.module';
 import { GfPositionDetailDialogModule } from './position-detail-dialog/position-detail-dialog.module';
@@ -17,7 +16,6 @@ import { PositionComponent } from './position.component';
   imports: [
     CommonModule,
     GfPositionDetailDialogModule,
-    GfSymbolIconModule,
     GfSymbolModule,
     GfTrendIndicatorModule,
     GfValueModule,

apps/client/src/app/components/symbol-icon/symbol-icon.component.html

@@ -1,5 +1,6 @@
 <img
   *ngIf="url"
   src="https://www.google.com/s2/favicons?domain={{ url }}&sz=64"
+  [ngClass]="{ large: size === 'large' }"
   [title]="tooltip ? tooltip : ''"
 />

apps/client/src/app/components/symbol-icon/symbol-icon.component.scss

@@ -5,5 +5,10 @@
     border-radius: 0.2rem;
     height: 0.8rem;
     width: 0.8rem;
+
+    &.large {
+      height: 1.4rem;
+      width: 1.4rem;
+    }
   }
 }

apps/client/src/app/components/symbol-icon/symbol-icon.component.ts

@@ -12,6 +12,7 @@ import {
   styleUrls: ['./symbol-icon.component.scss']
 })
 export class SymbolIconComponent implements OnInit {
+  @Input() size: 'large';
   @Input() tooltip: string;
   @Input() url: string;