diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html index f16f48e118..5d9318a12b 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html @@ -1,6 +1,6 @@ - {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}} + {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}} @@ -9,21 +9,7 @@
- - {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }} - - - {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }} - - - {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }} - - - - + {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }} arrow_drop_down - + {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }} + + + {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }} + + + {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }} + + + {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }} + + diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss index 6100a8fcc8..1db78e8ba1 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss @@ -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; - } + } diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts index e5311a0ece..a70ac1c6aa 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts @@ -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(); diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts index 7ab5cdbc98..e0753299c1 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts @@ -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 { diff --git a/lib/process-services-cloud/src/lib/styles/_index.scss b/lib/process-services-cloud/src/lib/styles/_index.scss index bbfbc13806..0af3ecc088 100644 --- a/lib/process-services-cloud/src/lib/styles/_index.scss +++ b/lib/process-services-cloud/src/lib/styles/_index.scss @@ -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); }