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

[ADF-1512] fixed required style problem and others minor twitch for form (#2283)

Browse Source 
* [ADF-1381] added some fix for style on form

* [ADF-1381] fix some styles for form
This commit is contained in:
Vito
2017-09-05 15:16:41 +01:00
committed by Mario Romano
parent 4e50c4e2d6
commit 480b0e0e55
15 changed files with 44 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.scss
+1 -1
View File
@@ -12,7 +12,7 @@
}
&-dropdown-required-message .adf-error-text-container{
margin-top: -2px !important;
margin-top: 1px !important;
}
}
ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
+1 -1
View File
@@ -62,5 +62,5 @@
(cancel)="onCancelChanges()">
</row-editor>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.scss
+2 -3
View File
@@ -1,5 +1,4 @@
.adf-error-text-container {
margin-top: -16px !important;
position: inherit;
width: 100%;
margin-top: -14px !important;
width: 50%;
}
ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html
+1 -1
View File
@@ -15,7 +15,7 @@
placeholder="{{field.placeholder}}">
</md-input-container>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
<div class="adf-group-autocomplete mat-elevation-z2" *ngIf="popupVisible">
<md-option *ngFor="let item of groups"
ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html
+1 -1
View File
@@ -19,6 +19,6 @@
<span>{{field?.value?.length || 0}}/{{field.maxLength}}</span>
</div>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget class="adf-multiline-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.scss
+4
View File
@@ -24,4 +24,8 @@
padding-left: 0;
}
&-multiline-required-message {
display: flex;
}
}
ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.html
+1 -1
View File
@@ -15,5 +15,5 @@
placeholder="{{field.placeholder}}">
</md-input-container>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html
+9 -6
View File
@@ -1,23 +1,26 @@
<div class="adf-people-widget {{field.className}}"
[class.is-dirty]="value"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" id="people-widget-content" *ngIf="field.isVisible">
[class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly"
id="people-widget-content"
*ngIf="field.isVisible">
<md-input-container>
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
<input mdInput
<input #inputValue
mdInput
class="adf-input"
type="text"
[id]="field.id"
[(ngModel)]="value"
(ngModelChange)="checkVisibility(field)"
(keyup)="onKeyUp($event)"
(blur)="onBlur()"
[disabled]="field.readOnly"
placeholder="{{field.placeholder}}">
</md-input-container>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
<div class="adf-people-autocomplete mat-elevation-z2" *ngIf="popupVisible && users.length > 0">
<div class="adf-people-autocomplete mat-elevation-z2" [hidden]="!popupVisible || users.length === 0">
<md-option *ngFor="let user of users"
[id]="field.id +'-'+user.id"
(click)="onItemClick(user, $event)">
@@ -30,7 +33,7 @@
[src]="user.userImage"
(error)="onErrorImageLoad(user)"/>
</div>
<span>{{getDisplayName(user)}}</span>
<span class="adf-people-label-name">{{getDisplayName(user)}}</span>
</div>
</md-option>
</div>
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss
+6 -2
View File
@@ -14,8 +14,8 @@
width: 100%;
overflow-y: auto;
z-index: 5;
border-radius: 3%;
color: #555;
margin: -15px 0 0 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
> md-option {
list-style-type: none;
@@ -48,7 +48,7 @@
}
&-people-widget-row {
padding: 5px 5px;
padding-bottom: 10px;
}
&-people-widget-image {
@@ -63,4 +63,8 @@
&-people-widget-image-row {
display: inline-block;
}
&-people-label-name {
padding-left: 10px;
}
}
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts
-10
View File
@@ -58,16 +58,6 @@ describe('PeopleWidgetComponent', () => {
expect(widget.getDisplayName(model)).toBe('John');
});
it('should flush value on blur', (done) => {
spyOn(widget, 'flushValue').and.stub();
widget.onBlur();
setTimeout(() => {
expect(widget.flushValue).toHaveBeenCalled();
done();
}, 200);
});
it('should init value from the field', () => {
widget.field.value = new GroupUserModel({
firstName: 'John',
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts
+13 -9
View File
@@ -17,7 +17,8 @@
/* tslint:disable:component-selector */
import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { FormService } from '../../../services/form.service';
import { GroupUserModel } from '../core/group-user.model';
import { GroupModel } from '../core/group.model';
@@ -30,7 +31,10 @@ import { baseHost , WidgetComponent } from './../widget.component';
host: baseHost,
encapsulation: ViewEncapsulation.None
})
export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
export class PeopleWidgetComponent extends WidgetComponent implements OnInit, AfterViewInit {
@ViewChild('inputValue')
input: ElementRef;
popupVisible: boolean = false;
minTermLength: number = 1;
@@ -67,6 +71,13 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
}
}
ngAfterViewInit() {
let onBlurInputEvent = Observable.fromEvent(this.input.nativeElement, 'blur');
onBlurInputEvent.debounceTime(200).subscribe((event) => {
this.flushValue();
});
}
onKeyUp(event: KeyboardEvent) {
if (this.value && this.value.length >= this.minTermLength) {
this.formService.getWorkflowUsers(this.value, this.groupId)
@@ -79,12 +90,6 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
}
}
onBlur() {
setTimeout(() => {
this.flushValue();
}, 200);
}
onErrorImageLoad(user) {
if (user.userImage) {
user.userImage = null;
@@ -119,7 +124,6 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
return '';
}
// TODO: still causes onBlur execution
onItemClick(item: GroupUserModel, event: Event) {
if (item) {
this.field.value = item;
ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html
+1 -1
View File
@@ -17,7 +17,7 @@
</md-radio-group>
</div>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html
+1 -1
View File
@@ -15,5 +15,5 @@
placeholder="{{field.placeholder}}">
</md-input-container>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html
+2 -2
View File
@@ -16,9 +16,9 @@
placeholder="{{field.placeholder}}">
</md-input-container>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
<div class="adf-typeahead-autocomplete mat-elevation-z2" *ngIf="options.length > 0 && popupVisible">
<div class="adf-typeahead-autocomplete mat-elevation-z2" [hidden]="options.length <= 0 || !popupVisible">
<md-option *ngFor="let item of options" (click)="onItemClick(item, $event)">
<span>{{item.name}}</span>
</md-option>
ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html
+1 -1
View File
@@ -28,5 +28,5 @@
(change)="onFileChanged($event)">
</div>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>