From 05b4f3de3e173e49544d7c9eb49a65703b4d5aa5 Mon Sep 17 00:00:00 2001 From: vitorvargasdev Date: Thu, 4 Apr 2024 18:55:29 -0300 Subject: [PATCH 1/8] fix: resolve icon --- src/web-components/comments/components/comment-item.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/web-components/comments/components/comment-item.ts b/src/web-components/comments/components/comment-item.ts index 5a7f58f7..8d0d15a3 100644 --- a/src/web-components/comments/components/comment-item.ts +++ b/src/web-components/comments/components/comment-item.ts @@ -242,7 +242,6 @@ export class CommentsCommentItem extends WebComponentsBaseElement { Date: Thu, 4 Apr 2024 19:18:17 -0300 Subject: [PATCH 2/8] fix: add word break in edit mode --- src/web-components/comments/css/comment-item.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/web-components/comments/css/comment-item.style.ts b/src/web-components/comments/css/comment-item.style.ts index d0a71afc..6537cf53 100644 --- a/src/web-components/comments/css/comment-item.style.ts +++ b/src/web-components/comments/css/comment-item.style.ts @@ -66,6 +66,7 @@ export const commentItemStyle = css` .comments__comment-item__content { width: 100%; + word-wrap: break-word; } .line-clamp { From 213e1f85635e219f669338e294d91d7a284cc3c4 Mon Sep 17 00:00:00 2001 From: vitorvargasdev Date: Thu, 4 Apr 2024 19:31:50 -0300 Subject: [PATCH 3/8] fix: hidden class --- src/web-components/comments/css/annotation-item.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web-components/comments/css/annotation-item.style.ts b/src/web-components/comments/css/annotation-item.style.ts index ff70d61a..fecb34c2 100644 --- a/src/web-components/comments/css/annotation-item.style.ts +++ b/src/web-components/comments/css/annotation-item.style.ts @@ -82,6 +82,7 @@ export const annotationItemStyle = css` .hidden { overflow: hidden; + opacity: 0; } .comments__thread { @@ -111,7 +112,6 @@ export const annotationItemStyle = css` grid-template-rows: 0fr; opacity: 0; width: 100%; - overflow: hidden; transition: grid-template-rows 0.3s linear, opacity 0.3s linear; } From 2dd4322015fbfc103b989ce79d61ef70d2ea87d5 Mon Sep 17 00:00:00 2001 From: vitorvargasdev Date: Thu, 4 Apr 2024 19:39:58 -0300 Subject: [PATCH 4/8] fix: change resolve icon to md temporary --- src/web-components/comments/components/comment-item.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/web-components/comments/components/comment-item.ts b/src/web-components/comments/components/comment-item.ts index 8d0d15a3..a61e1a19 100644 --- a/src/web-components/comments/components/comment-item.ts +++ b/src/web-components/comments/components/comment-item.ts @@ -239,9 +239,10 @@ export class CommentsCommentItem extends WebComponentsBaseElement { 'resolve-icon', )} icon-button icon-button--clickable icon-button--xsmall ${isResolvable}" > + Date: Thu, 4 Apr 2024 19:41:27 -0300 Subject: [PATCH 5/8] refactor: remove unnecessary test --- src/web-components/comments/comments.test.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/web-components/comments/comments.test.ts b/src/web-components/comments/comments.test.ts index dde42b77..4e3b7938 100644 --- a/src/web-components/comments/comments.test.ts +++ b/src/web-components/comments/comments.test.ts @@ -63,11 +63,6 @@ describe('comments', () => { expect(app?.classList.contains('superviz-comments')).toBe(true); }); - // FIXME: Need refactor should listen event toggle - test('should toggle superviz comments', async () => { - // ! WIP ! - }); - test('should update annotations', async () => { const annotations = [{ id: '1', x: 0, y: 0, width: 0, height: 0, text: 'test' }]; From 646b650e5f60efd3e2a2c4c4ffdb4464cb7f580b Mon Sep 17 00:00:00 2001 From: vitorvargasdev Date: Fri, 5 Apr 2024 10:33:35 -0300 Subject: [PATCH 6/8] fix: remove hover in confirm button --- src/web-components/comments/components/comment-input.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web-components/comments/components/comment-input.ts b/src/web-components/comments/components/comment-input.ts index e1aea337..0d4bc44a 100644 --- a/src/web-components/comments/components/comment-input.ts +++ b/src/web-components/comments/components/comment-input.ts @@ -393,7 +393,7 @@ export class CommentsCommentInput extends WebComponentsBaseElement { Date: Fri, 5 Apr 2024 16:53:11 -0300 Subject: [PATCH 8/8] fix: comment ellipsis and close/open in large texts --- .../comments/components/annotation-item.ts | 2 +- .../comments/components/comment-item.test.ts | 35 +++++--- .../comments/components/comment-item.ts | 84 ++++++++++++------- 3 files changed, 79 insertions(+), 42 deletions(-) diff --git a/src/web-components/comments/components/annotation-item.ts b/src/web-components/comments/components/annotation-item.ts index f758e21d..a1ac6a1f 100644 --- a/src/web-components/comments/components/annotation-item.ts +++ b/src/web-components/comments/components/annotation-item.ts @@ -131,7 +131,7 @@ export class CommentsAnnotationItem extends WebComponentsBaseElement { } } - private selectAnnotation = () => { + private selectAnnotation = (event: PointerEvent): void => { const { uuid } = this.annotation; document.body.dispatchEvent(new CustomEvent('select-annotation', { detail: { uuid } })); }; diff --git a/src/web-components/comments/components/comment-item.test.ts b/src/web-components/comments/components/comment-item.test.ts index 6edd0c37..c6c1cc09 100644 --- a/src/web-components/comments/components/comment-item.test.ts +++ b/src/web-components/comments/components/comment-item.test.ts @@ -50,11 +50,11 @@ describe('CommentsCommentItem', () => { const createdAt = element.shadowRoot!.querySelector( '.comments__comment-item__date', ) as HTMLSpanElement; - expect(createdAt.textContent).toEqual(DateTime.now().toFormat('yyyy-dd-MM')); + expect(createdAt.innerText).toEqual(DateTime.now().toFormat('yyyy-dd-MM')); const text = element.shadowRoot!.querySelector( '.comments__comment-item__content', - ) as HTMLSpanElement; + ) as HTMLParagraphElement; expect(text.innerText).toEqual('This is a comment'); }); @@ -209,7 +209,7 @@ describe('CommentsCommentItem', () => { expect(element.dispatchEvent).toHaveBeenCalledWith(new CustomEvent('delete-annotation')); }); - test('when click in text should expand elipis when text is bigger than 120', async () => { + test('when text is bigger than 120 and annotation is not selected should add line-clamp class to text', async () => { element = await createElement({ ...DEFAULT_ELEMENT_OPTIONS, text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl eget.', @@ -217,27 +217,36 @@ describe('CommentsCommentItem', () => { await element['updateComplete']; - const text = element.shadowRoot!.querySelector('.annotation-content') as HTMLElement; - text.click(); - - await element['updateComplete']; + const paragraph = element.shadowRoot!.getElementById('comment-text') as HTMLParagraphElement; - expect(element['expandElipsis']).toBeTruthy(); + expect(paragraph.classList.contains('line-clamp')).toBeTruthy(); }); - test('when click in text should not expand elipis when text is smaller than 120', async () => { + test('when text is bigger than 120 and annotation is selected should not have line-clamp to text', async () => { element = await createElement({ ...DEFAULT_ELEMENT_OPTIONS, - text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl eget.', }); await element['updateComplete']; - const text = element.shadowRoot!.querySelector('.annotation-content') as HTMLElement; - text.click(); + const paragraph = element.shadowRoot!.getElementById('comment-text') as HTMLParagraphElement; + paragraph.click(); + + element['isSelected'] = true; + await element['updateComplete']; + + expect(paragraph.classList.contains('line-clamp')).toBeFalsy(); + }); + + test('should not add line-clamp class when text is smaller than 120', async () => { + element = await createElement({ + ...DEFAULT_ELEMENT_OPTIONS, + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + }); await element['updateComplete']; - expect(element['expandElipsis']).toBeFalsy(); + expect(element['line-clamp']).toBeFalsy(); }); }); diff --git a/src/web-components/comments/components/comment-item.ts b/src/web-components/comments/components/comment-item.ts index c4cf2771..1da6250d 100644 --- a/src/web-components/comments/components/comment-item.ts +++ b/src/web-components/comments/components/comment-item.ts @@ -32,7 +32,7 @@ export class CommentsCommentItem extends WebComponentsBaseElement { declare mode: CommentMode; declare deleteCommentModalOpen: boolean; declare primaryComment: boolean; - declare expandElipsis: boolean; + declare isSelected: boolean; declare annotationFilter: string; declare participantsList: ParticipantByGroupApi[]; declare mentions: ParticipantByGroupApi[]; @@ -51,7 +51,7 @@ export class CommentsCommentItem extends WebComponentsBaseElement { mode: { type: String }, deleteCommentModalOpen: { type: Boolean }, primaryComment: { type: Boolean }, - expandElipsis: { type: Boolean }, + isSelected: { type: Boolean }, annotationFilter: { type: String }, participantsList: { type: Object }, mentions: { type: Array }, @@ -65,8 +65,47 @@ export class CommentsCommentItem extends WebComponentsBaseElement { this.updateComplete.then(() => { importStyle.call(this, ['comments']); }); + + document.body.addEventListener('select-annotation', this.selectAnnotation); + } + + connectedCallback(): void { + super.connectedCallback(); + + window.document.body.addEventListener('select-annotation', this.selectAnnotation); + window.document.body.addEventListener('keyup', this.unselectAnnotationEsc); + window.document.body.addEventListener('unselect-annotation', this.unselectAnnotation); + } + + disconnectedCallback(): void { + super.disconnectedCallback(); + + window.document.body.removeEventListener('select-annotation', this.selectAnnotation); + window.document.body.removeEventListener('keyup', this.unselectAnnotationEsc); + window.document.body.removeEventListener('unselect-annotation', this.unselectAnnotation); } + private unselectAnnotationEsc = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + this.isSelected = false; + } + }; + + private unselectAnnotation = () => { + this.isSelected = false; + }; + + private selectAnnotation = ({ detail }: CustomEvent) => { + const { uuid } = detail; + + if (this.isSelected) { + this.isSelected = false; + return; + } + + this.isSelected = uuid === this.annotationId; + }; + private updateComment = ({ detail }: CustomEvent) => { const { text, mentions } = detail; this.text = text; @@ -159,12 +198,6 @@ export class CommentsCommentItem extends WebComponentsBaseElement { } }; - const expandElipsis = () => { - if (this.text.length < 120) return; - - this.expandElipsis = true; - }; - const textareaHtml = () => { const classes = { 'comments__comment-item--editable': true, @@ -189,20 +222,16 @@ export class CommentsCommentItem extends WebComponentsBaseElement { const commentText = () => { const textClasses = { - editing: this.mode === CommentMode.EDITABLE, - 'annotation-content': true, text: true, 'text-big': true, 'sv-gray-700': true, + 'annotation-content': true, [this.getClasses('content')]: true, - 'line-clamp': !this.expandElipsis && this.text.length > 120, + editing: this.mode === CommentMode.EDITABLE, + 'line-clamp': !this.isSelected && this.text.length > 120, }; - return html` - ${this.text} - `; + return html`

${this.text}

`; }; const closeModal = () => { @@ -225,12 +254,12 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
${this.getAvatar()} - ${this.username} - ${humanizeDate(this.createdAt)} + + ${this.username} + + + ${humanizeDate(this.createdAt)} +
event.stopPropagation()} + @click=${(event: Event) => { + event.stopPropagation(); + }} classesPrefix="comments__dropdown" parentComponent="comments" >