diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss index 244439bf74..e05065eb02 100644 --- a/res/css/views/messages/_ReactionsRow.scss +++ b/res/css/views/messages/_ReactionsRow.scss @@ -20,7 +20,8 @@ limitations under the License. .mx_ReactionsRow_addReactionButton { position: relative; - display: none; // show on hover of the .mx_EventTile + display: inline-block; + visibility: hidden; // show on hover of the .mx_EventTile width: 24px; height: 24px; vertical-align: middle; @@ -39,7 +40,7 @@ limitations under the License. } &.mx_ReactionsRow_addReactionButton_active { - display: inline-block; // keep showing whilst the context menu is shown + visibility: visible; // keep showing whilst the context menu is shown } &:hover, &.mx_ReactionsRow_addReactionButton_active { @@ -51,7 +52,7 @@ limitations under the License. } .mx_EventTile:hover .mx_ReactionsRow_addReactionButton { - display: inline-block; + visibility: visible; } .mx_ReactionsRow_showAll { diff --git a/src/components/views/messages/ReactionsRow.tsx b/src/components/views/messages/ReactionsRow.tsx index e1fcbe5364..8809302088 100644 --- a/src/components/views/messages/ReactionsRow.tsx +++ b/src/components/views/messages/ReactionsRow.tsx @@ -50,6 +50,10 @@ const ReactButton = ({ mxEvent, reactions }: IProps) => { })} title={_t("Add reaction")} onClick={openMenu} + onContextMenu={e => { + e.preventDefault(); + openMenu(); + }} isExpanded={menuDisplayed} inputRef={button} /> @@ -174,6 +178,8 @@ export default class ReactionsRow extends React.PureComponent { />; }).filter(item => !!item); + if (!items.length) return null; + // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items. // The "+ 1" ensure that the "show all" reveals something that takes up // more space than the button itself.