feat: rehauled console (#3525)

* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
2022-04-28 10:35:02 +00:00
committed by GitHub
co-authored by Livio Amstutz
parent 00f7dbe875
commit 08ae39ae19
668 changed files with 47746 additions and 19117 deletions
@@ -1,20 +1,25 @@
<div class="paginator">
<div class="col">
<p class="length"><span>{{length}} </span>{{'PAGINATOR.COUNT' | translate}}</p>
<p class="ts" *ngIf="timestamp">{{timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm'}}</p>
</div>
<span class="fill-space"></span>
<span class="pos">{{pageIndex * pageSize}} - {{pageIndex * pageSize + pageSize}} </span>
<div class="row">
<cnsl-form-field class="size" appearance="outline">
<mat-select [(ngModel)]="pageSize" (selectionChange)="emitChange()">
<mat-option *ngFor="let sizeOption of pageSizeOptions" [value]="sizeOption">
{{sizeOption}}
</mat-option>
</mat-select>
</cnsl-form-field>
<button (click)="previous()" [disabled]="!previousPossible" mat-button>{{'PAGINATOR.PREVIOUS' |
translate}}</button>
<button (click)="next()" [disabled]="!nextPossible" mat-button>{{'PAGINATOR.NEXT' | translate}}</button>
</div>
<div class="paginator-wrapper">
<div class="col">
<p class="length"><span>{{length}} </span>{{'PAGINATOR.COUNT' | translate}}</p>
<p class="ts cnsl-secondary-text" *ngIf="timestamp">
{{(timestamp | timestampToDate)| localizedDate: 'EEEE dd. MMM YYYY, HH:mm'}}
</p>
</div>
<span class="fill-space"></span>
<span class="pos cnsl-secondary-text" *ngIf="!hidePagination">{{pageIndex * pageSize}} - {{pageIndex * pageSize +
pageSize}} </span>
<div class="row" *ngIf="!hidePagination">
<cnsl-form-field class="size" appearance="outline">
<mat-select [(ngModel)]="pageSize" (selectionChange)="emitChange()">
<mat-option *ngFor="let sizeOption of pageSizeOptions" [value]="sizeOption">
{{sizeOption}}
</mat-option>
</mat-select>
</cnsl-form-field>
<button *ngIf="previousPossible" (click)="previous()" [disabled]="!previousPossible"
mat-stroked-button>{{'PAGINATOR.PREVIOUS' |
translate}}</button>
<button *ngIf="nextPossible" (click)="next()" [disabled]="!nextPossible" mat-stroked-button>{{'PAGINATOR.NEXT' |
translate}}</button>
</div>
</div>
@@ -1,13 +1,9 @@
.paginator {
.paginator-wrapper {
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
padding-top: .5rem;
padding-bottom: 1rem;
@media only screen and (min-width: 500px) {
flex-direction: row;
}
padding-top: 0.5rem;
padding-bottom: 0.5rem;
.col {
p {
@@ -16,11 +12,11 @@
.length {
font-size: 14px;
white-space: nowrap;
}
.ts {
font-size: 12px;
color: var(--grey);
}
}
@@ -30,17 +26,17 @@
.pos {
font-size: 12px;
margin: .5rem 1rem .5rem 1rem;
color: var(--grey);
margin: 0.5rem 1rem 0.5rem 1rem;
white-space: nowrap;
}
.size {
transform: translateY(1px);
margin-right: .5rem;
margin-right: 0.5rem;
}
button {
margin: 0 .5rem;
margin: 0 0.5rem;
}
:last-child {
@@ -19,8 +19,9 @@ export class PaginatorComponent {
@Input() public pageSize: number = 10;
@Input() public pageIndex: number = 0;
@Input() public pageSizeOptions: Array<number> = [10, 25, 50];
@Input() public hidePagination: boolean = false;
@Output() public page: EventEmitter<PageEvent> = new EventEmitter();
constructor() { }
constructor() {}
public previous(): void {
if (this.previousPossible) {
@@ -38,12 +39,12 @@ export class PaginatorComponent {
get previousPossible(): boolean {
const temp = this.pageIndex - 1;
return (temp >= 0);
return temp >= 0;
}
get nextPossible(): boolean {
const temp = this.pageIndex + 1;
return (temp <= (this.length / this.pageSize));
return temp <= this.length / this.pageSize;
}
public emitChange(): void {