Add reactions button to msg context menu

Author: simobot

res/css/views/context_menus/_MessageContextMenu.scss

@@ -93,4 +93,8 @@ limitations under the License.
     .mx_MessageContextMenu_iconViewInRoom::before {
         mask-image: url('$(res)/img/element-icons/view-in-room.svg');
     }
+
+    .mx_MessageContextMenu_iconEmoji::before {
+        mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
+    }
 }

src/components/views/context_menus/MessageContextMenu.tsx

@@ -39,6 +39,7 @@ import { Action } from "../../../dispatcher/actions";
 import ReportEventDialog from '../dialogs/ReportEventDialog';
 import ViewSource from '../../structures/ViewSource';
 import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
+import ReactionsDialog from '../dialogs/ReactionsDialog';
 import ShareDialog from '../dialogs/ShareDialog';
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { ChevronFace, IPosition } from '../../structures/ContextMenu';
@@ -81,6 +82,7 @@ interface IProps extends IPosition {
         relationType: string,
         eventType: string
     ) => Relations;
+    reactions?: Relations;
 }
 
 interface IState {
@@ -169,6 +171,14 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         this.closeMenu();
     };
 
+    private onReactionsClick = (): void => {
+        Modal.createTrackedDialog('Reactions', '', ReactionsDialog, {
+            mxEvent: this.props.mxEvent,
+            reactions: this.props.reactions,
+        }, 'mx_Dialog_viewsource');
+        this.closeMenu();
+    };
+
     private onRedactClick = (): void => {
         const { mxEvent, onCloseDialog } = this.props;
         createRedactEventDialog({
@@ -367,6 +377,14 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             />
         );
 
+        const reactionsButton = (
+            <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconEmoji"
+                label={_t("Reactions")}
+                onClick={this.onReactionsClick}
+            />
+        );
+
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
@@ -491,6 +509,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                 { externalURLButton }
                 { unhidePreviewButton }
                 { viewSourceButton }
+                { reactionsButton }
                 { resendReactionsButton }
                 { collapseReplyChain }
             </IconizedContextMenuOptionList>

src/components/views/messages/MessageActionBar.tsx

@@ -58,6 +58,7 @@ interface IOptionsButtonProps {
         relationType: string,
         eventType: string
     ) => Relations;
+    reactions: Relations;
 }
 
 const OptionsButton: React.FC<IOptionsButtonProps> = ({
@@ -67,6 +68,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
     permalinkCreator,
     onFocusChange,
     getRelationsForEvent,
+    reactions,
 }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
     const [onFocus, isActive, ref] = useRovingTabIndex(button);
@@ -88,6 +90,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
             collapseReplyChain={replyChain && replyChain.canCollapse() ? replyChain.collapse : undefined}
             onFinished={closeMenu}
             getRelationsForEvent={getRelationsForEvent}
+            reactions={reactions}
         />;
     }
 
@@ -418,6 +421,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 onFocusChange={this.onFocusChange}
                 key="menu"
                 getRelationsForEvent={this.props.getRelationsForEvent}
+                reactions={this.props.reactions}
             />);
         }