inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-6807] Create compact fields with material apparance outine

Browse Source
This commit is contained in:
Rubén Barroso
2022-05-06 13:09:07 +02:00
parent bfc76e11ef
commit 7472f4ef7d
6 changed files with 106 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/form/components/widgets/core/form-field.model.ts
View File

@@ -76,7 +76,7 @@ export class FormFieldModel extends FormWidgetModel {
rule?: FormFieldRule;
selectLoggedUser: boolean;
groupsRestriction: string[];
leftLabel: boolean = false;
compactFields: boolean = false;
// container model members
numberOfColumns: number = 1;
@@ -221,7 +221,7 @@ export class FormFieldModel extends FormWidgetModel {
}
if (form.json) {
this.leftLabel = form.json.leftLabel || false;
this.compactFields = form.json.compactFields || false;
}
const emptyOption = Array.isArray(this.options) ? this.options.find(({ id }) => id === 'empty') : undefined;

51
lib/core/form/components/widgets/number/number.widget.html
View File

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

20
lib/core/form/components/widgets/number/number.widget.scss
View File

@@ -1,15 +1,15 @@
.adf {
&-number-widget {
// &-number-widget {
display: flex;
// display: flex;
div {
width: 100%;
padding-right: 1%;
}
// div {
// width: 100%;
// padding-right: 1%;
// }
.mat-form-field-label-wrapper {
top: 20px;
}
}
// .mat-form-field-label-wrapper {
// top: 20px;
// }
// }
}

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

@@ -1,9 +1,9 @@
<div class="adf-textfield adf-text-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-left-label" *ngIf="field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<label class="adf-left-label" *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<div>
<mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabel" [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
class="adf-input"
type="text"