diff --git a/src/app/components/table/table-inspect-message-dialog.component.css b/src/app/components/table/table-inspect-message-dialog.component.css new file mode 100644 index 000000000..4ae6d528a --- /dev/null +++ b/src/app/components/table/table-inspect-message-dialog.component.css @@ -0,0 +1,15 @@ +mat-dialog-content { + width: 40rem; +} + +section { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.25rem 1rem 0 1rem; +} + +h2 { + margin: 0; + padding: 0 0 0.75rem 0; +} \ No newline at end of file diff --git a/src/app/components/table/table-inspect-message-dialog.component.html b/src/app/components/table/table-inspect-message-dialog.component.html index eb3ac4da6..d1ea48906 100644 --- a/src/app/components/table/table-inspect-message-dialog.component.html +++ b/src/app/components/table/table-inspect-message-dialog.component.html @@ -1,7 +1,12 @@ -

{{ label }}

+
+

{{ label }}

+ +
- {{ message }} + {{ message }} diff --git a/src/app/components/table/table-inspect-message-dialog.component.ts b/src/app/components/table/table-inspect-message-dialog.component.ts index 740b2d747..b0b0a0a90 100644 --- a/src/app/components/table/table-inspect-message-dialog.component.ts +++ b/src/app/components/table/table-inspect-message-dialog.component.ts @@ -3,6 +3,7 @@ import { Component, Inject, inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; import { IconsService } from '@services/icons.service'; import { NotificationService } from '@services/notification.service'; @@ -14,11 +15,13 @@ export interface TableInspectMessageDialogData { @Component({ selector: 'app-inspect-message-dialog', templateUrl: 'table-inspect-message-dialog.component.html', + styleUrl: 'table-inspect-message-dialog.component.css', standalone: true, imports: [ MatCardModule, MatButtonModule, MatDialogModule, + MatIconModule, ], providers: [ NotificationService, @@ -50,4 +53,8 @@ export class TableInspectMessageDialogComponent { onNoClick(): void { this.dialogRef.close(); } + + getIcon(name: string) { + return this.iconsService.getIcon(name); + } } \ No newline at end of file diff --git a/src/app/components/table/table-inspect-message.component.css b/src/app/components/table/table-inspect-message.component.css new file mode 100644 index 000000000..77abb0b3d --- /dev/null +++ b/src/app/components/table/table-inspect-message.component.css @@ -0,0 +1,11 @@ +section { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + width: fit-content; +} + +mat-icon { + cursor: pointer; +} \ No newline at end of file diff --git a/src/app/components/table/table-inspect-message.component.html b/src/app/components/table/table-inspect-message.component.html index bf0079fad..21e1c0eda 100644 --- a/src/app/components/table/table-inspect-message.component.html +++ b/src/app/components/table/table-inspect-message.component.html @@ -1,13 +1,11 @@ -@if (message) { - {{croppedMessage}}... - - @if (displayEye) { - - } -} @else { - - -} \ No newline at end of file + +
+ {{croppedMessage | emptyCell }} + @if (message) { + + } + @if (displayEye) { + + } +
+
\ No newline at end of file diff --git a/src/app/components/table/table-inspect-message.component.ts b/src/app/components/table/table-inspect-message.component.ts index 3b4790ae5..5f39790cd 100644 --- a/src/app/components/table/table-inspect-message.component.ts +++ b/src/app/components/table/table-inspect-message.component.ts @@ -1,8 +1,10 @@ import { Clipboard } from '@angular/cdk/clipboard'; import { Component, Input, inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; +import { MatChipsModule } from '@angular/material/chips'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; +import { EmptyCellPipe } from '@pipes/empty-cell.pipe'; import { IconsService } from '@services/icons.service'; import { NotificationService } from '@services/notification.service'; import { TableInspectMessageDialogComponent, TableInspectMessageDialogData } from './table-inspect-message-dialog.component'; @@ -10,11 +12,14 @@ import { TableInspectMessageDialogComponent, TableInspectMessageDialogData } fro @Component({ selector: 'app-table-inspect-message', templateUrl: 'table-inspect-message.component.html', + styleUrl: 'table-inspect-message.component.css', standalone: true, imports: [ MatDialogModule, MatButtonModule, MatIconModule, + MatChipsModule, + EmptyCellPipe, ], providers: [ NotificationService @@ -26,8 +31,8 @@ export class TableInspectMessageComponent { @Input({ required: true }) set message(entry: string | undefined) { if (entry && entry !== '') { - if (entry.length > 5) { - this._croppedMessage = entry.substring(0, 30); + if (entry.length > 15) { + this._croppedMessage = `${entry.substring(0, 14).trimEnd()}...`; this._message = entry; this._displayEye = true; } else {