Merge pull request #3487 from ita-social-projects/bugfix/#7901-emoji-…

…and-notification

[Bugfix]#7901, #7839, #7775 make emoji responsive and make the text that is redirecting in notifications different

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)"

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

src/app/main/component/comments/components/comment-textarea/comment-textarea.component.ts

@@ -38,7 +38,13 @@ export class CommentTextareaComponent implements OnInit, AfterViewInit, OnChange
   isImageUploaderOpen = false;
   showImageControls = false;
   isEmojiPickerOpen = false;
+  emojiPickerWidth = '506px';
   uploadedImage: { url: string; file: File }[] = [];
+  private widthMap = new Map<number, string>([
+    [0, '100%'],
+    [641, '475px'],
+    [1025, '506px']
+  ]);
 
   content: FormControl = new FormControl('', [Validators.required, this.innerHtmlMaxLengthValidator(8000)]);
   suggestedUsers: TaggedUser[] = [];
@@ -163,6 +169,23 @@ 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;
+
+    for (const [breakpoint, width] of this.widthMap) {
+      if (screenWidth >= breakpoint) {
+        this.emojiPickerWidth = width;
+      }
+    }
   }
 
   onEmojiClick(event: EmojiEvent): void {

src/app/main/component/user/directives/notific-content-replace.directive.spec.ts

@@ -42,10 +42,17 @@ 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(`<a data-userid="2">testUser1</a> and <a data-userid="3">testUser2</a> liked your post`);
+    expect(paragrEl.innerHTML).toBe(
+      `<a data-userid="2" style="font-family: var(--tertiary-font);">testUser1</a>` +
+        ` and <a data-userid="3" style="font-family: var(--tertiary-font);">testUser2</a>` +
+        ` liked your post`
+    );
   });
 
   it('should leave placeholders as is if replacements are missing', () => {
@@ -57,11 +64,19 @@ 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('<a data-userid="2">testUser1</a>,<a data-userid="3">testUser2</a> interacted with your post');
+    expect(paragrEl.innerHTML).toBe(
+      `<a data-userid="2" style="font-family: var(--tertiary-font);">testUser1</a>,` +
+        `<a data-userid="3" style="font-family: var(--tertiary-font);">testUser2</a>` +
+        ` interacted with your post`
+    );
   });
 
   it('should use body text when there are no property to set', () => {
@@ -74,16 +89,24 @@ 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 <span style="font-family: var(--tertiary-font);">test message</span>');
   });
 
   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('<a data-userid="2">testUser1</a>,<a data-userid="3">testUser2</a> commented event test message');
+    expect(paragrEl.innerHTML).toBe(
+      `<a data-userid="2" style="font-family: var(--tertiary-font);">testUser1</a>,` +
+        `<a data-userid="3" style="font-family: var(--tertiary-font);">testUser2</a>` +
+        ` commented event <span style="font-family: var(--tertiary-font);">test message</span>`
+    );
   });
 });

src/app/main/component/user/directives/notific-content-replace.directive.ts

@@ -60,14 +60,16 @@ export class NotificContentReplaceDirective implements OnChanges {
     text: string,
     attributes: Record<string, string | number> | null
   ): string {
+    const style = 'style="font-family: var(--tertiary-font);"';
+
     if (!attributes) {
-      return content.replace(`{${placeholder}}`, text);
+      return content.replace(`{${placeholder}}`, `<span ${style}>${text}</span>`);
     }
 
     const attrString = Object.entries(attributes)
       .map(([key, value]) => `data-${key}="${value}"`)
       .join(' ');
 
-    return content.replace(`{${placeholder}}`, `<a ${attrString}>${text}</a>`);
+    return content.replace(`{${placeholder}}`, `<a ${attrString} ${style}>${text}</a>`);
   }
 }