mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
[ADF-1672] Start Process - Improve the look and feel (#2437)
* [DW-180] Start Process - Improve the look and feel. * Created custom-button directive to have custom buttons inside the form. * Updated en.json. * Refactored start-process component. * Added a property showEventIcon in start-form component. * [DW-180] Start Process - Improve the look and feel. * Refactored start-process scss file. * Added some scss class to the html in start process/form components. * Updated en.json. * Added ViewEncapsulation none. * [ADF-1672] Start Process - Improve the look and feel . * Removed Event icon.
This commit is contained in:
siva kumar
Maurizio Vitale
parent
6016937ea2
commit
6f69f545ec
@ -19,6 +19,7 @@ import { NgModule } from '@angular/core';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { StartFormCustomButtonDirective } from './src/components/form-custom-button.directive';
|
||||
import { FormFieldComponent } from './src/components/form-field/form-field.component';
|
||||
import { FormListComponent } from './src/components/form-list.component';
|
||||
import { FormComponent } from './src/components/form.component';
|
||||
@ -61,6 +62,7 @@ export const ACTIVITI_FORM_DIRECTIVES: any[] = [
|
||||
FormListComponent,
|
||||
ContentWidgetComponent,
|
||||
StartFormComponent,
|
||||
StartFormCustomButtonDirective,
|
||||
FormFieldComponent,
|
||||
...WIDGET_DIRECTIVES
|
||||
];
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Directive } from '@angular/core';
|
||||
|
||||
@Directive({ selector: '[form-custom-button]' }) export class StartFormCustomButtonDirective {}
|
||||
@ -1,8 +1,7 @@
|
||||
<div *ngIf="hasForm()">
|
||||
<div class="adf-start-form-container" *ngIf="hasForm()">
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-title>
|
||||
<md-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</md-icon>
|
||||
<h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
|
||||
</md-card-title>
|
||||
</md-card-header>
|
||||
@ -17,7 +16,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
<md-card-content *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
|
||||
<md-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
|
||||
<ng-content select="[form-custom-button]"></ng-content>
|
||||
<button *ngFor="let outcome of form.outcomes"
|
||||
md-button
|
||||
[disabled]="!isOutcomeButtonEnabled(outcome)"
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<md-card>
|
||||
<md-card class="adf-start-process">
|
||||
<md-card-title>{{'START_PROCESS.FORM.TITLE' | translate}}
|
||||
</md-card-title>
|
||||
<md-card-content *ngIf="isProcessDefinitionEmpty()">
|
||||
<md-card-subtitle id="error-message" *ngIf="errorMessageId">
|
||||
{{errorMessageId|translate}}
|
||||
</md-card-subtitle>
|
||||
<md-input-container>
|
||||
<md-input-container class="adf-process-input-container">
|
||||
<input mdInput placeholder="{{'START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
|
||||
</md-input-container>
|
||||
<md-select placeholder="{{'START_PROCESS.FORM.LABEL.TYPE'|translate}}" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" required>
|
||||
@ -14,14 +14,20 @@
|
||||
{{ processDef.name }}
|
||||
</md-option>
|
||||
</md-select>
|
||||
<activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id" (outcomeClick)="onOutcomeClick($event)"></activiti-start-form>
|
||||
<activiti-start-form *ngIf="hasStartForm()"
|
||||
[processDefinitionId]="currentProcessDef.id"
|
||||
(outcomeClick)="onOutcomeClick($event)"
|
||||
[showRefreshButton]="false">
|
||||
<button form-custom-button md-button (click)="cancelStartProcess()" id="cancle_process" class=""> {{'START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
|
||||
</activiti-start-form>
|
||||
</md-card-content>
|
||||
<md-card-content *ngIf="hasErrorMessage()">
|
||||
<md-card-subtitle class="error-message" id="no-process-message">
|
||||
{{'START_PROCESS.NO_PROCESS_DEFINITIONS' | translate}}
|
||||
</md-card-subtitle>
|
||||
</md-card-content>
|
||||
<md-card-actions *ngIf="isProcessDefinitionEmpty()">
|
||||
<button md-button (click)="cancelStartProcess()" id="cancle_process" class=""> {{'START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
|
||||
<md-card-actions *ngIf="!hasStartForm()">
|
||||
<button md-button *ngIf="!hasStartForm()" (click)="cancelStartProcess()" id="cancle_process" class=""> {{'START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
|
||||
<button md-button *ngIf="!hasStartForm()" [disabled]="!validateForm()" (click)="startProcess()" data-automation-id="btn-start" id="button-start" class="btn-start"> {{'START_PROCESS.FORM.ACTION.START' | translate}} </button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
@ -1,19 +1,35 @@
|
||||
md-card {
|
||||
.adf {
|
||||
&-start-process {
|
||||
width: calc(66.6666% - 48px);
|
||||
margin-left: calc(33.3333333333% / 2);
|
||||
margin-right: calc(33.3333333333% / 2);
|
||||
margin-top: 10px;
|
||||
.mat-select-trigger {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
md-select {
|
||||
width: 100%;
|
||||
padding: 16px 0px 0px 0px;
|
||||
}
|
||||
|
||||
md-card-actions {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&-process-input-container {
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-start-form-container {
|
||||
.mat-card {
|
||||
box-shadow: none !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
&-start-form-actions {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { RestVariable } from 'alfresco-js-api';
|
||||
import { StartFormComponent } from 'ng2-activiti-form';
|
||||
import { ProcessDefinitionRepresentation } from './../models/process-definition.model';
|
||||
@ -25,7 +25,8 @@ import { ProcessService } from './../services/process.service';
|
||||
@Component({
|
||||
selector: 'adf-start-process, activiti-start-process',
|
||||
templateUrl: './start-process.component.html',
|
||||
styleUrls: ['./start-process.component.scss']
|
||||
styleUrls: ['./start-process.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class StartProcessInstanceComponent implements OnChanges {
|
||||
|
||||
|
||||
@ -78,12 +78,12 @@
|
||||
"FORM": {
|
||||
"TITLE": "Start Process",
|
||||
"LABEL": {
|
||||
"TYPE": "Type",
|
||||
"NAME": "Name"
|
||||
"TYPE": "Select Process",
|
||||
"NAME": "Process Name"
|
||||
},
|
||||
"TYPE_PLACEHOLDER": "Choose one...",
|
||||
"ACTION": {
|
||||
"START": "Start",
|
||||
"START": "Start Process",
|
||||
"CANCEL": "Cancel"
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user