From a07392f2285f1b6be3d8d58ce5d40ab9e4ad66dd Mon Sep 17 00:00:00 2001 From: "Hartung, Michael" <michael.hartung@uni-hamburg.de> Date: Thu, 13 Apr 2023 16:43:10 +0200 Subject: [PATCH] app-images --- src/app/app.module.ts | 2 ++ .../info-tile/info-tile.component.html | 18 +++++++++--- .../info-tile/info-tile.component.scss | 4 --- src/app/image/image.component.html | 9 ++++++ src/app/image/image.component.scss | 0 src/app/image/image.component.spec.ts | 25 +++++++++++++++++ src/app/image/image.component.ts | 28 +++++++++++++++++++ src/stylesheets/styles.scss | 4 +++ 8 files changed, 82 insertions(+), 8 deletions(-) create mode 100644 src/app/image/image.component.html create mode 100644 src/app/image/image.component.scss create mode 100644 src/app/image/image.component.spec.ts create mode 100644 src/app/image/image.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b8e8bd93..83a854be 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -55,6 +55,7 @@ import { InfoTileEdgeComponent } from './components/info-tile-edge/info-tile-edg import { NetworkEmptyWarningComponent } from './components/network-empty-warning/network-empty-warning.component'; import { BugReportComponent } from './components/bug-report/bug-report.component'; import { ViewListComponent } from './components/analysis-panel/view-list/view-list.component'; +import { ImageComponent } from './image/image.component'; @NgModule({ @@ -99,6 +100,7 @@ import { ViewListComponent } from './components/analysis-panel/view-list/view-li NetworkEmptyWarningComponent, BugReportComponent, ViewListComponent, + ImageComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html index 7b3a349d..c4f1aeae 100644 --- a/src/app/components/info-tile/info-tile.component.html +++ b/src/app/components/info-tile/info-tile.component.html @@ -1,4 +1,3 @@ - <p *ngIf="!wrapper.data.drugstoneId && wrapper.data.label" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }" @@ -174,15 +173,26 @@ [href]="getLinkoutURL(target.key)" target="_blank" > - <img class="link-icon" src="assets/{{ target.value }}.png" alt="{{ target.value }}" title="{{ target.value }}"/></a - > + <app-image + _class="link-icon" + _src="assets/{{ target.value }}.png" + _alt="{{ target.value }}" + _title="{{ target.value }}" + ></app-image> + </a> </span> <a class="is-capitalized" href="https://clinicaltrials.gov/ct2/results?term={{ wrapper.data.symbol }}" target="_blank" - ><img class="link-icon" src="assets/clinicaltrials.png" alt="ClinicalTrials.gov" title="ClinicalTrials.gov"/> + > + <app-image + _class="link-icon" + _src="assets/clinicaltrials.png" + _alt="ClinicalTrials.gov" + _title="ClinicalTrials.gov" + ></app-image> </a> </p> diff --git a/src/app/components/info-tile/info-tile.component.scss b/src/app/components/info-tile/info-tile.component.scss index 9731255f..e69de29b 100644 --- a/src/app/components/info-tile/info-tile.component.scss +++ b/src/app/components/info-tile/info-tile.component.scss @@ -1,4 +0,0 @@ -.link-icon { - height: 1.2em !important; - vertical-align: bottom !important; -} \ No newline at end of file diff --git a/src/app/image/image.component.html b/src/app/image/image.component.html new file mode 100644 index 00000000..71b5958c --- /dev/null +++ b/src/app/image/image.component.html @@ -0,0 +1,9 @@ +<picture> + <source srcset="{{ _source }}" /> + <img + src="{{ _source }}" + alt="{{ _alt }}" + title="{{ _title }}" + class="{{ _class }}" + /> +</picture> diff --git a/src/app/image/image.component.scss b/src/app/image/image.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/image/image.component.spec.ts b/src/app/image/image.component.spec.ts new file mode 100644 index 00000000..c319a431 --- /dev/null +++ b/src/app/image/image.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImageComponent } from './image.component'; + +describe('ImageComponent', () => { + let component: ImageComponent; + let fixture: ComponentFixture<ImageComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ImageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/image/image.component.ts b/src/app/image/image.component.ts new file mode 100644 index 00000000..1db83ad6 --- /dev/null +++ b/src/app/image/image.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-image', + templateUrl: './image.component.html', + styleUrls: ['./image.component.scss'] +}) +export class ImageComponent implements OnInit { + + constructor() { } + + public _source: string; + public format: string; + + @Input() set _src(src: string) { + this._source = src; + // get file ending behind last '.' as format + this.format = this._source.split('.').slice(-1)[0]; + } + + @Input() _alt: string; + @Input() _title: string; + @Input() _class: string; + + ngOnInit(): void { + } + +} diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss index b62887c3..097d9cae 100644 --- a/src/stylesheets/styles.scss +++ b/src/stylesheets/styles.scss @@ -321,3 +321,7 @@ } } +.link-icon { + height: 1.2em !important; + vertical-align: bottom !important; +} -- GitLab