andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-15 18:25:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): MDC components (#6482)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/members-table/members-table.component.html
+48 -42
View File
@@ -17,40 +17,44 @@
<div class="table-wrapper">
<table mat-table class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox
[disabled]="!canWrite"
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox
[disabled]="!canWrite"
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
<cnsl-avatar
*ngIf="row?.userType === UserType.TYPE_HUMAN; else cog"
class="avatar"
[name]="row.displayName"
[avatarUrl]="row.avatarUrl || ''"
[avatarUrl]="row.avatarUrl || ''"
[forColor]="row?.preferredLoginName"
[size]="32"
<th mat-header-cell *matHeaderCellDef>
<div class="selection">
<mat-checkbox
[disabled]="!canWrite"
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</cnsl-avatar>
<ng-template #cog>
<cnsl-avatar [forColor]="row.preferredLoginName" [isMachine]="true">
<i class="las la-robot"></i>
</mat-checkbox>
</div>
</th>
<td mat-cell *matCellDef="let row">
<div class="selection">
<mat-checkbox
[disabled]="!canWrite"
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
<cnsl-avatar
*ngIf="row?.userType === UserType.TYPE_HUMAN; else cog"
class="avatar"
[name]="row.displayName"
[avatarUrl]="row.avatarUrl || ''"
[avatarUrl]="row.avatarUrl || ''"
[forColor]="row?.preferredLoginName"
[size]="32"
>
</cnsl-avatar>
</ng-template>
</mat-checkbox>
<ng-template #cog>
<cnsl-avatar [forColor]="row.preferredLoginName" [isMachine]="true">
<i class="las la-robot"></i>
</cnsl-avatar>
</ng-template>
</mat-checkbox>
</div>
</td>
</ng-container>
@@ -108,22 +112,24 @@
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef class="role-row">{{ 'ROLESLABEL' | translate }}</th>
<td mat-cell *matCellDef="let member" class="role-row">
<mat-chip-list class="cnsl-chip-list" aria-label="role selection">
<mat-chip
<mat-chip-listbox class="cnsl-chip-list" aria-label="role selection">
<mat-chip-option
[selectable]="false"
class="cnsl-chip"
*ngFor="let role of member.rolesList"
[removable]="canWrite"
[selectable]="false"
(removed)="removeRole(member, role)"
data-e2e="role"
>
<div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
<span>{{ role | roletransform }}</span>
<button *ngIf="canWrite" matChipRemove data-e2e="remove-role-button">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
<div class="cnsl-chip-content">
<div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
<span>{{ role | roletransform }}</span>
<button *ngIf="canWrite" matChipRemove data-e2e="remove-role-button">
<mat-icon>cancel</mat-icon>
</button>
</div>
</mat-chip-option>
</mat-chip-listbox>
</td>
</ng-container>