Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
[emojiSize]="20"
[totalFrequentLines]="2"
[darkMode]="false"
[style]="{ width: '506px' }"
[style]="{ width: emojiPickerWidth }"
[showPreview]="false"
*ngIf="isEmojiPickerOpen"
(emojiClick)="onEmojiClick($event)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
font-size: 18px;
position: absolute;
top: 0;
right: -15px;
right: -10px;
cursor: pointer;
color: var(--tertiary-dark-grey);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)]);
Expand Down Expand Up @@ -163,6 +164,24 @@ 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;

if (screenWidth <= 640) {
kryzanivska-nastya marked this conversation as resolved.
Show resolved Hide resolved
this.emojiPickerWidth = '100%';
} else if (screenWidth <= 1024) {
this.emojiPickerWidth = '475px';
} else {
this.emojiPickerWidth = '506px';
}
}

onEmojiClick(event: EmojiEvent): void {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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>`
);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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>`);
}
}
Loading