Add extra add reactions button to encourage more diverse reactions to content

res/css/views/messages/_ReactionsRow.scss

@@ -17,6 +17,26 @@ limitations under the License.
 .mx_ReactionsRow {
     margin: 6px 0;
     color: $primary-fg-color;
+
+    .mx_ReactionsRow_addReactionButton {
+        position: relative;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: sub;
+
+        &::before {
+            content: '';
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            mask-size: cover;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: $tertiary-fg-color;
+            mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
+        }
+    }
 }
 
 .mx_ReactionsRow_showAll {

src/components/views/messages/ReactionsRow.js

@@ -16,16 +16,44 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { isContentActionable } from '../../../utils/EventUtils';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import {aboveLeftOf, ContextMenu, useContextMenu} from "../../structures/ContextMenu";
 
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
 
+const ReactButton = ({ mxEvent, reactions }) => {
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const buttonRect = button.current.getBoundingClientRect();
+        const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
+            <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
+        </ContextMenu>;
+    }
+
+    return <React.Fragment>
+        <ContextMenuTooltipButton
+            className="mx_ReactionsRow_addReactionButton"
+            title={_t("Add reaction")}
+            onClick={openMenu}
+            isExpanded={menuDisplayed}
+            inputRef={button}
+        />
+
+        { contextMenu }
+    </React.Fragment>;
+};
+
 @replaceableComponent("views.messages.ReactionsRow")
 export default class ReactionsRow extends React.PureComponent {
     static propTypes = {
@@ -151,13 +179,21 @@ export default class ReactionsRow extends React.PureComponent {
             </a>;
         }
 
+        const cli = MatrixClientPeg.get();
+
+        let addReactionButton;
+        if (cli.getRoom(mxEvent.getRoomId()).currentState.maySendEvent(EventType.Reaction, cli.getUserId())) {
+            addReactionButton = <ReactButton mxEvent={mxEvent} reactions={reactions} />;
+        }
+
         return <div
             className="mx_ReactionsRow"
             role="toolbar"
             aria-label={_t("Reactions")}
         >
-            {items}
-            {showAllButton}
+            { items }
+            { addReactionButton }
+            { showAllButton }
         </div>;
     }
 }

src/i18n/strings/en_EN.json

@@ -1864,6 +1864,7 @@
     "You sent a verification request": "You sent a verification request",
     "Error decrypting video": "Error decrypting video",
     "Error processing voice message": "Error processing voice message",
+    "Add reaction": "Add reaction",
     "Show all": "Show all",
     "Reactions": "Reactions",
     "<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",