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:
Denys Vuika
2017-03-17 14:33:05 +00:00
committed by Maurizio Vitale
parent 3fee3b5002
commit 0afc6affb6
19 changed files with 20 additions and 19 deletions

View File

@@ -3,7 +3,7 @@
<h3 style="text-align: center">Please select a Task</h3> <h3 style="text-align: center">Please select a Task</h3>
</div> </div>
<div *ngIf="hasForm()"> <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"> <div class="mdl-card__title">
<i *ngIf="showValidationIcon" class="material-icons">{{ form.isValid ? 'event_available' : 'event_busy' }}</i> <i *ngIf="showValidationIcon" class="material-icons">{{ form.isValid ? 'event_available' : 'event_busy' }}</i>
<h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2> <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>

View File

@@ -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"> [class.amount-widget__invalid]="!field.isValid">
<label [attr.for]="field.id">{{field.name}}, {{currency}}</label> <label [attr.for]="field.id">{{field.name}}, {{currency}}</label>
<input class="mdl-textfield__input" <input class="mdl-textfield__input"

View File

@@ -1,5 +1,4 @@
<div class="attach-widget"> <div class="attach-widget {{field.className}}">
<label [attr.for]="field.id">{{field.name}}</label> <label [attr.for]="field.id">{{field.name}}</label>
<div> <div>
<span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span> <span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span>

View File

@@ -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" <input type="checkbox"
[attr.id]="field.id" [attr.id]="field.id"
[attr.required]="isRequired()" [attr.required]="isRequired()"

View File

@@ -44,6 +44,7 @@ export class FormModel {
return this._isValid; return this._isValid;
} }
className: string;
readOnly: boolean = false; readOnly: boolean = false;
tabs: TabModel[] = []; tabs: TabModel[] = [];
/** Stores root containers */ /** Stores root containers */
@@ -81,6 +82,7 @@ export class FormModel {
this.processDefinitionId = json.processDefinitionId; this.processDefinitionId = json.processDefinitionId;
this.customFieldTemplates = json.customFieldTemplates || {}; this.customFieldTemplates = json.customFieldTemplates || {};
this.selectedOutcome = json.selectedOutcome || {}; this.selectedOutcome = json.selectedOutcome || {};
this.className = json.className || '';
let tabCache: FormWidgetModelCache<TabModel> = {}; let tabCache: FormWidgetModelCache<TabModel> = {};

View File

@@ -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-cell mdl-cell--11-col">
<div class="mdl-textfield mdl-js-textfield date-widget" <div class="mdl-textfield mdl-js-textfield date-widget"
[class.date-widget__invalid]="!field.isValid"> [class.date-widget__invalid]="!field.isValid">

View File

@@ -1,3 +1,3 @@
<div class="display-text-widget"> <div class="display-text-widget {{field.className}}">
<span>{{field.value}}</span> <span>{{field.value}}</span>
</div> </div>

View File

@@ -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'"> <div *ngSwitchCase="'boolean'">
<label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" > <label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" >
<input type="checkbox" <input type="checkbox"

View File

@@ -1,4 +1,4 @@
<div class="dropdown-widget" <div class="dropdown-widget {{field.className}}"
[class.dropdown-widget__invalid]="!field.isValid" *ngIf="field?.isVisible"> [class.dropdown-widget__invalid]="!field.isValid" *ngIf="field?.isVisible">
<label class="dropdown-widget__label" [attr.for]="field.id">{{field.name}}</label> <label class="dropdown-widget__label" [attr.for]="field.id">{{field.name}}</label>
<select class="dropdown-widget__select" <select class="dropdown-widget__select"

View File

@@ -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"> [class.dynamic-table-widget__invalid]="!isValid()" *ngIf="field?.isVisible">
<div class="dynamic-table-widget__label">{{content.name}}</div> <div class="dynamic-table-widget__label">{{content.name}}</div>

View File

@@ -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"> [class.functional-group-widget__invalid]="!field.isValid">
<label [attr.for]="field.id">{{field.name}}</label> <label [attr.for]="field.id">{{field.name}}</label>
<input class="mdl-textfield__input" <input class="mdl-textfield__input"

View File

@@ -1,4 +1,4 @@
<div class="hyperlink-widget"> <div class="hyperlink-widget {{field.className}}">
<div> <div>
<span>{{field.name}}</span> <span>{{field.name}}</span>
</div> </div>

View File

@@ -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"> [class.multiline-text-widget__invalid]="!field.isValid">
<label [attr.for]="field.id">{{field.name}}</label> <label [attr.for]="field.id">{{field.name}}</label>
<textarea class="mdl-textfield__input" <textarea class="mdl-textfield__input"

View File

@@ -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"> [class.number-widget__invalid]="!field.isValid">
<label [attr.for]="field.id">{{field.name}}</label> <label [attr.for]="field.id">{{field.name}}</label>
<input class="mdl-textfield__input" <input class="mdl-textfield__input"

View File

@@ -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"> [class.people-widget__invalid]="!field.isValid">
<label [attr.for]="field.id">{{field.name}}</label> <label [attr.for]="field.id">{{field.name}}</label>
<input class="mdl-textfield__input" <input class="mdl-textfield__input"

View File

@@ -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"> [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> <label class="radio-buttons-widget__label" [attr.for]="field.id">{{field.name}}</label>
<div *ngFor="let opt of field.options"> <div *ngFor="let opt of field.options">

View File

@@ -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"> [class.text-widget__invalid]="!field.isValid">
<label [attr.for]="field.id">{{field.name}}</label> <label [attr.for]="field.id">{{field.name}}</label>
<input class="mdl-textfield__input" <input class="mdl-textfield__input"

View File

@@ -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.is-dirty]="value"
[class.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible"> [class.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible">
<label [attr.for]="field.id">{{field.name}}</label> <label [attr.for]="field.id">{{field.name}}</label>

View File

@@ -1,4 +1,4 @@
<div class="upload-widget" <div class="upload-widget {{field.className}}"
[class.upload-widget__invalid]="!field.isValid"> [class.upload-widget__invalid]="!field.isValid">
<label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label> <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
<div> <div>