[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

ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.spec.ts

@@ -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');
     });
 });

ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts

@@ -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 CardViewDateItemModel(
-                new CardViewTextItemModel({label: 'Id:', value: this.processInstance.id, key: 'id'}),
+                    {
-                new CardViewTextItemModel({label: 'Description:', value: this.processInstance.processDefinitionDescription, key: 'description', default: 'No description'})
+                        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'
+                })
             ];
         }
     }

ng2-components/ng2-activiti-processlist/src/i18n/en.json

@@ -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",

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss

@@ -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: #fafafa;
-            background-color: mat-color($background, dialog);
             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 {