MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

ui fixes plan + description status editors

This commit is contained in:
mchouliara 2024-08-30 16:50:13 +03:00
parent cc7ed0d59b
commit ab5c16f7d8
5 changed files with 110 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
View File

@ -6,16 +6,16 @@
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-button class="action-btn cancel-btn" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button> <button mat-button class="rounded-btn cancel-btn" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
</div> </div>
<div class="col-auto" *ngIf="canDelete"> <div class="col-auto" *ngIf="canDelete">
<button mat-button class="action-btn delete-btn" type="button" (click)="delete()"> <button mat-button class="rounded-btn delete-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
{{'COMMONS.ACTIONS.DELETE' | translate}} {{'COMMONS.ACTIONS.DELETE' | translate}}
</button> </button>
</div> </div>
<div class="col-auto" *ngIf="canSave"> <div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn save-btn" (click)="formSubmit()"> <button mat-button class="rounded-btn save-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
<mat-icon>save</mat-icon> <mat-icon>save</mat-icon>
{{'COMMONS.ACTIONS.SAVE' | translate}} {{'COMMONS.ACTIONS.SAVE' | translate}}
</button> </button>
@ -65,37 +65,43 @@
{{'DESCRIPTION-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}} {{'DESCRIPTION-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3> </h3>
<div id="Edit"> <div id="Edit">
<mat-card-title class="pb-2">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title> <mat-card>
<div class="col-12"> <mat-card-header>
<mat-form-field class="w-100"> <mat-card-title class="pb-2">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title>
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label> </mat-card-header>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true"> <mat-card-content>
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option> <div class="col-12">
</mat-select> <mat-form-field class="w-100">
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error> <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
</mat-form-field> <mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</div> </mat-select>
<div class="col-12"> <mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error>
<mat-form-field class="w-100"> <mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label> </mat-form-field>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true"> </div>
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option> <div class="col-12">
</mat-select> <mat-form-field class="w-100">
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error> <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
</mat-form-field> <mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</div> </mat-select>
<div class="d-flex" style="gap: 0.5rem"> <mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error>
<div> <mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox> </mat-form-field>
<mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error> </div>
</div> <div class="d-flex" style="gap: 0.5rem">
<div> <div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox> <mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error> <mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error>
</div> </div>
</div> <div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error>
</div>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div> </div>
</div> </div>

30
frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.scss
View File

@ -1,33 +1,3 @@
::ng-deep label { ::ng-deep label {
margin: 0; margin: 0;
} }
.action-btn {
border-radius: 30px;
background-color: var(--secondary-color);
border: 1px solid transparent;
padding-left: 2em;
padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
transition-property: background-color, color;
transition-duration: 200ms;
transition-delay: 50ms;
transition-timing-function: ease-in-out;
&:disabled{
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
}
.delete-btn {
background: #ffffff;
color: #ba2c2c;
border: 1px solid #ba2c2c;
}

74
frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
View File

@ -6,16 +6,16 @@
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-button class="action-btn cancel-btn" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button> <button mat-button class="rounded-btn cancel-btn" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div> </div>
<div class="col-auto" *ngIf="canDelete"> <div class="col-auto" *ngIf="canDelete">
<button mat-button class="action-btn delete-btn" type="button" (click)="delete()"> <button mat-button class="rounded-btn delete-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
{{'PLAN-STATUS-EDITOR.ACTIONS.DELETE' | translate}} {{'PLAN-STATUS-EDITOR.ACTIONS.DELETE' | translate}}
</button> </button>
</div> </div>
<div class="col-auto" *ngIf="canSave"> <div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn save-btn" (click)="formSubmit()"> <button mat-button class="rounded-btn save-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
<mat-icon>save</mat-icon> <mat-icon>save</mat-icon>
{{'PLAN-STATUS-EDITOR.ACTIONS.SAVE' | translate}} {{'PLAN-STATUS-EDITOR.ACTIONS.SAVE' | translate}}
</button> </button>
@ -65,37 +65,43 @@
{{'PLAN-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}} {{'PLAN-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3> </h3>
<div id="Edit"> <div id="Edit">
<mat-card-title class="pb-2">{{'PLAN-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title> <mat-card>
<div class="col-12"> <mat-card-header>
<mat-form-field class="w-100"> <mat-card-title class="pb-2">{{'PLAN-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title>
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label> </mat-card-header>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true"> <mat-card-content>
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option> <div class="col-12">
</mat-select> <mat-form-field class="w-100">
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error> <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
</mat-form-field> <mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</div> </mat-select>
<div class="col-12"> <mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error>
<mat-form-field class="w-100"> <mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label> </mat-form-field>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true"> </div>
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option> <div class="col-12">
</mat-select> <mat-form-field class="w-100">
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error> <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
</mat-form-field> <mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</div> </mat-select>
<div class="d-flex" style="gap: 0.5rem"> <mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error>
<div> <mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox> </mat-form-field>
<mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error> </div>
</div> <div class="d-flex" style="gap: 0.5rem">
<div> <div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox> <mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error> <mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error>
</div> </div>
</div> <div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error>
</div>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div> </div>
</div> </div>

30
frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.scss
View File

@ -1,33 +1,3 @@
::ng-deep label { ::ng-deep label {
margin: 0; margin: 0;
} }
.action-btn {
border-radius: 30px;
background-color: var(--secondary-color);
border: 1px solid transparent;
padding-left: 2em;
padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
transition-property: background-color, color;
transition-duration: 200ms;
transition-delay: 50ms;
transition-timing-function: ease-in-out;
&:disabled{
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
}
.delete-btn {
background: #ffffff;
color: #ba2c2c;
border: 1px solid #ba2c2c;
}

43
frontend/src/styles.scss
View File

@ -401,14 +401,17 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
@include mat.all-component-densities(-10); @include mat.all-component-densities(-10);
} }
.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]) { button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]) {
&.rounded-btn{ &.rounded-btn{
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
height: 40px; height: 40px;
border-radius: 30px; border-radius: 30px;
border: none; border: none;
opacity: 1; opacity: 1;
padding-left: 2em; // padding-left: 2em;
padding-right: 2em; // padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029; box-shadow: 0px 3px 6px #1E202029;
&:hover { &:hover {
box-shadow: var(--mdc-protected-button-hover-container-elevation-shadow); box-shadow: var(--mdc-protected-button-hover-container-elevation-shadow);
@ -435,28 +438,42 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
color: #000000; color: #000000;
} }
// &.save-btn { &.save-btn {
background: var(--secondary-color) 0% 0% no-repeat padding-box;
color: #000000;
padding-left: 2em;
padding-right: 2em;
}
// } &.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
padding-left: 2em;
padding-right: 2em;
}
// &.cancel-btn { &.finalize-btn {
// } }
// &.finalize-btn {
// }
&.delete-btn { &.delete-btn {
background: #ffffff; background: #ffffff;
color: #ff3d33;; color: #ba2c2c;
border: 1px solid #ff3d33; border: 1px solid #ba2c2c;
padding-left: 2em;
padding-right: 2em;
} }
&.md-button { &.md-button {
padding: 0.62rem 1.87rem; padding: 0.62rem 1.87rem;
font-weight: 400; font-weight: 400;
} }
&:disabled {
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
} }
.mat-mdc-button.mat-mdc-button-disabled { .mat-mdc-button.mat-mdc-button-disabled {