inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-01 14:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-6807] Left side labels for text widget

Browse Source
This commit is contained in:
Rubén Barroso
2022-05-09 16:20:47 +02:00
parent d4fe4a0869
commit 8d1d50cf55
3 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/form/components/form-renderer.component.scss
View File

@@ -89,7 +89,7 @@
} }
&-left-label { &-left-label {
font-size: var(--theme-caption-font-size); font-size: 12px;
line-height: 64px; line-height: 64px;
margin-right: 15px; margin-right: 15px;
} }

48
lib/core/form/components/widgets/text/text.widget.html
View File

@@ -1,26 +1,26 @@
<div class="adf-textfield adf-text-widget {{field.className}}" <div class="adf-textfield adf-text-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<mat-form-field [hideRequiredMarker]="true" [appearance]="field.compactFields ? 'outline' : 'legacy'" [class.adf-compact-field]="field.compactFields"> <label class="adf-left-label" *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }} <div>
<span class="adf-asterisk" *ngIf="isRequired()">*</span> <mat-form-field [hideRequiredMarker]="true">
</mat-label> <label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label> <input matInput
<input matInput class="adf-input"
class="adf-input" type="text"
type="text" [id]="field.id"
[id]="field.id" [required]="isRequired()"
[required]="isRequired()" [value]="field.value"
[value]="field.value" [(ngModel)]="field.value"
[(ngModel)]="field.value" (ngModelChange)="onFieldChanged(field)"
(ngModelChange)="onFieldChanged(field)" [disabled]="field.readOnly || readOnly"
[disabled]="field.readOnly || readOnly" [textMask]="{mask: mask, isReversed: isMaskReversed}"
[textMask]="{mask: mask, isReversed: isMaskReversed}" [placeholder]="placeholder"
[placeholder]="placeholder" [matTooltip]="field.tooltip"
[matTooltip]="field.tooltip" (blur)="markAsTouched()"
(blur)="markAsTouched()" matTooltipPosition="above"
matTooltipPosition="above" matTooltipShowDelay="1000">
matTooltipShowDelay="1000"> </mat-form-field>
</mat-form-field> <error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isTouched() && !this.field.isValid" [error]="field.validationSummary" class="a"></error-widget> <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" class="b"></error-widget> </div>
</div> </div>

14
lib/core/form/components/widgets/text/text.widget.scss
View File

@@ -1,7 +1,19 @@
.adf { .adf {
&-text-widget { &-text-widget {
width: 100%; display: flex;
min-height: 4.2em !important;
height: 4.2em;
div {
width: 100%;
padding-right: 1%;
}
label {
width: 240px;
}
.mat-form-field-label-wrapper label { .mat-form-field-label-wrapper label {
top: 20px; top: 20px;