[NEW] Reaction view #18272

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

Merged

ggazzo merged 28 commits into develop from reaction-view

Oct 13, 2020

app/ui-utils/client/lib/MessageAction.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,9 @@ import { TAPi18n } from 'meteor/rocketchat:tap-i18n'; @@
     import { ReactiveVar } from 'meteor/reactive-var';
     import { Tracker } from 'meteor/tracker';
     import { Session } from 'meteor/session';
+    import { HTML } from 'meteor/htmljs';
+    import { createTemplateForComponent } from '../../../../client/reactAdapters';
     import { messageArgs } from './messageArgs';
     import { roomTypes, canDeleteMessage } from '../../../utils/client';
     import { Messages, Rooms, Subscriptions } from '../../../models/client';
@@ Expand Down Expand Up / @@ -355,4 +357,26 @@ Meteor.startup(async function() { @@
     		order: 17,
     		group: 'menu',
     	});
+    	MessageAction.addButton({
+    		id: 'reaction-list',
+    		icon: 'emoji',
+    		label: 'Reactions',
+    		context: ['message', 'message-mobile', 'threads'],
+    		action(_, roomInstance) {
+    			const { msg: { reactions } } = messageArgs(this);
+    			modal.open({
+    				template: createTemplateForComponent('reactionList', () => import('./ReactionListContent'), {
+    					renderContainerView: () => HTML.DIV({ style: 'margin: -16px; height: 100%; display: flex; flex-direction: column; overflow: hidden;' }), // eslint-disable-line new-cap
+    				}),
+    				data: { reactions, roomInstance, onClose: () => modal.close() },
+    			});
+    		},
+    		condition({ msg: { reactions } }) {
+    			return !!reactions;
+    		},
+    		order: 18,
+    		group: 'menu',
+    	});
     });

app/ui-utils/client/lib/ReactionListContent.js

-Original file line number
+Diff line change
@@ -0,0 +1,68 @@
+    import React from 'react';
+    import { Box, Tag, Modal, ButtonGroup, Button, Scrollable } from '@rocket.chat/fuselage';
+    import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+    import { useTranslation } from '../../../../client/contexts/TranslationContext';
+    import { useSetting } from '../../../../client/contexts/SettingsContext';
+    import { useSession } from '../../../../client/contexts/SessionContext';
+    import Emoji from '../../../../client/components/basic/Emoji';
+    import { openUserCard } from '../../../ui/client/lib/UserCard';
+    import { openProfileTabOrOpenDM } from '../../../ui/client/views/app/room';
+    export function Reactions({ reactions, roomInstance, onClose }) {
+    	const useRealName = useSetting('UI_Use_Real_Name');
+    	return <Scrollable>
+    		<Box>
+    			{Object.entries(reactions).map(([reaction, { names = [], usernames }]) => <Box key={reaction}>
+    				<Box display='flex' flexWrap='wrap' overflowX='hidden' mb='x8'>
+    					<Emoji emojiHandle={reaction} />
+    					<Box paddingBlock='x4' mis='x4'>
+    						{usernames.map((username, i) => <Username
+    							key={username}
+    							displayName={useRealName ? names[i] || username : username}
+    							username={username}
+    							roomInstance={roomInstance}
+    							onClose={onClose}
+    						/>)}
+    					</Box>
+    				</Box>
+    			</Box>)}
+    		</Box>
+    	</Scrollable>;
+    }
+    export function Username({ username, displayName, roomInstance, onClose }) {
+    	const openedRoom = useSession('openedRoom');
+    	const handleUserCard = useMutableCallback((e) => openUserCard({
+    		username,
+    		rid: openedRoom,
+    		target: e.currentTarget,
+    		open: (e) => {
+    			e.preventDefault();
+    			onClose();
+    			openProfileTabOrOpenDM(e, roomInstance, username);
+    		},
+    	}));
+    	return <Tag onClick={handleUserCard} marginInlineEnd='x4' key={displayName}>{displayName}</Tag>;
+    }
+    export default function ReactionListContent({ reactions, roomInstance, onClose }) {
+    	const t = useTranslation();
+    	return <>
+    		<Modal.Header>
+    			<Modal.Title>{t('Users_reacted')}</Modal.Title>
+    			<Modal.Close onClick={onClose}/>
+    		</Modal.Header>
+    		<Modal.Content fontScale='p1'>
+    			<Reactions reactions={reactions} roomInstance={roomInstance} onClose={onClose}/>
+    		</Modal.Content>
+    		<Modal.Footer>
+    			<ButtonGroup align='end'>
+    				<Button primary onClick={onClose}>{t('Ok')}</Button>
+    			</ButtonGroup>
+    		</Modal.Footer>
+    	</>;
+    }

app/ui/client/views/app/room.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -72,7 +72,7 @@ const openProfileTab = (e, instance, username) => { @@
     	instance.tabBar.open('members-list');
     };
-    const openProfileTabOrOpenDM = (e, instance, username) => {
+    export const openProfileTabOrOpenDM = (e, instance, username) => {
     	// if (settings.get('UI_Click_Direct_Message')) {
     	// 	Meteor.call('createDirectMessage', username, (error, result) => {
     	// 		if (error) {
@@ Expand Down @@

client/components/basic/Emoji.js

-Original file line number
+Diff line change
@@ -0,0 +1,10 @@
+    import React from 'react';
+    import { renderEmoji } from '../../../app/emoji/client/index';
+    function Emoji({ emojiHandle }) {
+    	const markup = { __html: `${ renderEmoji(emojiHandle) }` };
+    	return <div dangerouslySetInnerHTML={ markup }></div>;
+    }
+    export default Emoji;

packages/rocketchat-i18n/i18n/en.i18n.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -3775,6 +3775,7 @@ @@
       "User_not_found_or_incorrect_password": "User not found or incorrect password",
       "User_or_channel_name": "User or channel name",
       "User_Presence": "User Presence",
+      "Users_reacted": "Users that Reacted",
       "User_removed": "User removed",
       "User_removed_by": "User <em>__user_removed__</em> removed by <em>__user_by__</em>.",
       "User_sent_a_message_on_channel": "<strong>__username__</strong> sent a message on <strong>__channel__</strong>",
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NEW] Reaction view #18272

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!