fix(console): project role ui optimization, disable resend init mail btn for reader (#2615)

* fix: new role button alignment

* disable init mail btn

* stylelint
This commit is contained in:
Max Peintner 2021-11-09 12:21:40 +01:00 committed by GitHub
parent b1ef990785
commit 659d1b1252
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 44 deletions

View File

@ -1,41 +1,45 @@
<div class="container"> <div class="container">
<div class="abort-container"> <div class="abort-container">
<button (click)="close()" mat-icon-button> <button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'PROJECT.ROLE.ADDTITLE' | translate }}</span><span class="abort-2">Step
{{ currentCreateStep }} of
{{ createSteps }}</span>
</div>
<h1>{{'PROJECT.ROLE.ADDDESCRIPTION' | translate}}</h1>
<form @list (ngSubmit)="addRole()">
<div @animate *ngFor="let formGroup of formArray.controls; index as i" class="newrole-content">
<ng-container [formGroup]="$any(formGroup)">
<div class="newrole">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'PROJECT.ROLE.KEY' | translate }}</cnsl-label>
<input cnslInput formControlName="key" />
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="displayName" />
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</cnsl-label>
<input cnslInput formControlName="group" />
</cnsl-form-field>
</div>
<button *ngIf="i !== 0" mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
<i class="las la-trash"></i>
</button> </button>
<span class="abort">{{ 'PROJECT.ROLE.ADDTITLE' | translate }}</span><span class="abort-2">Step </ng-container>
{{ currentCreateStep }} of
{{ createSteps }}</span>
</div> </div>
<h1>{{'PROJECT.ROLE.ADDDESCRIPTION' | translate}}</h1>
<button class="add-line-btn" color="primary" type="button" mat-stroked-button (click)="addEntry()"> <button class="add-line-btn" color="primary" type="button" mat-stroked-button (click)="addEntry()">
{{'PROJECT.ROLE.ADDNEWLINE' | translate}} {{'PROJECT.ROLE.ADDNEWLINE' | translate}}
</button> </button>
<form @list (ngSubmit)="addRole()">
<div @animate *ngFor="let formGroup of formArray.controls; index as i" class="content">
<ng-container [formGroup]="$any(formGroup)">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'PROJECT.ROLE.KEY' | translate }}</cnsl-label>
<input cnslInput formControlName="key" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="displayName" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</cnsl-label>
<input cnslInput formControlName="group" />
</cnsl-form-field>
<button *ngIf="i !== 0" mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
<i class="las la-trash"></i>
</button>
</ng-container>
</div>
<button color="primary" mat-raised-button class="continue-button" [disabled]="formArray.invalid" type="submit"> <button color="primary" mat-raised-button class="continue-button" [disabled]="formArray.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }} {{ 'ACTIONS.SAVE' | translate }}
</button> </button>
</form> </form>
</div> </div>

View File

@ -1,4 +1,3 @@
.container { .container {
padding: 4rem 4rem 2rem 4rem; padding: 4rem 4rem 2rem 4rem;
@ -29,21 +28,28 @@
} }
} }
.content { .newrole-content {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex;
margin: 0 -.5rem;
flex-wrap: wrap;
border-bottom: 1px solid #ffffff20; border-bottom: 1px solid #ffffff20;
margin-bottom: 1rem;
display: flex;
.formfield { .newrole {
margin: 0 .5rem; display: grid;
grid-template-columns: 1fr;
flex: 1;
@media only screen and (max-width: 450px) { @media only screen and (min-width: 1000px) {
flex-basis: 100%; grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
} }
} }
button {
align-self: flex-end;
margin-bottom: 1rem;
}
} }
.continue-button { .continue-button {

View File

@ -65,8 +65,9 @@
<button pwdAction [disabled]="(canWrite$ | async) === false" (click)="sendSetPasswordNotification()" <button pwdAction [disabled]="(canWrite$ | async) === false" (click)="sendSetPasswordNotification()"
mat-stroked-button color="primary" *ngIf="user.state === UserState.USER_STATE_INITIAL">{{ mat-stroked-button color="primary" *ngIf="user.state === UserState.USER_STATE_INITIAL">{{
'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button> 'USER.PASSWORD.RESENDNOTIFICATION' | translate }}</button>
<button emailAction class="resendemail" *ngIf="user.state === UserState.USER_STATE_INITIAL" mat-stroked-button <button emailAction [disabled]="(canWrite$ | async) === false" class="resendemail"
color="primary" (click)="resendInitEmail()">{{'USER.RESENDINITIALEMAIL' | *ngIf="user.state === UserState.USER_STATE_INITIAL" mat-stroked-button color="primary"
(click)="resendInitEmail()">{{'USER.RESENDINITIALEMAIL' |
translate}}</button> translate}}</button>
</cnsl-contact> </cnsl-contact>
</cnsl-card> </cnsl-card>