Encourage more diverse reactions to content

res/css/views/messages/_MessageActionBar.scss

@@ -85,6 +85,7 @@ limitations under the License.
     left: 0;
     height: 100%;
     width: 100%;
+    mask-size: 18px;
     mask-repeat: no-repeat;
     mask-position: center;
     background-color: $message-action-bar-fg-color;

res/css/views/messages/_ReactionsRow.scss

@@ -17,18 +17,55 @@ limitations under the License.
 .mx_ReactionsRow {
     margin: 6px 0;
     color: $primary-fg-color;
+
+    .mx_ReactionsRow_addReactionButton {
+        position: relative;
+        display: none; // show on hover of the .mx_EventTile
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+        margin-left: 4px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            mask-size: 16px;
+            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_addReactionButton_active {
+            display: inline-block; // keep showing whilst the context menu is shown
+        }
+
+        &:hover, &.mx_ReactionsRow_addReactionButton_active {
+            &::before {
+                background-color: $primary-fg-color;
+            }
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
+    display: inline-block;
 }
 
 .mx_ReactionsRow_showAll {
     text-decoration: none;
-    font-size: $font-10px;
-    font-weight: 600;
-    margin-left: 6px;
-    vertical-align: top;
-
-    &:hover,
-    &:link,
-    &:visited {
-        color: $accent-color;
+    font-size: $font-12px;
+    line-height: $font-20px;
+    margin-left: 4px;
+    vertical-align: middle;
+
+    &:link, &:visited {
+        color: $tertiary-fg-color;
+    }
+
+    &:hover {
+        color: $primary-fg-color;
     }
 }

res/css/views/messages/_ReactionsRowButton.scss

@@ -16,14 +16,15 @@ limitations under the License.
 
 .mx_ReactionsRowButton {
     display: inline-flex;
-    line-height: $font-21px;
+    line-height: $font-20px;
     margin-right: 6px;
-    padding: 0 6px;
+    padding: 1px 6px;
     border: 1px solid $reaction-row-button-border-color;
     border-radius: 10px;
     background-color: $reaction-row-button-bg-color;
     cursor: pointer;
     user-select: none;
+    vertical-align: middle;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;

src/components/views/messages/ReactionsRow.js → src/components/views/messages/ReactionsRow.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,29 +14,68 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import classNames from "classnames";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Relations } from "matrix-js-sdk/src/models/relations";
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { isContentActionable } from '../../../utils/EventUtils';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { aboveLeftOf, ContextMenu, useContextMenu } from "../../structures/ContextMenu";
+import ReactionPicker from "../emojipicker/ReactionPicker";
+import ReactionsRowButton from "./ReactionsRowButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
 
-@replaceableComponent("views.messages.ReactionsRow")
-export default class ReactionsRow extends React.PureComponent {
-    static propTypes = {
-        // The event we're displaying reactions for
-        mxEvent: PropTypes.object.isRequired,
-        // The Relations model from the JS SDK for reactions to `mxEvent`
-        reactions: PropTypes.object,
+const ReactButton = ({ mxEvent, reactions }: IProps) => {
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const buttonRect = button.current.getBoundingClientRect();
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
+            <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
+        </ContextMenu>;
     }
 
-    constructor(props) {
-        super(props);
+    return <React.Fragment>
+        <ContextMenuTooltipButton
+            className={classNames("mx_ReactionsRow_addReactionButton", {
+                mx_ReactionsRow_addReactionButton_active: menuDisplayed,
+            })}
+            title={_t("Add reaction")}
+            onClick={openMenu}
+            isExpanded={menuDisplayed}
+            inputRef={button}
+        />
+
+        { contextMenu }
+    </React.Fragment>;
+};
+
+interface IProps {
+    // The event we're displaying reactions for
+    mxEvent: MatrixEvent;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions?: Relations;
+}
+
+interface IState {
+    myReactions: MatrixEvent[];
+    showAll: boolean;
+}
+
+@replaceableComponent("views.messages.ReactionsRow")
+export default class ReactionsRow extends React.PureComponent<IProps, IState> {
+    static contextType = MatrixClientContext;
+
+    constructor(props, context) {
+        super(props, context);
 
         if (props.reactions) {
             props.reactions.on("Relations.add", this.onReactionsChange);
@@ -92,7 +131,7 @@ export default class ReactionsRow extends React.PureComponent {
         if (!reactions) {
             return null;
         }
-        const userId = MatrixClientPeg.get().getUserId();
+        const userId = this.context.getUserId();
         const myReactions = reactions.getAnnotationsBySender()[userId];
         if (!myReactions) {
             return null;
@@ -114,7 +153,6 @@ export default class ReactionsRow extends React.PureComponent {
             return null;
         }
 
-        const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
         let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
             const count = events.size;
             if (!count) {
@@ -151,13 +189,21 @@ export default class ReactionsRow extends React.PureComponent {
             </a>;
         }
 
+        const cli = this.context;
+
+        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 }
+            { showAllButton }
+            { addReactionButton }
         </div>;
     }
 }