Replace edit button with a Material icon, adjust styles, and add MatIconModule to component imports.

This commit is contained in:
akastijn 2025-10-24 21:28:20 +02:00
parent 64ea68ab39
commit 8bfcdb6ccc
3 changed files with 11 additions and 4 deletions

View File

@ -14,7 +14,7 @@
<th class="historyDate">Date</th> <th class="historyDate">Date</th>
<th class="historyDate">Expires</th> <th class="historyDate">Expires</th>
@if (canEdit()) { @if (canEdit()) {
<th class="historyActions">Actions</th> <th class="historyActions"></th>
} }
</tr> </tr>
</thead> </thead>
@ -51,8 +51,8 @@
{{ this.historyFormat.getExpiredTime(entry) }} {{ this.historyFormat.getExpiredTime(entry) }}
</td> </td>
@if (canEdit()) { @if (canEdit()) {
<td class="historyActions"> <td class="historyActions" (click)="openEdit(entry)">
<button (click)="$event.stopPropagation(); openEdit(entry)">Edit</button> <mat-icon>edit</mat-icon>
</td> </td>
} }
</tr> </tr>

View File

@ -111,3 +111,8 @@ img {
.historyDate { .historyDate {
width: 170px; width: 170px;
} }
.historyActions {
width: 100px;
padding: 0 10px 0 10px;
}

View File

@ -11,12 +11,14 @@ import {Router} from '@angular/router';
import {AuthService} from '@services/auth.service'; import {AuthService} from '@services/auth.service';
import {MatDialog} from '@angular/material/dialog'; import {MatDialog} from '@angular/material/dialog';
import {EditPunishmentDialogComponent} from '../edit-punishment-dialog/edit-punishment-dialog.component'; import {EditPunishmentDialogComponent} from '../edit-punishment-dialog/edit-punishment-dialog.component';
import {MatIconModule} from '@angular/material/icon';
@Component({ @Component({
selector: 'app-history', selector: 'app-history',
imports: [ imports: [
NgOptimizedImage, NgOptimizedImage,
RemoveTrailingPeriodPipe RemoveTrailingPeriodPipe,
MatIconModule,
], ],
templateUrl: './history.component.html', templateUrl: './history.component.html',
styleUrl: './history.component.scss', styleUrl: './history.component.scss',