IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-55497] Add tooltips with enlarged emojis when hovering over emojis within message content (#26709)

Browse Source 
* feat: add tooltip to emojis in post messages

* ci: eslint fix
This commit is contained in:
Tanmay Thole 2024-04-12 16:40:03 +05:30 committed by GitHub
parent 1dd7046eff
commit bb26e8685f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/channels/src/components/post_emoji/post_emoji.test.tsx
View File

@ -16,14 +16,14 @@ describe('PostEmoji', () => {
test('should render image when imageUrl is provided', () => {
render(<PostEmoji {...baseProps}/>);
expect(screen.getByTitle(':' + baseProps.name + ':')).toBeInTheDocument();
expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toBeInTheDocument();
expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveStyle(`backgroundImage: url(${baseProps.imageUrl})}`);
});
test('should render shortcode text within span when imageUrl is provided', () => {
render(<PostEmoji {...baseProps}/>);
expect(screen.getByTitle(':' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`);
expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).toHaveTextContent(`:${baseProps.name}:`);
});
test('should render original text when imageUrl is empty', () => {
@ -34,7 +34,7 @@ describe('PostEmoji', () => {
render(<PostEmoji {...props}/>);
expect(screen.queryByTitle(':' + baseProps.name + ':')).not.toBeInTheDocument();
expect(screen.queryByTestId('postEmoji.:' + baseProps.name + ':')).not.toBeInTheDocument();
expect(screen.getByText(`:${props.name}:`)).toBeInTheDocument();
});
});

12
webapp/channels/src/components/post_emoji/post_emoji.tsx
View File

@ -3,6 +3,8 @@
import React from 'react';
import WithTooltip from 'components/with_tooltip';
interface Props {
name: string;
imageUrl: string;
@ -22,14 +24,22 @@ const PostEmoji = ({name, imageUrl}: Props) => {
}
return (
<WithTooltip
id='postEmoji__tooltip'
title={emojiText}
emoji={name}
emojiStyle='large'
placement='top'
>
<span
alt={emojiText}
className='emoticon'
title={emojiText}
data-testid={`postEmoji.${emojiText}`}
style={{backgroundImage: backgroundImageUrl}}
>
{emojiText}
</span>
</WithTooltip>
);
};

6
webapp/channels/src/sass/components/_post.scss
View File

@ -2058,6 +2058,12 @@
}
}
}
.post-message__text {
span.emoticon[style]:hover {
cursor: pointer;
}
}
}
&.post-message--overflow {