mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
support for setting CSS classes in the designer (#1737)
- provides support for `className` field that Angular 1 designer allows to define for Forms and Form Fields
This commit is contained in:
committed by
Maurizio Vitale
parent
3fee3b5002
commit
0afc6affb6
@@ -3,7 +3,7 @@
|
||||
<h3 style="text-align: center">Please select a Task</h3>
|
||||
</div>
|
||||
<div *ngIf="hasForm()">
|
||||
<div class="mdl-card mdl-shadow--2dp activiti-form-container">
|
||||
<div class="mdl-card mdl-shadow--2dp activiti-form-container {{form.className}}">
|
||||
<div class="mdl-card__title">
|
||||
<i *ngIf="showValidationIcon" class="material-icons">{{ form.isValid ? 'event_available' : 'event_busy' }}</i>
|
||||
<h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-textfield mdl-js-textfield amount-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield amount-widget {{field.className}}"
|
||||
[class.amount-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}, {{currency}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
|
@@ -1,5 +1,4 @@
|
||||
<div class="attach-widget">
|
||||
|
||||
<div class="attach-widget {{field.className}}">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<div>
|
||||
<span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span>
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id">
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect {{field.className}}" [attr.for]="field.id">
|
||||
<input type="checkbox"
|
||||
[attr.id]="field.id"
|
||||
[attr.required]="isRequired()"
|
||||
|
@@ -44,6 +44,7 @@ export class FormModel {
|
||||
return this._isValid;
|
||||
}
|
||||
|
||||
className: string;
|
||||
readOnly: boolean = false;
|
||||
tabs: TabModel[] = [];
|
||||
/** Stores root containers */
|
||||
@@ -81,6 +82,7 @@ export class FormModel {
|
||||
this.processDefinitionId = json.processDefinitionId;
|
||||
this.customFieldTemplates = json.customFieldTemplates || {};
|
||||
this.selectedOutcome = json.selectedOutcome || {};
|
||||
this.className = json.className || '';
|
||||
|
||||
let tabCache: FormWidgetModelCache<TabModel> = {};
|
||||
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-grid mdl-grid__date-widget" *ngIf="field?.isVisible" id="data-widget">
|
||||
<div class="mdl-grid mdl-grid__date-widget {{field.className}}" *ngIf="field?.isVisible" id="data-widget">
|
||||
<div class="mdl-cell mdl-cell--11-col">
|
||||
<div class="mdl-textfield mdl-js-textfield date-widget"
|
||||
[class.date-widget__invalid]="!field.isValid">
|
||||
|
@@ -1,3 +1,3 @@
|
||||
<div class="display-text-widget">
|
||||
<div class="display-text-widget {{field.className}}">
|
||||
<span>{{field.value}}</span>
|
||||
</div>
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div [ngSwitch]="fieldType" class="display-value-widget" *ngIf="field?.isVisible">
|
||||
<div [ngSwitch]="fieldType" class="display-value-widget {{field.className}}" *ngIf="field?.isVisible">
|
||||
<div *ngSwitchCase="'boolean'">
|
||||
<label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" >
|
||||
<input type="checkbox"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="dropdown-widget"
|
||||
<div class="dropdown-widget {{field.className}}"
|
||||
[class.dropdown-widget__invalid]="!field.isValid" *ngIf="field?.isVisible">
|
||||
<label class="dropdown-widget__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
<select class="dropdown-widget__select"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="dynamic-table-widget"
|
||||
<div class="dynamic-table-widget {{field.className}}"
|
||||
[class.dynamic-table-widget__invalid]="!isValid()" *ngIf="field?.isVisible">
|
||||
<div class="dynamic-table-widget__label">{{content.name}}</div>
|
||||
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-textfield mdl-js-textfield functional-group-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield functional-group-widget {{field.className}}"
|
||||
[class.functional-group-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="hyperlink-widget">
|
||||
<div class="hyperlink-widget {{field.className}}">
|
||||
<div>
|
||||
<span>{{field.name}}</span>
|
||||
</div>
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-textfield mdl-js-textfield multiline-text-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield multiline-text-widget {{field.className}}"
|
||||
[class.multiline-text-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<textarea class="mdl-textfield__input"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-textfield mdl-js-textfield number-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield number-widget {{field.className}}"
|
||||
[class.number-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-textfield mdl-js-textfield people-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield people-widget {{field.className}}"
|
||||
[class.people-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="radio-buttons-widget"
|
||||
<div class="radio-buttons-widget {{field.className}}"
|
||||
[class.radio-buttons-widget__invalid]="!field.isValid" [id]="field.id" *ngIf="field?.isVisible">
|
||||
<label class="radio-buttons-widget__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
<div *ngFor="let opt of field.options">
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-textfield mdl-js-textfield text-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield text-widget {{field.className}}"
|
||||
[class.text-widget__invalid]="!field.isValid">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
<input class="mdl-textfield__input"
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="mdl-textfield mdl-js-textfield typeahead-widget"
|
||||
<div class="mdl-textfield mdl-js-textfield typeahead-widget {{field.className}}"
|
||||
[class.is-dirty]="value"
|
||||
[class.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible">
|
||||
<label [attr.for]="field.id">{{field.name}}</label>
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="upload-widget"
|
||||
<div class="upload-widget {{field.className}}"
|
||||
[class.upload-widget__invalid]="!field.isValid">
|
||||
<label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
|
||||
<div>
|
||||
|
Reference in New Issue
Block a user