diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index 7158ffc027..c132fa5a0f 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -34,6 +34,10 @@ limitations under the License. border-color: $reaction-row-button-selected-border-color; } + &.mx_AccessibleButton_disabled { + cursor: not-allowed; + } + .mx_ReactionsRowButton_content { max-width: 100px; overflow: hidden; diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js index 06421c02a2..b37a949e57 100644 --- a/src/components/views/messages/ReactionsRowButton.js +++ b/src/components/views/messages/ReactionsRowButton.js @@ -129,12 +129,13 @@ export default class ReactionsRowButton extends React.PureComponent { }, ); } - + const isPeeking = room.getMyMembership() !== "join"; const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); return <AccessibleButton className={classes} aria-label={label} onClick={this.onClick} + disabled={isPeeking} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} >