diff --git a/lib/core/models/comment-process.model.ts b/lib/core/models/comment-process.model.ts
index a9dfb7570c..627e77e891 100644
--- a/lib/core/models/comment-process.model.ts
+++ b/lib/core/models/comment-process.model.ts
@@ -22,6 +22,7 @@ export class CommentProcessModel implements CommentRepresentation {
message: string;
created: Date;
createdBy: LightUserRepresentation;
+ isSelected: boolean;
constructor(obj?: any) {
if (obj) {
@@ -29,6 +30,7 @@ export class CommentProcessModel implements CommentRepresentation {
this.message = obj.message;
this.created = obj.created;
this.createdBy = obj.createdBy;
+ this.isSelected = obj.isSelected ? obj.isSelected : false;
}
}
}
diff --git a/lib/process-services/comments/comment-list.component.html b/lib/process-services/comments/comment-list.component.html
index bbc4b5aff5..b009d31ff0 100644
--- a/lib/process-services/comments/comment-list.component.html
+++ b/lib/process-services/comments/comment-list.component.html
@@ -1,38 +1,31 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/lib/process-services/comments/comment-list.component.scss b/lib/process-services/comments/comment-list.component.scss
index c4069a2bc1..d35eee846d 100644
--- a/lib/process-services/comments/comment-list.component.scss
+++ b/lib/process-services/comments/comment-list.component.scss
@@ -1,13 +1,40 @@
@mixin adf-task-list-comment-list-theme($theme) {
$primary: map-get($theme, primary);
+ $primaryColor: mat-color($primary, 100);
+ $rippleColor: mat-color($primary, 300);
+
+ .is-selected {
+ background: mat-color($primary, 100);
+ }
.adf {
&-comment-img-container {
float: left;
width: 40px;
- padding: 5px 10px;
height: 100%;
+ display: flex;
+ align-self: flex-start;
+ padding-top: 18px;
+ }
+
+ &-comment-list-item {
+ white-space: initial;
+ display: table-row-group;
+ padding-top: 12px;
+ overflow: hidden;
+ height: 100% !important;
+ transition: background 0.8s;
+ background-position: center;
+
+ &:hover {
+ background: $primaryColor radial-gradient(circle, transparent 1%, $primaryColor 1%) center/15000%;
+ }
+ &:active {
+ background-color: $rippleColor;
+ background-size: 100%;
+ transition: background 0s;
+ }
}
&-comment-user-icon {
@@ -16,18 +43,17 @@
background-color: mat-color($primary);
border-radius: 50%;
font-size: 16px;
- color: #fff;
text-align: center;
- height: 18px;
+ height: 20px;
background-size: cover;
}
&-comment-user-name {
float: left;
- width: calc(100% - 120px);
+ width: calc(100% - 10%);
padding: 2px 10px;
font-weight: 600;
- color: #595959;
+ font-size: 14px;
}
&-comment-message {
@@ -35,29 +61,26 @@
width: calc(100% - 10px);
padding: 2px 10px;
font-style: italic;
- color: #595959;
- white-space: initial;
+ white-space: initial !important;
+ font-size: 14px;
+ letter-spacing: -0.2px;
+ line-height: 1.43;
+ opacity: 0.54;
}
&-comment-message-time {
float: left;
- width: calc(100% - 120px);
+ width: calc(100% - 10%);
padding: 2px 10px;
- font-size: 12px;
- color: #595959;
+ font-size: 12px !important;
+ opacity: 0.54;
}
&-comment-contents {
- float: left;
width: calc(100% - 10px);
- }
-
- &-datatable ::ng-deep table {
- border: none !important;
- tbody td {
- padding: 0px !important;
- border-top: none !important;
- }
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 5px;
}
&-people-img {
@@ -69,6 +92,3 @@
}
}
-
-
-
diff --git a/lib/process-services/comments/comment-list.component.spec.ts b/lib/process-services/comments/comment-list.component.spec.ts
index 1eb5e94427..ea762e2cc1 100644
--- a/lib/process-services/comments/comment-list.component.spec.ts
+++ b/lib/process-services/comments/comment-list.component.spec.ts
@@ -18,8 +18,8 @@
import { DatePipe } from '@angular/common';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CommentProcessModel, UserProcessModel } from '@alfresco/adf-core';
-import { DataRowEvent, ObjectDataRow } from '@alfresco/adf-core';
import { CommentListComponent } from './comment-list.component';
+import { By } from '@angular/platform-browser';
const testUser: UserProcessModel = new UserProcessModel({
id: '1',
@@ -35,6 +35,13 @@ const testComment: CommentProcessModel = new CommentProcessModel({
createdBy: testUser
});
+const secondtestComment: CommentProcessModel = new CommentProcessModel({
+ id: 2,
+ message: '2nd Test Comment',
+ created: new Date().toDateString(),
+ createdBy: testUser
+});
+
describe('CommentListComponent', () => {
let commentList: CommentListComponent;
@@ -59,31 +66,52 @@ describe('CommentListComponent', () => {
});
}));
- it('should emit row click event', (done) => {
- let row = new ObjectDataRow(testComment);
- let rowEvent = new DataRowEvent(row, null);
+ it('should emit row click event', async(() => {
+ commentList.comments = [testComment];
commentList.clickRow.subscribe(selectedComment => {
expect(selectedComment.id).toEqual(1);
expect(selectedComment.message).toEqual('Test Comment');
expect(selectedComment.createdBy).toEqual(testUser);
expect(selectedComment.created).toEqual(testDate.toDateString());
- done();
+ expect(selectedComment.isSelected).toBeTruthy();
});
- commentList.selectComment(rowEvent);
- });
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ let comment = fixture.debugElement.query(By.css('#adf-comment-1'));
+ comment.triggerEventHandler('click', null);
+ });
+ }));
- it('should not show comment list if no input is given', (done) => {
+ it('should deselect the previous selected comment when a new one is clicked', async(() => {
+ testComment.isSelected = true;
+ commentList.selectedComment = testComment;
+ commentList.comments = [testComment, secondtestComment];
+
+ commentList.clickRow.subscribe(selectedComment => {
+ fixture.detectChanges();
+ let commentSelectedList = fixture.nativeElement.querySelectorAll('.is-selected');
+ expect(commentSelectedList.length).toBe(1);
+ expect(commentSelectedList[0].textContent).toContain('2nd Test Comment');
+ });
+
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ let comment = fixture.debugElement.query(By.css('#adf-comment-2'));
+ comment.triggerEventHandler('click', null);
+ });
+ }));
+
+ it('should not show comment list if no input is given', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.nativeElement.querySelector('adf-datatable')).toBeNull();
- done();
});
- });
+ }));
- it('should show comment message when input is given', (done) => {
+ it('should show comment message when input is given', async(() => {
commentList.comments = [testComment];
fixture.detectChanges();
@@ -92,11 +120,10 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(testComment.message);
expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
- done();
});
- });
+ }));
- it('should show comment user when input is given', (done) => {
+ it('should show comment user when input is given', async(() => {
commentList.comments = [testComment];
fixture.detectChanges();
@@ -105,11 +132,10 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(testComment.createdBy.firstName + ' ' + testComment.createdBy.lastName);
expect(fixture.nativeElement.querySelector('#comment-user:empty')).toBeNull();
- done();
});
- });
+ }));
- it('should show comment date time when input is given', (done) => {
+ it('should show comment date time when input is given', async(() => {
commentList.comments = [testComment];
fixture.detectChanges();
@@ -118,22 +144,20 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(commentList.transformDate(testDate.toDateString()));
expect(fixture.nativeElement.querySelector('#comment-time:empty')).toBeNull();
- done();
});
- });
+ }));
- it('comment date time should start with Today when comment date is today', (done) => {
+ it('comment date time should start with Today when comment date is today', async(() => {
commentList.comments = [testComment];
fixture.detectChanges();
fixture.whenStable().then(() => {
element = fixture.nativeElement.querySelector('#comment-time');
expect(element.innerText).toContain('Today');
- done();
});
- });
+ }));
- it('comment date time should start with Yesterday when comment date is yesterday', (done) => {
+ it('comment date time should start with Yesterday when comment date is yesterday', async(() => {
testComment.created = new Date((Date.now() - 24 * 3600 * 1000));
commentList.comments = [testComment];
fixture.detectChanges();
@@ -141,11 +165,10 @@ describe('CommentListComponent', () => {
fixture.whenStable().then(() => {
element = fixture.nativeElement.querySelector('#comment-time');
expect(element.innerText).toContain('Yesterday');
- done();
});
- });
+ }));
- it('comment date time should not start with Today/Yesterday when comment date is before yesterday', (done) => {
+ it('comment date time should not start with Today/Yesterday when comment date is before yesterday', async(() => {
testComment.created = new Date((Date.now() - 24 * 3600 * 1000 * 2));
commentList.comments = [testComment];
fixture.detectChanges();
@@ -154,11 +177,10 @@ describe('CommentListComponent', () => {
element = fixture.nativeElement.querySelector('#comment-time');
expect(element.innerText).not.toContain('Today');
expect(element.innerText).not.toContain('Yesterday');
- done();
});
- });
+ }));
- it('should show user icon when input is given', (done) => {
+ it('should show user icon when input is given', async(() => {
commentList.comments = [testComment];
fixture.detectChanges();
@@ -167,16 +189,6 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1);
expect(elements[0].innerText).toContain(commentList.getUserShortName(testComment.createdBy));
expect(fixture.nativeElement.querySelector('#comment-user-icon:empty')).toBeNull();
- done();
});
- });
-
- it('should hide the datatable header in comment-list as showHeader is false', (done) => {
- fixture.detectChanges();
- fixture.whenStable().then(() => {
- fixture.detectChanges();
- expect(element.querySelector('.adf-datatable-header')).toBe(null);
- done();
- });
- });
+ }));
});
diff --git a/lib/process-services/comments/comment-list.component.ts b/lib/process-services/comments/comment-list.component.ts
index 92d357f838..962812f2a3 100644
--- a/lib/process-services/comments/comment-list.component.ts
+++ b/lib/process-services/comments/comment-list.component.ts
@@ -17,12 +17,13 @@
import { CommentProcessModel, PeopleProcessService, UserProcessModel } from '@alfresco/adf-core';
import { DatePipe } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-comment-list',
templateUrl: './comment-list.component.html',
- styleUrls: ['./comment-list.component.scss']
+ styleUrls: ['./comment-list.component.scss'],
+ encapsulation: ViewEncapsulation.None
})
export class CommentListComponent {
@@ -40,8 +41,12 @@ export class CommentListComponent {
constructor(private datePipe: DatePipe, public peopleProcessService: PeopleProcessService) {
}
- selectComment(event: any): void {
- this.selectedComment = event.value.obj;
+ selectComment(comment: CommentProcessModel): void {
+ if (this.selectedComment) {
+ this.selectedComment.isSelected = false;
+ }
+ comment.isSelected = true;
+ this.selectedComment = comment;
this.clickRow.emit(this.selectedComment);
}
@@ -74,9 +79,4 @@ export class CommentListComponent {
}
return formattedDate;
}
-
- hasComments(): boolean {
- return this.comments && this.comments.length && true;
- }
-
}