feat(console): MDC components (#6482)

mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
Max Peintner
2023-10-26 08:29:06 +00:00
committed by GitHub
co-authored by Elio Bischof
parent cb7b50b513
commit b099a26a16
412 changed files with 2711 additions and 2698 deletions
@@ -1,10 +1,8 @@
<div class="title-row">
<h1 class="metadata-title">{{ 'METADATA.TITLE' | translate }}</h1>
<h1 class="metadata-title" mat-dialog-title>{{ 'METADATA.TITLE' | translate }}</h1>
<span class="fill-space"></span>
<p *ngIf="ts" class="ts cnsl-secondary-text">{{ ts | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</p>
<mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
</div>
<p class="desc">{{ 'METADATA.DESCRIPTION' | translate }}</p>
<div mat-dialog-content class="metadata-dialog-content">
<form *ngFor="let md of metadata; index as i" (ngSubmit)="saveElement(i)">
<div class="content">
@@ -40,9 +38,11 @@
</button>
</div>
</form>
<button (click)="addEntry()" mat-stroked-button class="continue-button" type="button">
<mat-icon>add</mat-icon>
{{ 'ACTIONS.ADD' | translate }}
<button (click)="addEntry()" mat-stroked-button type="button">
<div class="cnsl-action-button">
<mat-icon>add</mat-icon>
<span> {{ 'ACTIONS.ADD' | translate }}</span>
</div>
</button>
</div>
<div mat-dialog-actions class="action">
@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
import { ToastService } from 'src/app/services/toast.service';
@@ -14,7 +11,6 @@ import { ToastService } from 'src/app/services/toast.service';
})
export class MetadataDialogComponent {
public metadata: Partial<Metadata.AsObject>[] = [];
public loading: boolean = false;
public ts!: Timestamp.AsObject | undefined;
constructor(
@@ -1,17 +1,17 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { CardModule } from '../card/card.module';
import { MatLegacyTableModule } from '@angular/material/legacy-table';
import { MatTableModule } from '@angular/material/table';
import { InputModule } from '../input/input.module';
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component';
@@ -33,7 +33,7 @@ import { MetadataComponent } from './metadata/metadata.component';
LocalizedDatePipeModule,
TimestampToDatePipeModule,
RefreshTableModule,
MatLegacyTableModule,
MatTableModule,
],
exports: [MetadataComponent, MetadataDialogComponent],
})
@@ -1,6 +1,6 @@
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, Observable } from 'rxjs';
import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';