mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-11 00:25:12 +00:00
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:
co-authored by
Livio Amstutz
parent
00f7dbe875
commit
08ae39ae19
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user