TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 20:57:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): MDC components (#6482)

Browse Source 
mdc components

---------

Co-authored-by: Elio Bischof <eliobischof@gmail.com>
This commit is contained in:
Max Peintner 2023-10-26 10:29:06 +02:00 committed by GitHub
parent cb7b50b513
commit b099a26a16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
412 changed files with 2711 additions and 2698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
cmd/ready/ready.go
View File

@ -32,6 +32,9 @@ func ready(config *Config) bool {
return false
}
defer res.Body.Close()
logging.WithFields("status", res.StatusCode).Warn("ready check failed")
return res.StatusCode == 200
if res.StatusCode != 200 {
logging.WithFields("status", res.StatusCode).Warn("ready check failed")
return false
}
return true
}

1
console/angular.json
View File

@ -30,6 +30,7 @@
"includePaths": ["node_modules"]
},
"allowedCommonJsDependencies": [
"opentype.js",
"fast-sha256",
"buffer",
"moment",

42
console/package.json
View File

@ -12,18 +12,18 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/cdk": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/material": "^16.2.0",
"@angular/material-moment-adapter": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"@angular/service-worker": "^16.2.0",
"@angular/animations": "^16.2.5",
"@angular/cdk": "^16.2.4",
"@angular/common": "^16.2.5",
"@angular/compiler": "^16.2.5",
"@angular/core": "^16.2.5",
"@angular/forms": "^16.2.5",
"@angular/material": "^16.2.4",
"@angular/material-moment-adapter": "^16.2.4",
"@angular/platform-browser": "^16.2.5",
"@angular/platform-browser-dynamic": "^16.2.5",
"@angular/router": "^16.2.5",
"@angular/service-worker": "^16.2.5",
"@ctrl/ngx-codemirror": "^6.1.0",
"@grpc/grpc-js": "^1.9.3",
"@ngx-translate/core": "^14.0.0",
@ -50,15 +50,15 @@
"zone.js": "~0.13.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.0",
"@angular-eslint/builder": "16.1.0",
"@angular-eslint/eslint-plugin": "16.1.0",
"@angular-eslint/eslint-plugin-template": "16.1.0",
"@angular-eslint/schematics": "16.1.0",
"@angular-eslint/template-parser": "16.1.0",
"@angular/cli": "^16.2.0",
"@angular/compiler-cli": "^16.2.0",
"@angular/language-service": "^16.2.0",
"@angular-devkit/build-angular": "^16.2.2",
"@angular-eslint/builder": "16.2.0",
"@angular-eslint/eslint-plugin": "16.2.0",
"@angular-eslint/eslint-plugin-template": "16.2.0",
"@angular-eslint/schematics": "16.2.0",
"@angular-eslint/template-parser": "16.2.0",
"@angular/cli": "^16.2.2",
"@angular/compiler-cli": "^16.2.5",
"@angular/language-service": "^16.2.5",
"@bufbuild/buf": "^1.23.1",
"@types/file-saver": "^2.0.2",
"@types/google-protobuf": "^3.15.3",

8
console/src/app/app.component.scss
View File

@ -1,15 +1,13 @@
@use '@angular/material' as mat;
@mixin main-theme($theme) {
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$is-dark-theme: map-get($theme, is-dark);
.main-container {

1
console/src/app/app.component.ts
View File

@ -218,7 +218,6 @@ export class AppComponent implements OnDestroy {
})
.catch((error) => {
console.error(error);
this.themeService.setDefaultColors();
this.router.navigate(['/users/me']);
});
}

8
console/src/app/app.module.ts
View File

@ -13,11 +13,11 @@ import localePt from '@angular/common/locales/pt';
import localeZh from '@angular/common/locales/zh';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker';

12
console/src/app/modules/accounts-card/accounts-card.component.scss
View File

@ -3,11 +3,11 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$card-background-color: mat.get-color-from-palette($background, cards);
$primary-color: map-get($primary, 500);
$card-background-color: map-get($background, cards);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
@ -54,10 +54,6 @@
button {
border-radius: 50vh;
margin: 0.5rem;
.mat-button-wrapper {
font-size: 0.8rem;
}
}
.l-accounts {

4
console/src/app/modules/accounts-card/accounts-card.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

6
console/src/app/modules/action-keys/action-keys.component.scss
View File

@ -1,12 +1,10 @@
@use '@angular/material' as mat;
@mixin action-keys-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500);
$accent-color: map-get($primary, 500);
$back: map-get($background, background);
.action-keys-wrapper {
@ -45,7 +43,7 @@
right: 0;
bottom: 0;
left: 0;
background: mat.get-color-from-palette($primary, default-contrast);
background: map-get($primary, default-contrast);
opacity: 0.2;
border-radius: 4px;
}

5
console/src/app/modules/add-key-dialog/add-key-dialog.component.ts
View File

@ -1,9 +1,6 @@
import { Component, Inject } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
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 { KeyType } from 'src/app/proto/generated/zitadel/auth_n_key_pb';
export enum AddKeyDialogType {

6
console/src/app/modules/add-key-dialog/add-key-dialog.module.ts
View File

@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { MatDialogModule } from '@angular/material/dialog';
import { AddKeyDialogComponent } from './add-key-dialog.component';
@NgModule({
@ -22,6 +23,7 @@ import { AddKeyDialogComponent } from './add-key-dialog.component';
MatSelectModule,
MatIconModule,
FormsModule,
MatDialogModule,
MatDatepickerModule,
MatMomentDateModule,
ReactiveFormsModule,

3
console/src/app/modules/add-member-dialog/member-create-dialog.component.html
View File

@ -1,9 +1,10 @@
<h1 mat-dialog-title>
<span class="title">{{ 'MEMBER.ADD' | translate }}</span>
</h1>
<p class="desc cnsl-secondary-text">{{ 'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate }}</p>
<div mat-dialog-content>
<p class="desc cnsl-secondary-text">{{ 'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate }}</p>
<ng-container *ngIf="showCreationTypeSelector">
<cnsl-form-field class="full-width">
<cnsl-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</cnsl-label>

1
console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
View File

@ -14,7 +14,6 @@
box-sizing: border-box;
.role-cb {
padding: 0.25rem 0;
box-sizing: border-box;
.role-cb-content {

5
console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
View File

@ -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 { Observable } from 'rxjs';
import { GrantedProject, Project } from 'src/app/proto/generated/zitadel/project_pb';
import { User } from 'src/app/proto/generated/zitadel/user_pb';

12
console/src/app/modules/add-member-dialog/member-create-dialog.module.ts
View File

@ -1,12 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';
import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';

8
console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.scss
View File

@ -12,8 +12,6 @@
flex-direction: column;
.role-cb {
padding: 0.25rem 0;
.role-cb-content {
padding-left: 0.5rem;
display: flex;
@ -30,5 +28,9 @@
.action {
display: flex;
justify-content: space-between;
justify-content: flex-end;
.ok-button {
margin-left: 1rem;
}
}

5
console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts
View File

@ -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 { getMembershipColor } from 'src/app/utils/color';
@Component({

8
console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.module.ts
View File

@ -1,13 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
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 { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { MatDialogModule } from '@angular/material/dialog';
import { AddMemberRolesDialogComponent } from './add-member-roles-dialog.component';
@NgModule({
@ -17,6 +18,7 @@ import { AddMemberRolesDialogComponent } from './add-member-roles-dialog.compone
TranslateModule,
MatCheckboxModule,
MatButtonModule,
MatDialogModule,
LocalizedDatePipeModule,
MatTooltipModule,
RoleTransformPipeModule,

5
console/src/app/modules/add-token-dialog/add-token-dialog.component.ts
View File

@ -1,9 +1,6 @@
import { Component, Inject } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
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';
@Component({
selector: 'cnsl-add-token-dialog',

6
console/src/app/modules/add-token-dialog/add-token-dialog.module.ts
View File

@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { MatDialogModule } from '@angular/material/dialog';
import { InfoSectionModule } from '../info-section/info-section.module';
import { AddTokenDialogComponent } from './add-token-dialog.component';
@ -22,6 +23,7 @@ import { AddTokenDialogComponent } from './add-token-dialog.component';
InfoSectionModule,
InputModule,
MatSelectModule,
MatDialogModule,
MatIconModule,
FormsModule,
MatDatepickerModule,

6
console/src/app/modules/app-card/app-card.component.scss
View File

@ -1,12 +1,10 @@
@use '@angular/material' as mat;
@mixin app-card-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500);
$accent-color: map-get($primary, 500);
$back: map-get($background, background);
.cnsl-app-card {
@ -26,7 +24,7 @@
font-weight: 600;
background-color: $back;
transition: background-color box-shadow 0.3s ease-in;
color: mat.get-color-from-palette($primary, default-contrast);
color: map-get($primary, default-contrast);
&.add {
background-color: map-get($primary, 500);

4
console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
.auth-method-radio-button-wrapper {
display: flex;
flex-direction: row;
@ -20,7 +18,7 @@
@mixin app-auth-method-radio-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$background: map-get($theme, background);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

4
console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
.app-type-radio-button-wrapper {
display: flex;
flex-direction: row;
@ -10,7 +8,7 @@
@mixin app-type-radio-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$background: map-get($theme, background);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

4
console/src/app/modules/avatar/avatar.component.scss
View File

@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@mixin avatar-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
.avatar-circle {
border-radius: 50%;

4
console/src/app/modules/card/card.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { CardComponent } from './card.component';

13
console/src/app/modules/card/card.scss
View File

@ -1,10 +1,8 @@
@use '@angular/material' as mat;
@mixin card-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$background: map-get($theme, background);
$card-background-color: mat.get-color-from-palette($background, cards);
$card-background-color: map-get($background, cards);
$is-dark-theme: map-get($theme, is-dark);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
$border-selected-color: if($is-dark-theme, #fff, #000);
@ -59,6 +57,13 @@
.cnsl-chip {
height: auto;
border: 1px solid $border-color;
background: if($is-dark-theme, map-get($background, state), #e4e7e4) !important;
.cnsl-chip-content {
display: flex;
align-items: center;
font-size: 14px !important;
}
}
.cnsl-chip-list {

2
console/src/app/modules/changes/changes.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
.change-header {
display: flex;
justify-content: space-between;

6
console/src/app/modules/changes/changes.module.ts
View File

@ -1,10 +1,10 @@
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
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 { ScrollableModule } from 'src/app/directives/scrollable/scrollable.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';

4
console/src/app/modules/client-keys/client-keys.component.html
View File

@ -12,7 +12,9 @@
mat-raised-button
(click)="openAddKey()"
>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
<div class="cnsl-action-button">
<mat-icon class="icon">add</mat-icon><span>{{ 'ACTIONS.NEW' | translate }}</span>
</div>
</a>
</div>

4
console/src/app/modules/client-keys/client-keys.component.ts
View File

@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { Moment } from 'moment';

12
console/src/app/modules/client-keys/client-keys.module.ts
View File

@ -1,13 +1,13 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

2
console/src/app/modules/contributors/contributors.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin contributors-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);

6
console/src/app/modules/contributors/contributors.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
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 { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module';

10
console/src/app/modules/create-layout/create-layout.component.scss
View File

@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@mixin app-create-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
// Number of steps creating app
$steps: 3;
@ -35,7 +33,11 @@
.abort {
font-size: 1.2rem;
margin-left: 2rem;
margin-left: 1.5rem;
text-transform: uppercase;
font-size: 14px;
opacity: 0.8;
letter-spacing: 0.05em;
}
.abort-2 {

4
console/src/app/modules/create-layout/create-layout.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutComponent } from './create-layout.component';

6
console/src/app/modules/detail-layout/detail-layout.component.scss
View File

@ -1,10 +1,8 @@
@use '@angular/material' as mat;
@mixin detail-layout-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$lighter-color: rgba(mat.get-color-from-palette($primary, 300), 0.5);
$lighter-color: rgba(map-get($primary, 300), 0.5);
.detail-layout-head {
margin-bottom: 2rem;

2
console/src/app/modules/detail-layout/detail-layout.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { RouterModule } from '@angular/router';
import { BackModule } from 'src/app/directives/back/back.module';

5
console/src/app/modules/display-json-dialog/display-json-dialog.component.ts
View File

@ -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 { mapTo } from 'rxjs';
import { Event } from 'src/app/proto/generated/zitadel/event_pb';

4
console/src/app/modules/display-json-dialog/display-json-dialog.module.ts
View File

@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { TranslateModule } from '@ngx-translate/core';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { ToObjectPipeModule } from 'src/app/pipes/to-object/to-object.module';
@ -19,6 +20,7 @@ import { DisplayJsonDialogComponent } from './display-json-dialog.component';
FormsModule,
TranslateModule,
MatButtonModule,
MatDialogModule,
MatIconModule,
CodemirrorModule,
TimestampToDatePipeModule,

2
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.html
View File

@ -1,4 +1,4 @@
<span class="title" mat-dialog-title>{{ 'ORG.DOMAINS.ADD.TITLE' | translate }}</span>
<h1 class="title" mat-dialog-title>{{ 'ORG.DOMAINS.ADD.TITLE' | translate }}</h1>
<div mat-dialog-content>
<p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.ADD.DESCRIPTION' | translate }}</p>

4
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.scss
View File

@ -7,10 +7,6 @@
font-size: 0.9rem;
}
.form-field {
width: 100%;
}
.action {
display: flex;
justify-content: space-between;

5
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts
View File

@ -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';
@Component({
selector: 'cnsl-add-domain-dialog',

5
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.module.ts
View File

@ -1,14 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';
import { MatDialogModule } from '@angular/material/dialog';
import { AddDomainDialogComponent } from './add-domain-dialog.component';
@NgModule({
declarations: [AddDomainDialogComponent],
imports: [CommonModule, TranslateModule, MatButtonModule, InputModule, FormsModule],
imports: [CommonModule, TranslateModule, MatDialogModule, MatButtonModule, InputModule, FormsModule],
})
export class AddDomainDialogModule {}

5
console/src/app/modules/domains/domain-verification/domain-verification.component.ts
View File

@ -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 { saveAs } from 'file-saver';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { GenerateOrgDomainValidationResponse } from 'src/app/proto/generated/zitadel/management_pb';

10
console/src/app/modules/domains/domains.component.html
View File

@ -9,7 +9,7 @@
rel="noreferrer"
target="_blank"
>
<i class="las la-info-circle"></i>
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
@ -24,9 +24,11 @@
class="cnsl-action-button"
(click)="addNewDomain()"
>
<mat-icon>add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys>
<div class="cnsl-action-button">
<mat-icon>add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys>
</div>
</button>
</div>

2
console/src/app/modules/domains/domains.component.scss
View File

@ -10,7 +10,7 @@
margin: 0;
}
a i {
a .icon {
font-size: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;

3
console/src/app/modules/domains/domains.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatDialog } from '@angular/material/dialog';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Domain, DomainValidationType } from 'src/app/proto/generated/zitadel/org_pb';
@ -63,7 +63,6 @@ export class DomainsComponent implements OnInit {
public addNewDomain(): void {
const dialogRef = this.dialog.open(AddDomainDialogComponent, {
data: {},
width: '400px',
});

6
console/src/app/modules/domains/domains.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
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 { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';

10
console/src/app/modules/edit-text/edit-text.component.scss
View File

@ -3,10 +3,10 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
@ -41,7 +41,7 @@
padding: 4px 0.5rem;
font-size: 12px;
background: $primary-color;
color: mat.get-color-from-palette($primary, default-contrast);
color: map-get($primary, default-contrast);
margin: 0.25rem;
display: flex;
align-items: center;
@ -98,7 +98,7 @@
display: flex;
flex-direction: column;
align-self: flex-start;
margin-top: 30px;
margin-top: 20px;
}
}
}

4
console/src/app/modules/edit-text/edit-text.module.ts
View File

@ -2,9 +2,9 @@ import { TextFieldModule } from '@angular/cdk/text-field';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { InputModule } from 'src/app/modules/input/input.module';

17
console/src/app/modules/filter-events/filter-events.component.html
View File

@ -3,15 +3,20 @@
mat-stroked-button
cdkOverlayOrigin
(click)="showFilter = !showFilter"
class="cnsl-action-button"
#triggereventfilter="cdkOverlayOrigin"
data-e2e="open-filter-button"
>
<i class="las la-filter no-margin"></i>
<span>{{ 'ACTIONS.FILTER' | translate }}</span>
<span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span>
<cnsl-action-keys [doNotUseContrast]="true" [type]="ActionKeysType.FILTER" (actionTriggered)="showFilter = !showFilter">
</cnsl-action-keys>
<div class="cnsl-action-button">
<i class="las la-filter no-margin"></i>
<span>{{ 'ACTIONS.FILTER' | translate }}</span>
<span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span>
<cnsl-action-keys
[doNotUseContrast]="true"
[type]="ActionKeysType.FILTER"
(actionTriggered)="showFilter = !showFilter"
>
</cnsl-action-keys>
</div>
</button>
<ng-template
cdkConnectedOverlay

12
console/src/app/modules/filter-events/filter-events.component.scss
View File

@ -1,17 +1,15 @@
@use '@angular/material' as mat;
@mixin filter-events-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$lighter-primary-color: mat.get-color-from-palette($primary, 300);
$darker-primary-color: mat.get-color-from-palette($primary, 700);
$primary-color: map-get($primary, 500);
$lighter-primary-color: map-get($primary, 300);
$darker-primary-color: map-get($primary, 700);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$secondary-text: map-get($foreground, secondary-text);
$is-dark-theme: map-get($theme, is-dark);
$link-hover-color: if($is-dark-theme, mat.get-color-from-palette($primary, 200), $primary-color);
$link-hover-color: if($is-dark-theme, map-get($primary, 200), $primary-color);
$link-color: if($is-dark-theme, $lighter-primary-color, $primary-color);
.filter-events-wrapper {
@ -66,7 +64,7 @@
background-color: if($is-dark-theme, #00000020, #00000008);
margin: 0 -0.5rem;
.aggregate-type-select .mat-select {
.aggregate-type-select .mat-mdc-select {
height: 36px;
padding: 7px 10px;
}

12
console/src/app/modules/filter-events/filter-events.module.ts
View File

@ -1,14 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { OverlayModule } from '@angular/cdk/overlay';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { ActionKeysModule } from '../action-keys/action-keys.module';
import { InputModule } from '../input/input.module';
import { FilterEventsComponent } from './filter-events.component';
@ -23,9 +23,9 @@ import { FilterEventsComponent } from './filter-events.component';
ReactiveFormsModule,
OverlayModule,
MatDatepickerModule,
MatLegacyProgressSpinnerModule,
MatProgressSpinnerModule,
TranslateModule,
MatLegacyCheckboxModule,
MatCheckboxModule,
MatSelectModule,
ActionKeysModule,
],

2
console/src/app/modules/filter-org/filter-org.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-org/filter-org.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

2
console/src/app/modules/filter-project/filter-project.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-project/filter-project.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

2
console/src/app/modules/filter-user-grants/filter-user-grants.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-user-grants/filter-user-grants.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

2
console/src/app/modules/filter-user/filter-user.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-user/filter-user.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

20
console/src/app/modules/filter/filter.component.html
View File

@ -1,16 +1,12 @@
<div class="cnsl-filter-button-wrapper">
<button
mat-stroked-button
class="filter-toggle cnsl-action-button"
(click)="toggleFilter()"
cdkOverlayOrigin
#trigger="cdkOverlayOrigin"
>
<i class="las la-filter no-margin"></i>
<span>{{ 'ACTIONS.FILTER' | translate }}</span>
<span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span>
<cnsl-action-keys [doNotUseContrast]="true" [type]="ActionKeysType.FILTER" (actionTriggered)="toggleFilter()">
</cnsl-action-keys>
<button mat-stroked-button class="filter-toggle" (click)="toggleFilter()" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
<div class="cnsl-action-button">
<i class="las la-filter no-margin"></i>
<span>{{ 'ACTIONS.FILTER' | translate }}</span>
<span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span>
<cnsl-action-keys [doNotUseContrast]="true" [type]="ActionKeysType.FILTER" (actionTriggered)="toggleFilter()">
</cnsl-action-keys>
</div>
</button>
<ng-template
cdkConnectedOverlay

14
console/src/app/modules/filter/filter.component.scss
View File

@ -3,11 +3,11 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$card-background-color: mat.get-color-from-palette($background, cards);
$primary-color: map-get($primary, 500);
$card-background-color: map-get($background, cards);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
@ -56,14 +56,14 @@
}
.filter-row {
padding: 0.5rem 0;
padding: 0.5rem 0 0 0;
.cb {
padding: 0.5rem 0;
padding: 0;
font-size: 15px;
}
.filter-select-method .mat-select {
.filter-select-method .mat-mdc-select {
height: 36px;
padding: 7px 10px;
}

6
console/src/app/modules/filter/filter.module.ts
View File

@ -2,10 +2,10 @@ import { A11yModule } from '@angular/cdk/a11y';
import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { ActionKeysModule } from '../action-keys/action-keys.module';

21
console/src/app/modules/footer/footer.component.scss
View File

@ -4,11 +4,11 @@
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$lighter-primary-color: mat.get-color-from-palette($primary, 300);
$darker-primary-color: mat.get-color-from-palette($primary, 700);
$lighter-primary-color: map-get($primary, 300);
$darker-primary-color: map-get($primary, 700);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
@ -60,19 +60,6 @@
justify-content: flex-end;
flex: 1;
margin: 0.5rem 0;
i {
margin-right: 0.5rem;
}
svg {
opacity: 0.7;
fill: map-get($foreground, text);
height: 1.25rem;
width: 1.25rem;
margin-right: -8px;
margin-left: 0.5rem;
}
}
.swiss-wrapper {

15
console/src/app/modules/form-field/field/form-field.component.scss
View File

@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@mixin cnsl-form-field-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$foreground: map-get($theme, foreground);
@ -16,6 +14,15 @@
.cnsl-form-field-wrapper {
width: 100%;
margin: 10px 0;
.mat-datepicker-toggle button {
padding: 0;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}
}
.cnsl-rel {
@ -35,7 +42,7 @@
}
input {
color: mat.get-color-from-palette($foreground, text);
color: map-get($foreground, text);
}
// Wrapper for the hints and error messages.

2
console/src/app/modules/form-field/field/form-field.component.ts
View File

@ -17,7 +17,7 @@ import {
ViewEncapsulation,
} from '@angular/core';
import { NgControl } from '@angular/forms';
import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
import { MatFormFieldControl } from '@angular/material/form-field';
import { combineLatest, map, Observable, of, startWith, Subject, takeUntil } from 'rxjs';
import { CnslErrorDirective, CNSL_ERROR } from '../error/error.directive';

16
console/src/app/modules/header/header.component.html
View File

@ -177,21 +177,25 @@
id="systembutton"
*ngIf="!isOnInstance && (['iam.read$', 'iam.write$'] | hasRole | async)"
[routerLink]="['/instance']"
class="iam-settings cnsl-action-button"
class="iam-settings"
mat-stroked-button
>
<span class="iam-label">{{ 'MENU.INSTANCE' | translate }}</span>
<i class="las la-cog"></i>
<div class="cnsl-action-button">
<span class="iam-label">{{ 'MENU.INSTANCE' | translate }}</span>
<i class="las la-cog"></i>
</div>
</a>
<a
id="orgbutton"
*ngIf="isOnInstance && (['org.read'] | hasRole | async)"
[routerLink]="['/org']"
class="org-settings cnsl-action-button"
class="org-settings"
mat-stroked-button
>
<span class="iam-label">{{ 'MENU.ORGANIZATION' | translate }}</span>
<i class="las la-cog"></i>
<div class="cnsl-action-button">
<span class="iam-label">{{ 'MENU.ORGANIZATION' | translate }}</span>
<i class="las la-cog"></i>
</div>
</a>
</div>

8
console/src/app/modules/header/header.component.scss
View File

@ -9,17 +9,17 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
.filter-form {
margin: 0 0.5rem;
color: mat.get-color-from-palette($foreground, text) !important;
color: map-get($foreground, text) !important;
}
.header-wrapper {

4
console/src/app/modules/header/header.module.ts
View File

@ -2,10 +2,10 @@ import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatRippleModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

6
console/src/app/modules/idp-table/idp-table.component.scss
View File

@ -3,10 +3,10 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);

4
console/src/app/modules/idp-table/idp-table.component.ts
View File

@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { Router, RouterLink } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';

8
console/src/app/modules/idp-table/idp-table.module.ts
View File

@ -1,11 +1,11 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

5
console/src/app/modules/info-dialog/info-dialog.component.ts
View File

@ -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 { InfoSectionType } from '../info-section/info-section.component';

5
console/src/app/modules/info-dialog/info-dialog.module.ts
View File

@ -1,15 +1,16 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core';
import { MatDialogModule } from '@angular/material/dialog';
import { InfoSectionModule } from '../info-section/info-section.module';
import { InputModule } from '../input/input.module';
import { InfoDialogComponent } from './info-dialog.component';
@NgModule({
declarations: [InfoDialogComponent],
imports: [CommonModule, FormsModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule],
imports: [CommonModule, FormsModule, MatDialogModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule],
})
export class InfoDialogModule {}

6
console/src/app/modules/info-overlay/info-overlay.component.scss
View File

@ -3,10 +3,10 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);

2
console/src/app/modules/info-overlay/info-overlay.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { TranslateModule } from '@ngx-translate/core';
import { InfoOverlayComponent } from './info-overlay.component';

2
console/src/app/modules/info-row/info-row.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin info-row-theme($theme) {
$foreground: map-get($theme, foreground);
$button-text-color: map-get($foreground, text);

4
console/src/app/modules/info-row/info-row.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';

4
console/src/app/modules/info-section/info-section.component.scss
View File

@ -1,10 +1,8 @@
@use '@angular/material' as mat;
@mixin info-section-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
.info-section-row {

13
console/src/app/modules/input/input.directive.ts
View File

@ -17,15 +17,8 @@ import {
} from '@angular/core';
import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
import {
MatLegacyFormField as MatFormField,
MatLegacyFormFieldControl as MatFormFieldControl,
MAT_LEGACY_FORM_FIELD as MAT_FORM_FIELD,
} from '@angular/material/legacy-form-field';
import {
getMatLegacyInputUnsupportedTypeError as getMatInputUnsupportedTypeError,
MAT_LEGACY_INPUT_VALUE_ACCESSOR as MAT_INPUT_VALUE_ACCESSOR,
} from '@angular/material/legacy-input';
import { MatFormField, MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material/form-field';
import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
import { Subject } from 'rxjs';
// Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
@ -370,7 +363,7 @@ export class InputDirective
private _dirtyCheckPlaceholder(): void {
// If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
// screen readers will read it out twice: once from the label and once from the attribute.
const placeholder = this._formField?._hideControlPlaceholder?.() ? null : this.placeholder;
const placeholder = null;
if (placeholder !== this._previousPlaceholder) {
const element = this._elementRef.nativeElement;
this._previousPlaceholder = placeholder;

2
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html
View File

@ -34,7 +34,7 @@
</div>
</div>
<div mat-dialog-actions class="action">
<button mat-stroked-button (click)="closeDialog()">
<button cdkFocusInitial mat-stroked-button (click)="closeDialog()">
{{ 'ACTIONS.CLOSE' | translate }}
</button>
<span class="fill-space"></span>

6
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin keyboard-shortcuts-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
@ -7,9 +5,9 @@
$text-color: map-get($foreground, text);
$accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500);
$accent-color: map-get($primary, 500);
$back: map-get($background, background);
$card-background-color: mat.get-color-from-palette($background, cards);
$card-background-color: map-get($background, cards);
.keyboard-shortcuts-group {
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

5
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts
View File

@ -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 { Router } from '@angular/router';
import { KeyboardShortcut, ORGSHORTCUTS, SIDEWIDESHORTCUTS } from 'src/app/services/keyboard-shortcuts/keyboard-shortcuts';

2
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

6
console/src/app/modules/label/label.component.scss
View File

@ -1,11 +1,9 @@
@use '@angular/material' as mat;
@mixin cnsl-label-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$warn: map-get($theme, warn);
$warn-color: mat.get-color-from-palette($warn, 500);
$warn-color: map-get($warn, 500);
$foreground: map-get($theme, foreground);
$secondary-text: map-get($foreground, secondary-text);

4
console/src/app/modules/machine-keys/machine-keys.component.html
View File

@ -12,7 +12,9 @@
mat-raised-button
(click)="openAddKey()"
>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
<div class="cnsl-action-button">
<mat-icon class="icon">add</mat-icon><span>{{ 'ACTIONS.NEW' | translate }}</span>
</div>
</a>
</div>

4
console/src/app/modules/machine-keys/machine-keys.component.ts
View File

@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { Moment } from 'moment';

12
console/src/app/modules/machine-keys/machine-keys.module.ts
View File

@ -1,13 +1,13 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

90
console/src/app/modules/members-table/members-table.component.html
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>

2
console/src/app/modules/members-table/members-table.component.spec.ts
View File

@ -1,6 +1,6 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MembersTableComponent } from './members-table.component';

4
console/src/app/modules/members-table/members-table.component.ts
View File

@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatTable } from '@angular/material/table';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { InstanceMembersDataSource } from 'src/app/pages/instance/instance-members/instance-members-datasource';

12
console/src/app/modules/members-table/members-table.module.ts
View File

@ -1,14 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';

64
console/src/app/modules/memberships-table/memberships-table.component.html
View File

@ -18,25 +18,29 @@
<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]="false"
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
<th mat-header-cell *matHeaderCellDef>
<div class="selection">
<mat-checkbox
[disabled]="false"
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</div>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox
[disabled]="false"
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
<td mat-cell *matCellDef="let row">
<div class="selection">
<mat-checkbox
[disabled]="false"
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</div>
</td>
</ng-container>
@ -65,28 +69,30 @@
<th mat-header-cell *matHeaderCellDef class="role-row">{{ 'ROLESLABEL' | translate }}</th>
<td mat-cell *matCellDef="let membership">
<div class="membership-line">
<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 membership.rolesList"
[removable]="!!userId"
[selectable]="false"
(removed)="removeRole(membership, role)"
>
<div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
<span>{{ role | roletransform }}</span>
<button *ngIf="!!userId" matChipRemove>
<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="!!userId" matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</div>
</mat-chip-option>
</mat-chip-listbox>
<button
matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
(click)="goto(membership)"
mat-icon-button
class="goto-btn"
>
<i class="las la-angle-right"></i>
<mat-icon>navigate_next</mat-icon>
</button>
</div>
</td>

2
console/src/app/modules/memberships-table/memberships-table.component.spec.ts
View File

@ -1,6 +1,6 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MembershipsTableComponent } from './memberships-table.component';

2
console/src/app/modules/memberships-table/memberships-table.component.ts
View File

@ -1,6 +1,6 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
import { MatTable } from '@angular/material/table';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

14
console/src/app/modules/memberships-table/memberships-table.module.ts
View File

@ -1,15 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';

2
console/src/app/modules/meta-layout/meta-layout.module.ts
View File

@ -1,7 +1,7 @@
import { LayoutModule } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MetaLayoutComponent } from './meta-layout.component';

12
console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.html
View File

@ -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">

6
console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts
View File

@ -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(

Some files were not shown because too many files have changed in this diff Show More