Lobo
2d25b568f5
Configured ESLint for the project with Angular and TypeScript support. Added angular-eslint dependencies, updated angular.json to include linting, and created eslint.config.js for lint rules. Updated package.json and package-lock.json with new dev dependencies.
73 lines
1.5 KiB
TypeScript
73 lines
1.5 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
|
|
@Component({
|
|
standalone: true,
|
|
imports: [MatDialogModule, MatButtonModule, MatIconModule],
|
|
template: `
|
|
<div class="dialog">
|
|
<div class="topbar">
|
|
<div class="title">{{ data.title }}</div>
|
|
<button mat-icon-button mat-dialog-close aria-label="Schließen">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="stage">
|
|
<img class="full" [src]="data.src" [alt]="data.title" />
|
|
</div>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
.dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.topbar {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
max-width: calc(100% - 56px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stage {
|
|
flex: 1 1 auto;
|
|
padding: 0 16px 16px;
|
|
min-height: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.full {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 12px;
|
|
}
|
|
`],
|
|
})
|
|
export class ImageDialogComponent {
|
|
data = inject<{
|
|
title: string;
|
|
src: string;
|
|
}>(MAT_DIALOG_DATA);
|
|
|
|
|
|
}
|