[ADF-1760] Process Info Drawer - The keys must be localized (#2502)

* Made all the keys localised for process header

* Added style for adf-info-drawer according to zeplin specification
This commit is contained in:
madhukar23 2017-10-19 14:48:15 +05:30 committed by Maurizio Vitale
parent 4e558cb162
commit b7e00caee1
4 changed files with 88 additions and 16 deletions

View File

@ -93,7 +93,7 @@ describe('ProcessInstanceHeaderComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-dueDate"]');
expect(valueEl.innerText).toBe('No date');
expect(valueEl.innerText).toBe('PROCESS_PROPERTIES.DUE_DATE_DEFAULT');
});
it('should display process category', () => {
@ -109,7 +109,7 @@ describe('ProcessInstanceHeaderComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-category"]');
expect(valueEl.innerText).toBe('No category');
expect(valueEl.innerText).toBe('PROCESS_PROPERTIES.CATEGORY_DEFAULT');
});
it('should display created date', () => {
@ -149,6 +149,6 @@ describe('ProcessInstanceHeaderComponent', () => {
component.ngOnChanges({});
fixture.detectChanges();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-description"]');
expect(valueEl.innerText).toBe('No description');
expect(valueEl.innerText).toBe('PROCESS_PROPERTIES.DESCRIPTION_DEFAULT');
});
});

View File

@ -38,19 +38,52 @@ export class ProcessInstanceHeaderComponent implements OnChanges {
refreshData() {
if (this.processInstance) {
this.properties = [
new CardViewTextItemModel({label: 'Status:', value: this.getProcessStatus(), key: 'status'}),
new CardViewDateItemModel({label: 'Due Date:', value: this.processInstance.ended, format: 'MMM DD YYYY', key: 'dueDate', default: 'No date'}),
new CardViewTextItemModel({label: 'Category:', value: this.processInstance.processDefinitionCategory, key: 'category', default: 'No category'}),
new CardViewTextItemModel(
{
label: 'Created By:',
label: 'PROCESS_PROPERTIES.STATUS',
value: this.getProcessStatus(),
key: 'status'
}),
new CardViewDateItemModel(
{
label: 'PROCESS_PROPERTIES.DUE_DATE',
value: this.processInstance.ended,
format: 'MMM DD YYYY',
key: 'dueDate',
default: 'PROCESS_PROPERTIES.DUE_DATE_DEFAULT'
}),
new CardViewTextItemModel(
{
label: 'PROCESS_PROPERTIES.CATEGORY',
value: this.processInstance.processDefinitionCategory,
key: 'category',
default: 'PROCESS_PROPERTIES.CATEGORY_DEFAULT'
}),
new CardViewTextItemModel(
{
label: 'PROCESS_PROPERTIES.CREATED_BY',
value: this.getStartedByFullName(),
key: 'assignee',
default: 'No assignee'
default: 'PROCESS_PROPERTIES.CREATED_BY_DEFAULT'
}),
new CardViewDateItemModel({label: 'Created:', value: this.processInstance.started, format: 'MMM DD YYYY', key: 'created'}),
new CardViewTextItemModel({label: 'Id:', value: this.processInstance.id, key: 'id'}),
new CardViewTextItemModel({label: 'Description:', value: this.processInstance.processDefinitionDescription, key: 'description', default: 'No description'})
new CardViewDateItemModel(
{
label: 'PROCESS_PROPERTIES.CREATED',
value: this.processInstance.started,
format: 'MMM DD YYYY',
key: 'created'
}),
new CardViewTextItemModel(
{label: 'PROCESS_PROPERTIES.ID',
value: this.processInstance.id,
key: 'id'
}),
new CardViewTextItemModel(
{label: 'PROCESS_PROPERTIES.DESCRIPTION',
value: this.processInstance.processDefinitionDescription,
key: 'description',
default: 'PROCESS_PROPERTIES.DESCRIPTION_DEFAULT'
})
];
}
}

View File

@ -12,6 +12,19 @@
"NONE": "No process instance filter selected."
}
},
"PROCESS_PROPERTIES": {
"STATUS": "Status",
"DUE_DATE": "Due Date",
"DUE_DATE_DEFAULT": "No date",
"CATEGORY": "Category",
"CATEGORY_DEFAULT": "No category",
"CREATED_BY": "Created By",
"CREATED_BY_DEFAULT": "No assignee",
"CREATED": "Created",
"DESCRIPTION": "Description",
"DESCRIPTION_DEFAULT": "No description",
"ID": "Id"
},
"DETAILS": {
"LABELS": {
"STARTED_BY": "Started by",

View File

@ -1,25 +1,51 @@
@mixin mat-info-drawer-theme($theme) {
$background: map-get($theme, background);
$primary: map-get($theme, primary);
.adf {
&-info-drawer-layout {
width: 350px;
width: 385px;
display: block;
padding: 8px 0;
background-color: mat-color($background, dialog);
background-color: #fafafa;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
& .mat-tab-label {
font-family: Muli;
font-size: 14px;
font-weight: bold;
text-align: left;
color: mat-color($primary);
}
&-header {
padding: 8px 24px 24px 24px;
padding: 13px 0px 0px 23px;
display: flex;
justify-content: space-between;
font-size: 20px;
margin-bottom: 40px;
&-buttons {
mat-icon {
cursor: pointer;
}
}
&-title {
width: 197px;
height: 32px;
opacity: 0.54;
font-family: Helvetica;
font-size: 20px;
line-height: 1.6;
letter-spacing: -0.5px;
text-align: left;
color: #000000;
& > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
&-content {