inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-3020] Start process on process cloud updated the labels (always floating) (#5603)

Browse Source 
* unit tests for always floating labels. updated the styling to match the UX. created a new theme.

* update travis
This commit is contained in:
Urse Daniel
2020-04-21 01:28:23 +03:00
committed by GitHub
parent f36cbd57ef
commit 7b37bb8a90
5 changed files with 95 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
View File

@@ -1,6 +1,6 @@
<mat-card class="adf-start-process">
<mat-card-title>{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
<mat-card-title class="adf-title">{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
</mat-card-title>
<mat-card-content *ngIf="!isProcessDefinitionsEmpty(); else emptyProcessDefinitionsList">
@@ -9,21 +9,7 @@
</mat-card-subtitle>
<form [formGroup]="processForm">
<mat-form-field class="adf-process-input-container">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
<input
matInput
formControlName="processInstanceName"
id="processName">
<mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
</mat-error>
<mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
</mat-error>
</mat-form-field>
<mat-form-field class="adf-process-input-container">
<mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
<input
#inputAutocomplete
@@ -42,10 +28,24 @@
<mat-icon>arrow_drop_down</mat-icon>
</button>
</div>
<mat-error *ngIf="processDefinition.hasError('required')">
<mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
<input
matInput
formControlName="processInstanceName"
id="processName">
<mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
</mat-error>
<mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
</mat-error>
</mat-form-field>
</form>
<ng-container *ngIf="hasForm() else taskFormCloudButtons">

93
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
View File

@@ -1,42 +1,61 @@
.adf {
&-start-process {
.mat-select-trigger {
font-size: 14px !important;
}
mat-form-field {
width: 100%;
}
mat-select {
width: 100%;
padding: 16px 0 0;
}
mat-card-actions {
text-align: right;
.mat-button {
text-transform: uppercase !important;
@mixin adf-cloud-start-service-theme($theme) {
.adf {
&-start-process {
.mat-select-trigger {
font-size: 14px !important;
}
mat-form-field {
width: 100%;
}
mat-select {
width: 100%;
padding: 16px 0 0;
}
.mat-form-field-label {
color: mat-color($mat-grey, A400);
}
mat-card-actions {
text-align: right;
.mat-button {
text-transform: uppercase !important;
}
}
}
}
&-process-input-container {
mat-form-field {
width: 100%;
&-title {
padding-bottom: 1.25em;
}
&-process-input-container {
mat-form-field {
width: 100%;
}
}
&-process-input-autocomplete {
display: flex;
button {
position: absolute;
right: -14px;
top: 0;
}
}
&-start-form-container {
.mat-card {
box-shadow: none !important;
padding: 0 !important;
}
}
&-start-form-actions {
text-align: right !important;
}
}
&-process-input-autocomplete {
display: flex;
button {
position: absolute;
right: -14px;
top: 0;
}
}
&-start-form-container {
.mat-card {
box-shadow: none !important;
padding: 0 !important;
}
}
&-start-form-actions {
text-align: right !important;
}
}

20
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts
View File

@@ -386,6 +386,26 @@ describe('StartProcessCloudComponent', () => {
});
}));
it('should have labels for process name and type', async(() => {
component.appName = 'myApp';
component.processDefinitionName = 'NewProcess 2';
component.ngOnChanges({});
fixture.detectChanges();
const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container mat-label');
expect(inputLabelsNodes.length).toBe(2);
}));
it('should have floating labels for process name and type', async(() => {
component.appName = 'myApp';
component.processDefinitionName = 'NewProcess 2';
component.ngOnChanges({});
fixture.detectChanges();
const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container');
inputLabelsNodes.forEach(labelNode => {
expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('always');
});
}));
it('should reload processes when appName input changed', async(() => {
component.ngOnChanges({ appName: change });
fixture.detectChanges();

1
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
View File

@@ -34,7 +34,6 @@ import { TaskVariableCloud } from '../../../form/models/task-variable-cloud.mode
@Component({
selector: 'adf-cloud-start-process',
templateUrl: './start-process-cloud.component.html',
styleUrls: ['./start-process-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy {

2
lib/process-services-cloud/src/lib/styles/_index.scss
View File

@@ -8,6 +8,7 @@
@import './../task/start-task/components/start-task-cloud.component.scss';
@import './../task/task-filters/components/edit-task-filter-cloud.component.scss';
@import './../task/task-filters/components/task-filters-cloud.component.scss';
@import './../process/start-process/components/start-process-cloud.component';
@mixin adf-process-services-cloud-theme($theme) {
@@ -21,4 +22,5 @@
@include adf-cloud-people-theme($theme);
@include adf-cloud-group-theme($theme);
@include adf-cloud-task-form-theme($theme);
@include adf-cloud-start-service-theme($theme);
}