mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-12 00:47:33 +00:00
feat(console): codemirror code editor for actions (#2736)
* feat: codemirror code editor * cleanup * lint * mat import * lint
This commit is contained in:
Max Peintner
@@ -20,7 +20,7 @@ import { AddActionDialogComponent } from '../add-action-dialog/add-action-dialog
|
||||
@Component({
|
||||
selector: 'cnsl-action-table',
|
||||
templateUrl: './action-table.component.html',
|
||||
styleUrls: ['./action-table.component.scss']
|
||||
styleUrls: ['./action-table.component.scss'],
|
||||
})
|
||||
export class ActionTableComponent implements OnInit {
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
@@ -34,8 +34,12 @@ export class ActionTableComponent implements OnInit {
|
||||
@Output() public changedSelection: EventEmitter<Array<Action.AsObject>> = new EventEmitter();
|
||||
|
||||
public ActionState: any = ActionState;
|
||||
constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
|
||||
private toast: ToastService) {
|
||||
constructor(
|
||||
public translate: TranslateService,
|
||||
private mgmtService: ManagementService,
|
||||
private dialog: MatDialog,
|
||||
private toast: ToastService,
|
||||
) {
|
||||
this.selection.changed.subscribe(() => {
|
||||
this.changedSelection.emit(this.selection.selected);
|
||||
});
|
||||
@@ -45,7 +49,6 @@ export class ActionTableComponent implements OnInit {
|
||||
this.getData(10, 0);
|
||||
}
|
||||
|
||||
|
||||
public isAllSelected(): boolean {
|
||||
const numSelected = this.selection.selected.length;
|
||||
const numRows = this.dataSource.data.length;
|
||||
@@ -53,39 +56,42 @@ export class ActionTableComponent implements OnInit {
|
||||
}
|
||||
|
||||
public masterToggle(): void {
|
||||
this.isAllSelected() ?
|
||||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach((row) => this.selection.select(row));
|
||||
}
|
||||
|
||||
|
||||
public changePage(event: PageEvent): void {
|
||||
this.getData(event.pageSize, event.pageIndex * event.pageSize);
|
||||
}
|
||||
|
||||
public deleteKey(action: Action.AsObject): void {
|
||||
this.mgmtService.deleteAction(action.id).then(() => {
|
||||
this.selection.clear();
|
||||
this.toast.showInfo('FLOWS.TOAST.SELECTEDKEYSDELETED', true);
|
||||
this.getData(10, 0);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
this.mgmtService
|
||||
.deleteAction(action.id)
|
||||
.then(() => {
|
||||
this.selection.clear();
|
||||
this.toast.showInfo('FLOWS.TOAST.SELECTEDKEYSDELETED', true);
|
||||
this.getData(10, 0);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
public openAddAction(): void {
|
||||
const dialogRef = this.dialog.open(AddActionDialogComponent, {
|
||||
data: {},
|
||||
width: '400px',
|
||||
width: '500px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((req: CreateActionRequest) => {
|
||||
if (req) {
|
||||
this.mgmtService.createAction(req).then(resp => {
|
||||
this.refreshPage();
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
this.mgmtService
|
||||
.createAction(req)
|
||||
.then((resp) => {
|
||||
this.refreshPage();
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -95,31 +101,37 @@ export class ActionTableComponent implements OnInit {
|
||||
data: {
|
||||
action: action,
|
||||
},
|
||||
width: '400px',
|
||||
width: '500px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((req: UpdateActionRequest) => {
|
||||
if (req) {
|
||||
this.mgmtService.updateAction(req).then(resp => {
|
||||
this.refreshPage();
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
this.mgmtService
|
||||
.updateAction(req)
|
||||
.then((resp) => {
|
||||
this.refreshPage();
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private async getData(limit: number, offset: number): Promise<void> {
|
||||
this.loadingSubject.next(true);
|
||||
|
||||
this.mgmtService.listActions(limit, offset).then(resp => {
|
||||
this.actionsResult = resp;
|
||||
this.dataSource.data = this.actionsResult.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
|
||||
this.mgmtService
|
||||
.listActions(limit, offset)
|
||||
.then((resp) => {
|
||||
this.actionsResult = resp;
|
||||
this.dataSource.data = this.actionsResult.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
}
|
||||
|
||||
public refreshPage(): void {
|
||||
|
||||
@@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
import { FormFieldModule } from 'src/app/modules/form-field/form-field.module';
|
||||
@@ -55,6 +56,7 @@ import { AddFlowDialogComponent } from './add-flow-dialog/add-flow-dialog.compon
|
||||
DragDropModule,
|
||||
InfoSectionModule,
|
||||
HasFeaturePipeModule,
|
||||
CodemirrorModule,
|
||||
],
|
||||
})
|
||||
export class ActionsModule {}
|
||||
|
||||
@@ -2,17 +2,16 @@
|
||||
<span *ngIf="id" class="title" mat-dialog-title>{{'FLOWS.DIALOG.UPDATE.TITLE' | translate}}</span>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<!-- <p class="desc"> {{'FLOWS.DIALOG.ADD.DESCRIPTION' | translate}}</p> -->
|
||||
|
||||
<cnsl-form-field class="form-field" appearance="outline">
|
||||
<cnsl-label>{{'FLOWS.NAME' | translate}}</cnsl-label>
|
||||
<input cnslInput [(ngModel)]="name">
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-form-field class="form-field" appearance="outline">
|
||||
<cnsl-label>{{'FLOWS.SCRIPT' | translate}}</cnsl-label>
|
||||
<textarea class="script" cnslInput [(ngModel)]="script"></textarea>
|
||||
</cnsl-form-field>
|
||||
<ngx-codemirror *ngIf="opened$ | async" [(ngModel)]="script" [options]="{
|
||||
lineNumbers: true,
|
||||
theme: 'material',
|
||||
mode: 'javascript'
|
||||
}"></ngx-codemirror>
|
||||
|
||||
<cnsl-form-field class="form-field" appearance="outline">
|
||||
<cnsl-label>{{'FLOWS.TIMEOUTINSEC' | translate}}</cnsl-label>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
@@ -8,8 +10,11 @@
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.script {
|
||||
min-height: 200px;
|
||||
@mixin action-dialog-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$foreground: map-get($theme, foreground);
|
||||
}
|
||||
|
||||
.action {
|
||||
|
||||
@@ -1,99 +1,104 @@
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
|
||||
import { mapTo } from 'rxjs';
|
||||
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
|
||||
import { Action } from 'src/app/proto/generated/zitadel/action_pb';
|
||||
import { CreateActionRequest, UpdateActionRequest } from 'src/app/proto/generated/zitadel/management_pb';
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-add-action-dialog',
|
||||
templateUrl: './add-action-dialog.component.html',
|
||||
styleUrls: ['./add-action-dialog.component.scss'],
|
||||
selector: 'cnsl-add-action-dialog',
|
||||
templateUrl: './add-action-dialog.component.html',
|
||||
styleUrls: ['./add-action-dialog.component.scss'],
|
||||
})
|
||||
export class AddActionDialogComponent {
|
||||
public name: string = '';
|
||||
public script: string = '';
|
||||
public durationInSec: number = 10;
|
||||
public allowedToFail: boolean = false;
|
||||
public name: string = '';
|
||||
public script: string = '';
|
||||
public durationInSec: number = 10;
|
||||
public allowedToFail: boolean = false;
|
||||
|
||||
public id: string = '';
|
||||
|
||||
constructor(
|
||||
private toast: ToastService,
|
||||
private mgmtService: ManagementService,
|
||||
private dialog: MatDialog,
|
||||
public dialogRef: MatDialogRef<AddActionDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
) {
|
||||
if (data && data.action) {
|
||||
const action: Action.AsObject = data.action;
|
||||
this.name = action.name;
|
||||
this.script = action.script;
|
||||
if (action.timeout?.seconds) {
|
||||
this.durationInSec = action.timeout?.seconds;
|
||||
}
|
||||
this.allowedToFail = action.allowedToFail;
|
||||
this.id = action.id;
|
||||
}
|
||||
}
|
||||
public id: string = '';
|
||||
|
||||
public closeDialog(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
public opened$ = this.dialogRef.afterOpened().pipe(mapTo(true));
|
||||
|
||||
public closeDialogWithSuccess(): void {
|
||||
if (this.id) {
|
||||
const req = new UpdateActionRequest();
|
||||
req.setId(this.id);
|
||||
req.setName(this.name);
|
||||
req.setScript(this.script);
|
||||
|
||||
const duration = new Duration();
|
||||
duration.setNanos(0);
|
||||
duration.setSeconds(this.durationInSec);
|
||||
|
||||
req.setAllowedToFail(this.allowedToFail);
|
||||
|
||||
req.setTimeout(duration)
|
||||
this.dialogRef.close(req);
|
||||
} else {
|
||||
const req = new CreateActionRequest();
|
||||
req.setName(this.name);
|
||||
req.setScript(this.script);
|
||||
|
||||
const duration = new Duration();
|
||||
duration.setNanos(0);
|
||||
duration.setSeconds(this.durationInSec);
|
||||
|
||||
req.setAllowedToFail(this.allowedToFail);
|
||||
|
||||
req.setTimeout(duration)
|
||||
this.dialogRef.close(req);
|
||||
constructor(
|
||||
private toast: ToastService,
|
||||
private mgmtService: ManagementService,
|
||||
private dialog: MatDialog,
|
||||
public dialogRef: MatDialogRef<AddActionDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
) {
|
||||
if (data && data.action) {
|
||||
const action: Action.AsObject = data.action;
|
||||
this.name = action.name;
|
||||
this.script = action.script;
|
||||
if (action.timeout?.seconds) {
|
||||
this.durationInSec = action.timeout?.seconds;
|
||||
}
|
||||
this.allowedToFail = action.allowedToFail;
|
||||
this.id = action.id;
|
||||
}
|
||||
}
|
||||
|
||||
public deleteAndCloseDialog(): void {
|
||||
const dialogRef = this.dialog.open(WarnDialogComponent, {
|
||||
data: {
|
||||
confirmKey: 'ACTIONS.CLEAR',
|
||||
cancelKey: 'ACTIONS.CANCEL',
|
||||
titleKey: 'FLOWS.DIALOG.DELETEACTION.TITLE',
|
||||
descriptionKey: 'FLOWS.DIALOG.DELETEACTION.DESCRIPTION',
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
public closeDialog(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
if (resp) {
|
||||
this.mgmtService.deleteAction(this.id).then(resp => {
|
||||
public closeDialogWithSuccess(): void {
|
||||
if (this.id) {
|
||||
const req = new UpdateActionRequest();
|
||||
req.setId(this.id);
|
||||
req.setName(this.name);
|
||||
req.setScript(this.script);
|
||||
|
||||
const duration = new Duration();
|
||||
duration.setNanos(0);
|
||||
duration.setSeconds(this.durationInSec);
|
||||
|
||||
req.setAllowedToFail(this.allowedToFail);
|
||||
|
||||
req.setTimeout(duration);
|
||||
this.dialogRef.close(req);
|
||||
} else {
|
||||
const req = new CreateActionRequest();
|
||||
req.setName(this.name);
|
||||
req.setScript(this.script);
|
||||
|
||||
const duration = new Duration();
|
||||
duration.setNanos(0);
|
||||
duration.setSeconds(this.durationInSec);
|
||||
|
||||
req.setAllowedToFail(this.allowedToFail);
|
||||
|
||||
req.setTimeout(duration);
|
||||
this.dialogRef.close(req);
|
||||
}
|
||||
}
|
||||
|
||||
public deleteAndCloseDialog(): void {
|
||||
const dialogRef = this.dialog.open(WarnDialogComponent, {
|
||||
data: {
|
||||
confirmKey: 'ACTIONS.DELETE',
|
||||
cancelKey: 'ACTIONS.CANCEL',
|
||||
titleKey: 'FLOWS.DIALOG.DELETEACTION.TITLE',
|
||||
descriptionKey: 'FLOWS.DIALOG.DELETEACTION.DESCRIPTION',
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((resp) => {
|
||||
if (resp) {
|
||||
this.mgmtService
|
||||
.deleteAction(this.id)
|
||||
.then((resp) => {
|
||||
this.dialogRef.close();
|
||||
}).catch((error: any) => {
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
@import 'src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss';
|
||||
@import 'src/app/modules/info-row/info-row.component.scss';
|
||||
@import 'src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.scss';
|
||||
@import 'src/app/pages/actions/add-action-dialog/add-action-dialog.component';
|
||||
@import './styles/codemirror.scss';
|
||||
|
||||
@mixin component-themes($theme) {
|
||||
@include avatar-theme($theme);
|
||||
@@ -52,4 +54,6 @@
|
||||
@include owned-project-grid-theme($theme);
|
||||
@include granted-project-grid-theme($theme);
|
||||
@include info-row-theme($theme);
|
||||
@include action-dialog-theme($theme);
|
||||
@include codemirror-theme($theme);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
|
||||
import 'codemirror/mode/javascript/javascript';
|
||||
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
@@ -7,9 +7,9 @@ import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic()
|
||||
.bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
.bootstrapModule(AppModule)
|
||||
.catch((err) => console.error(err));
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@import '~codemirror/lib/codemirror';
|
||||
@import './component-themes';
|
||||
@import '@angular/material/theming';
|
||||
|
||||
@@ -23,22 +24,21 @@
|
||||
}
|
||||
|
||||
$caos-dark-primary: (
|
||||
50 : var(--theme-dark-primary-50),
|
||||
100 : var(--theme-dark-primary-100),
|
||||
200 : var(--theme-dark-primary-200),
|
||||
300 : var(--theme-dark-primary-300),
|
||||
400 : var(--theme-dark-primary-400),
|
||||
500 : var(--theme-dark-primary-500),
|
||||
600 : var(--theme-dark-primary-600),
|
||||
700 : var(--theme-dark-primary-700),
|
||||
800 : var(--theme-dark-primary-800),
|
||||
900 : var(--theme-dark-primary-900),
|
||||
A100 : var(--theme-dark-primary-A100),
|
||||
A200 : var(--theme-dark-primary-A200),
|
||||
A400 : var(--theme-dark-primary-A400),
|
||||
A700 : var(--theme-dark-primary-A700),
|
||||
contrast:
|
||||
(
|
||||
50: var(--theme-dark-primary-50),
|
||||
100: var(--theme-dark-primary-100),
|
||||
200: var(--theme-dark-primary-200),
|
||||
300: var(--theme-dark-primary-300),
|
||||
400: var(--theme-dark-primary-400),
|
||||
500: var(--theme-dark-primary-500),
|
||||
600: var(--theme-dark-primary-600),
|
||||
700: var(--theme-dark-primary-700),
|
||||
800: var(--theme-dark-primary-800),
|
||||
900: var(--theme-dark-primary-900),
|
||||
A100: var(--theme-dark-primary-A100),
|
||||
A200: var(--theme-dark-primary-A200),
|
||||
A400: var(--theme-dark-primary-A400),
|
||||
A700: var(--theme-dark-primary-A700),
|
||||
contrast: (
|
||||
50: var(--theme-dark-primary-contrast-50),
|
||||
100: var(--theme-dark-primary-contrast-100),
|
||||
200: var(--theme-dark-primary-contrast-200),
|
||||
@@ -52,27 +52,26 @@ $caos-dark-primary: (
|
||||
A100: var(--theme-dark-primary-contrast-A100),
|
||||
A200: var(--theme-dark-primary-contrast-A200),
|
||||
A400: var(--theme-dark-primary-contrast-A400),
|
||||
A700: var(--theme-dark-primary-contrast-A700)
|
||||
)
|
||||
A700: var(--theme-dark-primary-contrast-A700),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-light-primary: (
|
||||
50 : var(--theme-light-primary-50),
|
||||
100 : var(--theme-light-primary-100),
|
||||
200 : var(--theme-light-primary-200),
|
||||
300 : var(--theme-light-primary-300),
|
||||
400 : var(--theme-light-primary-400),
|
||||
500 : var(--theme-light-primary-500),
|
||||
600 : var(--theme-light-primary-600),
|
||||
700 : var(--theme-light-primary-700),
|
||||
800 : var(--theme-light-primary-800),
|
||||
900 : var(--theme-light-primary-900),
|
||||
A100 : var(--theme-light-primary-A100),
|
||||
A200 : var(--theme-light-primary-A200),
|
||||
A400 : var(--theme-light-primary-A400),
|
||||
A700 : var(--theme-light-primary-A700),
|
||||
contrast:
|
||||
(
|
||||
50: var(--theme-light-primary-50),
|
||||
100: var(--theme-light-primary-100),
|
||||
200: var(--theme-light-primary-200),
|
||||
300: var(--theme-light-primary-300),
|
||||
400: var(--theme-light-primary-400),
|
||||
500: var(--theme-light-primary-500),
|
||||
600: var(--theme-light-primary-600),
|
||||
700: var(--theme-light-primary-700),
|
||||
800: var(--theme-light-primary-800),
|
||||
900: var(--theme-light-primary-900),
|
||||
A100: var(--theme-light-primary-A100),
|
||||
A200: var(--theme-light-primary-A200),
|
||||
A400: var(--theme-light-primary-A400),
|
||||
A700: var(--theme-light-primary-A700),
|
||||
contrast: (
|
||||
50: var(--theme-light-primary-contrast-50),
|
||||
100: var(--theme-light-primary-contrast-100),
|
||||
200: var(--theme-light-primary-contrast-200),
|
||||
@@ -86,27 +85,26 @@ $caos-light-primary: (
|
||||
A100: var(--theme-light-primary-contrast-A100),
|
||||
A200: var(--theme-light-primary-contrast-A200),
|
||||
A400: var(--theme-light-primary-contrast-A400),
|
||||
A700: var(--theme-light-primary-contrast-A700)
|
||||
)
|
||||
A700: var(--theme-light-primary-contrast-A700),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-dark-background: (
|
||||
50 : var(--theme-dark-background-50),
|
||||
100 : var(--theme-dark-background-100),
|
||||
200 : var(--theme-dark-background-200),
|
||||
300 : var(--theme-dark-background-300),
|
||||
400 : var(--theme-dark-background-400),
|
||||
500 : var(--theme-dark-background-500),
|
||||
600 : var(--theme-dark-background-600),
|
||||
700 : var(--theme-dark-background-700),
|
||||
800 : var(--theme-dark-background-800),
|
||||
900 : var(--theme-dark-background-900),
|
||||
A100 : var(--theme-dark-background-A100),
|
||||
A200 : var(--theme-dark-background-A200),
|
||||
A400 : var(--theme-dark-background-A400),
|
||||
A700 : var(--theme-dark-background-A700),
|
||||
contrast:
|
||||
(
|
||||
50: var(--theme-dark-background-50),
|
||||
100: var(--theme-dark-background-100),
|
||||
200: var(--theme-dark-background-200),
|
||||
300: var(--theme-dark-background-300),
|
||||
400: var(--theme-dark-background-400),
|
||||
500: var(--theme-dark-background-500),
|
||||
600: var(--theme-dark-background-600),
|
||||
700: var(--theme-dark-background-700),
|
||||
800: var(--theme-dark-background-800),
|
||||
900: var(--theme-dark-background-900),
|
||||
A100: var(--theme-dark-background-A100),
|
||||
A200: var(--theme-dark-background-A200),
|
||||
A400: var(--theme-dark-background-A400),
|
||||
A700: var(--theme-dark-background-A700),
|
||||
contrast: (
|
||||
50: var(--theme-dark-background-contrast-50),
|
||||
100: var(--theme-dark-background-contrast-100),
|
||||
200: var(--theme-dark-background-contrast-200),
|
||||
@@ -120,27 +118,26 @@ $caos-dark-background: (
|
||||
A100: var(--theme-dark-background-contrast-A100),
|
||||
A200: var(--theme-dark-background-contrast-A200),
|
||||
A400: var(--theme-dark-background-contrast-A400),
|
||||
A700: var(--theme-dark-background-contrast-A700)
|
||||
)
|
||||
A700: var(--theme-dark-background-contrast-A700),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-light-background: (
|
||||
50 : var(--theme-light-background-50),
|
||||
100 : var(--theme-light-background-100),
|
||||
200 : var(--theme-light-background-200),
|
||||
300 : var(--theme-light-background-300),
|
||||
400 : var(--theme-light-background-400),
|
||||
500 : var(--theme-light-background-500),
|
||||
600 : var(--theme-light-background-600),
|
||||
700 : var(--theme-light-background-700),
|
||||
800 : var(--theme-light-background-800),
|
||||
900 : var(--theme-light-background-900),
|
||||
A100 : var(--theme-light-background-A100),
|
||||
A200 : var(--theme-light-background-A200),
|
||||
A400 : var(--theme-light-background-A400),
|
||||
A700 : var(--theme-light-background-A700),
|
||||
contrast:
|
||||
(
|
||||
50: var(--theme-light-background-50),
|
||||
100: var(--theme-light-background-100),
|
||||
200: var(--theme-light-background-200),
|
||||
300: var(--theme-light-background-300),
|
||||
400: var(--theme-light-background-400),
|
||||
500: var(--theme-light-background-500),
|
||||
600: var(--theme-light-background-600),
|
||||
700: var(--theme-light-background-700),
|
||||
800: var(--theme-light-background-800),
|
||||
900: var(--theme-light-background-900),
|
||||
A100: var(--theme-light-background-A100),
|
||||
A200: var(--theme-light-background-A200),
|
||||
A400: var(--theme-light-background-A400),
|
||||
A700: var(--theme-light-background-A700),
|
||||
contrast: (
|
||||
50: var(--theme-light-background-contrast-50),
|
||||
100: var(--theme-light-background-contrast-100),
|
||||
200: var(--theme-light-background-contrast-200),
|
||||
@@ -154,27 +151,26 @@ $caos-light-background: (
|
||||
A100: var(--theme-light-background-contrast-A100),
|
||||
A200: var(--theme-light-background-contrast-A200),
|
||||
A400: var(--theme-light-background-contrast-A400),
|
||||
A700: var(--theme-light-background-contrast-A700)
|
||||
)
|
||||
A700: var(--theme-light-background-contrast-A700),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-dark-warn: (
|
||||
50 : var(--theme-dark-warn-50),
|
||||
100 : var(--theme-dark-warn-100),
|
||||
200 : var(--theme-dark-warn-200),
|
||||
300 : var(--theme-dark-warn-300),
|
||||
400 : var(--theme-dark-warn-400),
|
||||
500 : var(--theme-dark-warn-500),
|
||||
600 : var(--theme-dark-warn-600),
|
||||
700 : var(--theme-dark-warn-700),
|
||||
800 : var(--theme-dark-warn-800),
|
||||
900 : var(--theme-dark-warn-900),
|
||||
A100 : var(--theme-dark-warn-A100),
|
||||
A200 : var(--theme-dark-warn-A200),
|
||||
A400 : var(--theme-dark-warn-A400),
|
||||
A700 : var(--theme-dark-warn-A700),
|
||||
contrast:
|
||||
(
|
||||
50: var(--theme-dark-warn-50),
|
||||
100: var(--theme-dark-warn-100),
|
||||
200: var(--theme-dark-warn-200),
|
||||
300: var(--theme-dark-warn-300),
|
||||
400: var(--theme-dark-warn-400),
|
||||
500: var(--theme-dark-warn-500),
|
||||
600: var(--theme-dark-warn-600),
|
||||
700: var(--theme-dark-warn-700),
|
||||
800: var(--theme-dark-warn-800),
|
||||
900: var(--theme-dark-warn-900),
|
||||
A100: var(--theme-dark-warn-A100),
|
||||
A200: var(--theme-dark-warn-A200),
|
||||
A400: var(--theme-dark-warn-A400),
|
||||
A700: var(--theme-dark-warn-A700),
|
||||
contrast: (
|
||||
50: var(--theme-dark-warn-contrast-50),
|
||||
100: var(--theme-dark-warn-contrast-100),
|
||||
200: var(--theme-dark-warn-contrast-200),
|
||||
@@ -188,27 +184,26 @@ $caos-dark-warn: (
|
||||
A100: var(--theme-dark-warn-contrast-A100),
|
||||
A200: var(--theme-dark-warn-contrast-A200),
|
||||
A400: var(--theme-dark-warn-contrast-A400),
|
||||
A700: var(--theme-dark-warn-contrast-A700)
|
||||
)
|
||||
A700: var(--theme-dark-warn-contrast-A700),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-light-warn: (
|
||||
50 : var(--theme-light-warn-50),
|
||||
100 : var(--theme-light-warn-100),
|
||||
200 : var(--theme-light-warn-200),
|
||||
300 : var(--theme-light-warn-300),
|
||||
400 : var(--theme-light-warn-400),
|
||||
500 : var(--theme-light-warn-500),
|
||||
600 : var(--theme-light-warn-600),
|
||||
700 : var(--theme-light-warn-700),
|
||||
800 : var(--theme-light-warn-800),
|
||||
900 : var(--theme-light-warn-900),
|
||||
A100 : var(--theme-light-warn-A100),
|
||||
A200 : var(--theme-light-warn-A200),
|
||||
A400 : var(--theme-light-warn-A400),
|
||||
A700 : var(--theme-light-warn-A700),
|
||||
contrast:
|
||||
(
|
||||
50: var(--theme-light-warn-50),
|
||||
100: var(--theme-light-warn-100),
|
||||
200: var(--theme-light-warn-200),
|
||||
300: var(--theme-light-warn-300),
|
||||
400: var(--theme-light-warn-400),
|
||||
500: var(--theme-light-warn-500),
|
||||
600: var(--theme-light-warn-600),
|
||||
700: var(--theme-light-warn-700),
|
||||
800: var(--theme-light-warn-800),
|
||||
900: var(--theme-light-warn-900),
|
||||
A100: var(--theme-light-warn-A100),
|
||||
A200: var(--theme-light-warn-A200),
|
||||
A400: var(--theme-light-warn-A400),
|
||||
A700: var(--theme-light-warn-A700),
|
||||
contrast: (
|
||||
50: var(--theme-light-warn-contrast-50),
|
||||
100: var(--theme-light-warn-contrast-100),
|
||||
200: var(--theme-light-warn-contrast-200),
|
||||
@@ -222,8 +217,8 @@ $caos-light-warn: (
|
||||
A100: var(--theme-light-warn-contrast-A100),
|
||||
A200: var(--theme-light-warn-contrast-A200),
|
||||
A400: var(--theme-light-warn-contrast-A400),
|
||||
A700: var(--theme-light-warn-contrast-A700)
|
||||
)
|
||||
A700: var(--theme-light-warn-contrast-A700),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-dark-theme-background: (
|
||||
@@ -244,7 +239,7 @@ $caos-dark-theme-background: (
|
||||
tooltip: map_get($mat-gray, 700),
|
||||
infosection: map_get($caos-dark-background, 300),
|
||||
warninfosection: #4f566b,
|
||||
successinfosection: #4f566b
|
||||
successinfosection: #4f566b,
|
||||
);
|
||||
|
||||
$caos-light-theme-background: (
|
||||
@@ -265,7 +260,7 @@ $caos-light-theme-background: (
|
||||
tooltip: map_get($mat-gray, 700),
|
||||
infosection: #e4e4e4,
|
||||
warninfosection: #ffc1c1,
|
||||
successinfosection: #cbf4c9
|
||||
successinfosection: #cbf4c9,
|
||||
);
|
||||
|
||||
$caos-dark-theme-foreground: (
|
||||
@@ -286,7 +281,7 @@ $caos-dark-theme-foreground: (
|
||||
slider-off-active: rgba(white, .38),
|
||||
infosection: #f0f0f0,
|
||||
warninfosection: #ffc1c1,
|
||||
successinfosection: #cbf4c9
|
||||
successinfosection: #cbf4c9,
|
||||
);
|
||||
|
||||
$caos-light-theme-foreground: (
|
||||
@@ -307,7 +302,7 @@ $caos-light-theme-foreground: (
|
||||
slider-off-active: rgba(black, .38),
|
||||
infosection: #4a4a4a,
|
||||
warninfosection: #620e0e,
|
||||
successinfosection: #0e6245
|
||||
successinfosection: #0e6245,
|
||||
);
|
||||
|
||||
$caos-dark-app-theme: (
|
||||
@@ -316,7 +311,7 @@ $caos-dark-app-theme: (
|
||||
warn: mat-palette($caos-dark-warn),
|
||||
is-dark: true,
|
||||
foreground: $caos-dark-theme-foreground,
|
||||
background: $caos-dark-theme-background
|
||||
background: $caos-dark-theme-background,
|
||||
);
|
||||
|
||||
$caos-light-app-theme: (
|
||||
@@ -325,10 +320,13 @@ $caos-light-app-theme: (
|
||||
warn: mat-palette($caos-light-warn),
|
||||
is-dark: false,
|
||||
foreground: $caos-light-theme-foreground,
|
||||
background: $caos-light-theme-background
|
||||
background: $caos-light-theme-background,
|
||||
);
|
||||
|
||||
$custom-typography: mat.define-typography-config($font-family: 'Lato');
|
||||
$custom-typography:
|
||||
mat.define-typography-config(
|
||||
$font-family: 'Lato',
|
||||
);
|
||||
|
||||
@include mat.core($custom-typography);
|
||||
@include component-themes($caos-dark-app-theme);
|
||||
@@ -443,14 +441,14 @@ body {
|
||||
'Lato',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"Roboto",
|
||||
"Oxygen",
|
||||
"Ubuntu",
|
||||
"Cantarell",
|
||||
"Fira Sans",
|
||||
"Droid Sans",
|
||||
"Helvetica Neue",
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
'Oxygen',
|
||||
'Ubuntu',
|
||||
'Cantarell',
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
|
||||
149
console/src/styles/codemirror.scss
Normal file
149
console/src/styles/codemirror.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
/*
|
||||
Name: material
|
||||
Author: Mattia Astorino (http://github.com/equinusocio)
|
||||
Website: https://material-theme.site/
|
||||
*/
|
||||
|
||||
@mixin codemirror-theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background-color: if($is-dark-theme, #00000020, #263238);
|
||||
color: #eff;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid if($is-dark-theme, #403e3e, #00000040);
|
||||
}
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #263238;
|
||||
color: #546e7a;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-guttermarker,
|
||||
.cm-s-material .CodeMirror-guttermarker-subtle,
|
||||
.cm-s-material .CodeMirror-linenumber {
|
||||
color: #546e7a;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-cursor {
|
||||
border-left: 1px solid #fc0;
|
||||
}
|
||||
|
||||
.cm-s-material.cm-fat-cursor .CodeMirror-cursor {
|
||||
background-color: #5d6d5c80 !important;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-animate-fat-cursor {
|
||||
background-color: #5d6d5c80 !important;
|
||||
}
|
||||
|
||||
.cm-s-material div.CodeMirror-selected {
|
||||
background: rgba(128, 203, 196, .2);
|
||||
}
|
||||
|
||||
.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
|
||||
background: rgba(128, 203, 196, .2);
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-line::selection,
|
||||
.cm-s-material .CodeMirror-line > span::selection,
|
||||
.cm-s-material .CodeMirror-line > span > span::selection {
|
||||
background: rgba(128, 203, 196, .2);
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-line::-moz-selection,
|
||||
.cm-s-material .CodeMirror-line > span::-moz-selection,
|
||||
.cm-s-material .CodeMirror-line > span > span::-moz-selection {
|
||||
background: rgba(128, 203, 196, .2);
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-activeline-background {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.cm-s-material .cm-keyword {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-operator {
|
||||
color: #89ddff;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-variable-2 {
|
||||
color: #eff;
|
||||
}
|
||||
|
||||
// .cm-s-material .cm-variable-3,
|
||||
// .cm-s-material .cm-type {
|
||||
// color: #f07178;
|
||||
// }
|
||||
|
||||
.cm-s-material .cm-builtin {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-atom {
|
||||
color: #f78c6c;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-number {
|
||||
color: #ff5370;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-def {
|
||||
color: #82aaff;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-string {
|
||||
color: #c3e88d;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-string-2 {
|
||||
color: #f07178;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-comment {
|
||||
color: #546e7a;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-variable {
|
||||
color: #f07178;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-tag {
|
||||
color: #ff5370;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-meta {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-attribute {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-property {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-qualifier {
|
||||
color: #decb6b;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-variable-3,
|
||||
.cm-s-material .cm-type {
|
||||
color: #decb6b;
|
||||
}
|
||||
|
||||
.cm-s-material .cm-error {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: #ff5370;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-matchingbracket {
|
||||
text-decoration: underline;
|
||||
color: white !important;
|
||||
}
|
||||
Reference in New Issue
Block a user