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>
</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>

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">
<label [attr.for]="field.id">{{field.name}}, {{currency}}</label>
<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>
<div>
<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"
[attr.id]="field.id"
[attr.required]="isRequired()"

View File

@@ -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> = {};

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-textfield mdl-js-textfield date-widget"
[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>
</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'">
<label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" >
<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">
<label class="dropdown-widget__label" [attr.for]="field.id">{{field.name}}</label>
<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">
<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">
<label [attr.for]="field.id">{{field.name}}</label>
<input class="mdl-textfield__input"

View File

@@ -1,4 +1,4 @@
<div class="hyperlink-widget">
<div class="hyperlink-widget {{field.className}}">
<div>
<span>{{field.name}}</span>
</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">
<label [attr.for]="field.id">{{field.name}}</label>
<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">
<label [attr.for]="field.id">{{field.name}}</label>
<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">
<label [attr.for]="field.id">{{field.name}}</label>
<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">
<label class="radio-buttons-widget__label" [attr.for]="field.id">{{field.name}}</label>
<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">
<label [attr.for]="field.id">{{field.name}}</label>
<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.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible">
<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">
<label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
<div>