diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.html b/src/frontend/app/administration/contact/page/form/contacts-form.component.html index 46078a175ce04bbe73dcc762aaf7d5fda885869c..a23c9b1095ebecb55091d7cf919484641e6a47d9 100644 --- a/src/frontend/app/administration/contact/page/form/contacts-form.component.html +++ b/src/frontend/app/administration/contact/page/form/contacts-form.component.html @@ -122,21 +122,31 @@ </mat-form-field> </ng-container> <ng-container *ngIf="field.type === 'radio'"> - <label class="labelCustom">{{field.label}}</label> + <label class="labelCustom">{{field.label}} <ng-container *ngIf="field.required">*</ng-container></label> <mat-radio-group class="radio-form" color="primary" [formControl]="field.control"> <mat-radio-button *ngFor="let value of field.values" [value]="value.id"> {{value.label}} </mat-radio-button> </mat-radio-group> + <i *ngIf="field.filling" style="position:absolute;height: auto;padding-right: 10px;right: 0px;z-index: 1;top: 50%;transform: translateY(-50%);" + [title]="lang.targetFillingField" [style.color]="fillingRate.color" + class="fas fa-circle rate"></i> + <mat-error *ngIf="field.control.status!=='VALID' && field.control.touched"> + {{getErrorMsg(field.control.errors)}}</mat-error> </ng-container> <ng-container *ngIf="field.type === 'checkbox'"> - <label class="labelCustom">{{field.label}}</label> + <label class="labelCustom">{{field.label}} <ng-container *ngIf="field.required">*</ng-container></label> <mat-selection-list #shoes class="checkbox-form" [formControl]="field.control"> <mat-list-option *ngFor="let value of field.values" [value]="value.id" color="primary" checkboxPosition="before"> {{value.label}} </mat-list-option> </mat-selection-list> + <i *ngIf="field.filling" style="position:absolute;height: auto;padding-right: 10px;right: 0px;z-index: 1;top: 50%;transform: translateY(-50%);" + [title]="lang.targetFillingField" [style.color]="fillingRate.color" + class="fas fa-circle rate"></i> + <mat-error *ngIf="field.control.status!=='VALID' && field.control.touched"> + {{getErrorMsg(field.control.errors)}}</mat-error> </ng-container> </p> <button *ngIf="field.display" [disabled]="!canDelete(field)" mat-icon-button matSuffix diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.scss b/src/frontend/app/administration/contact/page/form/contacts-form.component.scss index 88db748170b17ef780b277a0f2caed7f2e1314f4..b51ecb17334aece0b0289afbe20c99818e36ad80 100644 --- a/src/frontend/app/administration/contact/page/form/contacts-form.component.scss +++ b/src/frontend/app/administration/contact/page/form/contacts-form.component.scss @@ -1,110 +1,117 @@ @import "../../../../../css/vars.scss"; .contact-item { - height: auto !important; + height: auto !important; } .multipleUnits div:nth-child(1) { - display: inline-grid !important; - width: 50%; + display: inline-grid !important; + width: 50%; } .multipleUnits div:nth-child(2) { - display: inline-grid !important; - width: 50%; + display: inline-grid !important; + width: 50%; } .unitTitle { - display: flex; - color: $primary; + display: flex; + color: $primary; } .contact-address { - cursor: pointer; - color: #337ab7; + cursor: pointer; + color: #337ab7; - &:hover { - .contact-content { - text-decoration: underline; + &:hover { + .contact-content { + text-decoration: underline; + } } - } +} + +.contact-content { + position: relative; } .smallInput { - font-size: 11px; - padding-left: 20px; - padding-right: 20px; - .mat-button { - width: 30px; - height: 25px; - color: $primary; + font-size: 11px; + padding-left: 20px; + padding-right: 20px; + + .mat-button { + width: 30px; + height: 25px; + color: $primary; + + ::ng-deep.mat-button-wrapper { + display: flex; + line-height: initial; + align-items: center; + } + } - ::ng-deep.mat-button-wrapper { - display: flex; - line-height: initial; - align-items: center; + ::ng-deep.mat-form-field-infix { + padding: 0px; + padding-bottom: 5px; } - } - ::ng-deep.mat-form-field-infix { - padding: 0px; - padding-bottom: 5px; - } } + .radio-form { - display: flex; + display: flex; - .mat-radio-button { - flex: 1; - } + .mat-radio-button { + flex: 1; + } } .checkbox-form { - overflow: auto; - max-height: 200px; + overflow: auto; + max-height: 200px; } .loading { - display: flex; - height: 100%; + display: flex; + height: 100%; } .fillingBar { - ::ng-deep .mat-progress-bar-buffer { - background: #e4e8eb; - } + ::ng-deep .mat-progress-bar-buffer { + background: #e4e8eb; + } } .rate { - font-size: 10px; - text-align: right; + font-size: 10px; + text-align: right; } .fillingBar.mat-warn { - ::ng-deep.mat-progress-bar-fill::after { - background-color: #e81c2b; - } + ::ng-deep.mat-progress-bar-fill::after { + background-color: #e81c2b; + } } .fillingBar.mat-primary { - ::ng-deep.mat-progress-bar-fill::after { - background-color: #f4891e; - } + ::ng-deep.mat-progress-bar-fill::after { + background-color: #f4891e; + } } .fillingBar.mat-accent { - ::ng-deep.mat-progress-bar-fill::after { - background-color: #0aa34f; - } + ::ng-deep.mat-progress-bar-fill::after { + background-color: #0aa34f; + } } .mat-error { - font-size: 10px; - text-align: right; - font-weight: bold; + font-size: 10px; + text-align: right; + font-weight: bold; } .labelCustom { - color: rgba(0, 0, 0, 0.54); - transform: scale(0.75); - font-weight: 400; -} + color: rgba(0, 0, 0, 0.54); + transform: scale(0.75); + font-weight: 400; +} \ No newline at end of file