diff --git a/src/app/shared/alert/alert.component.ts b/src/app/shared/alert/alert.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..c46005678ef9eddd5df269ae9bad1a475912ed30 --- /dev/null +++ b/src/app/shared/alert/alert.component.ts @@ -0,0 +1,16 @@ +import { Component, Input, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'alert', + template: '<span [innerHTML]="transform(text)"></span>', + styles: ['.highlight {color: #003333}'], + encapsulation: ViewEncapsulation.None +}) +export class AlertComponent { + @Input() text: string; + + transform = (text: string): string => text.replace( + /\u0060([^\u0060]+)\u0060/g, + (match, match2) => `<span style='color:green' class='highlight'>${match2}</span>` + ); +} diff --git a/src/app/shared/alert/alert.module.ts b/src/app/shared/alert/alert.module.ts new file mode 100644 index 0000000000000000000000000000000000000000..6c18d2f278b8757ab67e3252dcb714633f3ab05e --- /dev/null +++ b/src/app/shared/alert/alert.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { AlertComponent } from './alert.component'; + +@NgModule({ + imports: [], + exports: [ + AlertComponent + ], + declarations: [AlertComponent] +}) +export class AlertModule { } diff --git a/src/app/workspace-admin/files/files.component.css b/src/app/workspace-admin/files/files.component.css index 4f8eb5126d6c33254d53a4c3b2cd57e1a823075b..541eef91dfa0cf0f43411477faa579a3569e08b7 100644 --- a/src/app/workspace-admin/files/files.component.css +++ b/src/app/workspace-admin/files/files.component.css @@ -36,7 +36,7 @@ .report-error, .checkerror { - color: brown; + color: #821324; } .report-warning, diff --git a/src/app/workspace-admin/files/files.component.html b/src/app/workspace-admin/files/files.component.html index 060a242c04025456cba734bc051ff95dc7322b07..7a1746ed1b6eb6316ceb03f5f543caaa765feb41 100644 --- a/src/app/workspace-admin/files/files.component.html +++ b/src/app/workspace-admin/files/files.component.html @@ -38,7 +38,7 @@ <div *ngFor="let message of element.report[level]"> <div class="vertical-align-middle"> <mat-icon class="report-{{level}}">{{level}}</mat-icon> - <span>{{message}}</span> + <alert text="{{message}}"></alert> </div> </div> </ng-container> diff --git a/src/app/workspace-admin/workspace.module.ts b/src/app/workspace-admin/workspace.module.ts index 8f5ed6a8104d11f4f8e914d45af74917486bacbb..591c3ac1e38fdc3669ec3215021b73642d2172cc 100644 --- a/src/app/workspace-admin/workspace.module.ts +++ b/src/app/workspace-admin/workspace.module.ts @@ -29,6 +29,7 @@ import { FilesComponent } from './files/files.component'; import { ResultsComponent } from './results/results.component'; import { SyscheckComponent } from './syscheck/syscheck.component'; import { IqbFilesModule } from './files/iqb-files'; +import { AlertModule } from '../shared/alert/alert.module'; @NgModule({ imports: [ @@ -55,7 +56,8 @@ import { IqbFilesModule } from './files/iqb-files'; IqbComponentsModule, MatCardModule, FlexLayoutModule, - IqbFilesModule + IqbFilesModule, + AlertModule ], exports: [ WorkspaceComponent