From 07223dfbc6db2d2674c7e0ccbad60745a476be01 Mon Sep 17 00:00:00 2001 From: Anastasia <155824290+kryzanivska-nastya@users.noreply.github.com> Date: Tue, 10 Dec 2024 11:32:46 +0200 Subject: [PATCH 1/5] fixed --- .../comment-textarea.component.html | 2 +- .../comment-textarea.component.scss | 2 +- .../comment-textarea/comment-textarea.component.ts | 13 +++++++++++++ .../notific-content-replace.directive.spec.ts | 14 ++++++++++---- .../notific-content-replace.directive.ts | 6 ++++-- 5 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.html b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.html index 75f5668bd4..178dbd06f9 100644 --- a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.html +++ b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.html @@ -50,7 +50,7 @@ [emojiSize]="20" [totalFrequentLines]="2" [darkMode]="false" - [style]="{ width: '506px' }" + [style]="{ width: emojiPickerWidth }" [showPreview]="false" *ngIf="isEmojiPickerOpen" (emojiClick)="onEmojiClick($event)" diff --git a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.scss b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.scss index d6d272aecd..61b597a5ef 100644 --- a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.scss +++ b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.scss @@ -18,7 +18,7 @@ font-size: 18px; position: absolute; top: 0; - right: -15px; + right: -10px; cursor: pointer; color: var(--tertiary-dark-grey); } diff --git a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts index 7dfb0532c8..0ad456661a 100644 --- a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts +++ b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts @@ -38,6 +38,7 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange isImageUploaderOpen = false; showImageControls = false; isEmojiPickerOpen = false; + emojiPickerWidth = '506px'; uploadedImage: { url: string; file: File }[] = []; content: FormControl = new FormControl('', [Validators.required, this.innerHtmlMaxLengthValidator(8000)]); @@ -163,6 +164,17 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange toggleEmojiPickerVisibility(): void { this.isEmojiPickerOpen = !this.isEmojiPickerOpen; this.isImageUploaderOpen = false; + if (this.isEmojiPickerOpen) { + this.updateEmojiPickerWidth(); + window.addEventListener('resize', this.updateEmojiPickerWidth.bind(this)); + } else { + window.removeEventListener('resize', this.updateEmojiPickerWidth.bind(this)); + } + } + + updateEmojiPickerWidth(): void { + const screenWidth = window.innerWidth; + this.emojiPickerWidth = screenWidth <= 640 ? '100%' : screenWidth <= 1024 ? '475px' : '506px'; } onEmojiClick(event: EmojiEvent): void { @@ -352,5 +364,6 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange ngOnDestroy() { this.destroy$.next(true); this.destroy$.complete(); + window.removeEventListener('resize', this.updateEmojiPickerWidth.bind(this)); } } diff --git a/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts b/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts index 229b29fe83..10a527e840 100644 --- a/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts +++ b/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts @@ -45,7 +45,9 @@ describe('NotificContentReplaceDirective', () => { component.notification = { ...notification, ...{ bodyText: '{user1} and {user2} liked your post' } }; fixture.detectChanges(); expect(paragrEl.textContent).toBe('testUser1 and testUser2 liked your post'); - expect(paragrEl.innerHTML).toBe(`testUser1 and testUser2 liked your post`); + expect(paragrEl.innerHTML).toBe( + `testUser1 and testUser2 liked your post` + ); }); it('should leave placeholders as is if replacements are missing', () => { @@ -61,7 +63,9 @@ describe('NotificContentReplaceDirective', () => { }; fixture.detectChanges(); expect(paragrEl.textContent).toBe('testUser1,testUser2 interacted with your post'); - expect(paragrEl.innerHTML).toBe('testUser1,testUser2 interacted with your post'); + expect(paragrEl.innerHTML).toBe( + 'testUser1,testUser2 interacted with your post' + ); }); it('should use body text when there are no property to set', () => { @@ -74,7 +78,7 @@ describe('NotificContentReplaceDirective', () => { component.notification = { ...notification, ...{ bodyText: 'commented event {message}' } }; fixture.detectChanges(); expect(paragrEl.textContent).toBe('commented event test message'); - expect(paragrEl.innerHTML).toBe('commented event test message'); + expect(paragrEl.innerHTML).toBe('commented event test message'); }); it('should add property value to the content and anchor tag', () => { @@ -84,6 +88,8 @@ describe('NotificContentReplaceDirective', () => { }; fixture.detectChanges(); expect(paragrEl.textContent).toBe('testUser1,testUser2 commented event test message'); - expect(paragrEl.innerHTML).toBe('testUser1,testUser2 commented event test message'); + expect(paragrEl.innerHTML).toBe( + 'testUser1,testUser2 commented event test message' + ); }); }); diff --git a/src/app/main/component/user/directives/notific-content-replace.directive.ts b/src/app/main/component/user/directives/notific-content-replace.directive.ts index a3c2e7e362..9deea6718c 100644 --- a/src/app/main/component/user/directives/notific-content-replace.directive.ts +++ b/src/app/main/component/user/directives/notific-content-replace.directive.ts @@ -60,14 +60,16 @@ export class NotificContentReplaceDirective implements OnChanges { text: string, attributes: Record | null ): string { + const style = 'style="font-family: var(--tertiary-font);"'; + if (!attributes) { - return content.replace(`{${placeholder}}`, text); + return content.replace(`{${placeholder}}`, `${text}`); } const attrString = Object.entries(attributes) .map(([key, value]) => `data-${key}="${value}"`) .join(' '); - return content.replace(`{${placeholder}}`, `${text}`); + return content.replace(`{${placeholder}}`, `${text}`); } } From f40d4ffceddf310c46f4f75ab47e594d2a1da04b Mon Sep 17 00:00:00 2001 From: Anastasia <155824290+kryzanivska-nastya@users.noreply.github.com> Date: Tue, 10 Dec 2024 11:36:19 +0200 Subject: [PATCH 2/5] small linting fix --- .../notific-content-replace.directive.spec.ts | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts b/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts index 10a527e840..28ea2963b4 100644 --- a/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts +++ b/src/app/main/component/user/directives/notific-content-replace.directive.spec.ts @@ -42,11 +42,16 @@ describe('NotificContentReplaceDirective', () => { })); it('should display multiple user replacements', () => { - component.notification = { ...notification, ...{ bodyText: '{user1} and {user2} liked your post' } }; + component.notification = { + ...notification, + ...{ bodyText: '{user1} and {user2} liked your post' } + }; fixture.detectChanges(); expect(paragrEl.textContent).toBe('testUser1 and testUser2 liked your post'); expect(paragrEl.innerHTML).toBe( - `testUser1 and testUser2 liked your post` + `testUser1` + + ` and testUser2` + + ` liked your post` ); }); @@ -59,12 +64,18 @@ describe('NotificContentReplaceDirective', () => { it('should handle multiple users in a single string replacement', () => { component.notification = { ...notification, - ...{ bodyText: '{user1},{user2} interacted with your post', actionUserId: [2, 3], actionUserText: ['testUser1', 'testUser2'] } + ...{ + bodyText: '{user1},{user2} interacted with your post', + actionUserId: [2, 3], + actionUserText: ['testUser1', 'testUser2'] + } }; fixture.detectChanges(); expect(paragrEl.textContent).toBe('testUser1,testUser2 interacted with your post'); expect(paragrEl.innerHTML).toBe( - 'testUser1,testUser2 interacted with your post' + `testUser1,` + + `testUser2` + + ` interacted with your post` ); }); @@ -84,12 +95,18 @@ describe('NotificContentReplaceDirective', () => { it('should add property value to the content and anchor tag', () => { component.notification = { ...notification, - ...{ bodyText: '{user1},{user2} commented event {message}', actionUserId: [2, 3], actionUserText: ['testUser1', 'testUser2'] } + ...{ + bodyText: '{user1},{user2} commented event {message}', + actionUserId: [2, 3], + actionUserText: ['testUser1', 'testUser2'] + } }; fixture.detectChanges(); expect(paragrEl.textContent).toBe('testUser1,testUser2 commented event test message'); expect(paragrEl.innerHTML).toBe( - 'testUser1,testUser2 commented event test message' + `testUser1,` + + `testUser2` + + ` commented event test message` ); }); }); From a061a19515026a24415808cc562f57a950757dac Mon Sep 17 00:00:00 2001 From: Anastasia <155824290+kryzanivska-nastya@users.noreply.github.com> Date: Tue, 10 Dec 2024 11:51:40 +0200 Subject: [PATCH 3/5] fix for better readibility --- .../comment-textarea/comment-textarea.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts index 0ad456661a..3e82f63cb0 100644 --- a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts +++ b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts @@ -174,7 +174,14 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange updateEmojiPickerWidth(): void { const screenWidth = window.innerWidth; - this.emojiPickerWidth = screenWidth <= 640 ? '100%' : screenWidth <= 1024 ? '475px' : '506px'; + + if (screenWidth <= 640) { + this.emojiPickerWidth = '100%'; + } else if (screenWidth <= 1024) { + this.emojiPickerWidth = '475px'; + } else { + this.emojiPickerWidth = '506px'; + } } onEmojiClick(event: EmojiEvent): void { From a1ea5d391863a957ecd1e62c5821575cf8499bd6 Mon Sep 17 00:00:00 2001 From: Anastasia <155824290+kryzanivska-nastya@users.noreply.github.com> Date: Tue, 10 Dec 2024 15:24:15 +0200 Subject: [PATCH 4/5] clean up --- .../components/comment-textarea/comment-textarea.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts index 3e82f63cb0..150caa1251 100644 --- a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts +++ b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts @@ -371,6 +371,5 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange ngOnDestroy() { this.destroy$.next(true); this.destroy$.complete(); - window.removeEventListener('resize', this.updateEmojiPickerWidth.bind(this)); } } From b9510f26546d04f836721adf8a7ff5fa26132fbd Mon Sep 17 00:00:00 2001 From: Anastasia <155824290+kryzanivska-nastya@users.noreply.github.com> Date: Thu, 12 Dec 2024 10:44:26 +0200 Subject: [PATCH 5/5] fixed according to comments --- .../comment-textarea.component.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts index 150caa1251..eb70b4868e 100644 --- a/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts +++ b/src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts @@ -40,6 +40,11 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange isEmojiPickerOpen = false; emojiPickerWidth = '506px'; uploadedImage: { url: string; file: File }[] = []; + private widthMap = new Map([ + [0, '100%'], + [641, '475px'], + [1025, '506px'] + ]); content: FormControl = new FormControl('', [Validators.required, this.innerHtmlMaxLengthValidator(8000)]); suggestedUsers: TaggedUser[] = []; @@ -164,6 +169,7 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange toggleEmojiPickerVisibility(): void { this.isEmojiPickerOpen = !this.isEmojiPickerOpen; this.isImageUploaderOpen = false; + if (this.isEmojiPickerOpen) { this.updateEmojiPickerWidth(); window.addEventListener('resize', this.updateEmojiPickerWidth.bind(this)); @@ -175,12 +181,10 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange updateEmojiPickerWidth(): void { const screenWidth = window.innerWidth; - if (screenWidth <= 640) { - this.emojiPickerWidth = '100%'; - } else if (screenWidth <= 1024) { - this.emojiPickerWidth = '475px'; - } else { - this.emojiPickerWidth = '506px'; + for (const [breakpoint, width] of this.widthMap) { + if (screenWidth >= breakpoint) { + this.emojiPickerWidth = width; + } } }