diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 7bd5fa5cf9..fc73d16d8f 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -55,8 +55,8 @@ limitations under the License.
position: absolute;
top: 0;
left: 0;
- bottom: 0;
- right: 0;
+ height: 100%;
+ width: 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: $primary-fg-color;
@@ -64,6 +64,10 @@ limitations under the License.
}
}
+.mx_MessageActionBar_replyButton::after {
+ mask-image: url('$(res)/img/reply.svg');
+}
+
.mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/icon_context.svg');
}
diff --git a/res/img/reply.svg b/res/img/reply.svg
new file mode 100644
index 0000000000..8cbbad3550
--- /dev/null
+++ b/res/img/reply.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 504729f629..1191b6d66e 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -201,14 +201,6 @@ module.exports = React.createClass({
this.closeMenu();
},
- onReplyClick: function() {
- dis.dispatch({
- action: 'reply_to_event',
- event: this.props.mxEvent,
- });
- this.closeMenu();
- },
-
onCollapseReplyThreadClick: function() {
this.props.collapseReplyThread();
this.closeMenu();
@@ -226,7 +218,6 @@ module.exports = React.createClass({
let unhidePreviewButton;
let externalURLButton;
let quoteButton;
- let replyButton;
let collapseReplyThread;
// status is SENT before remote-echo, null after
@@ -265,12 +256,6 @@ module.exports = React.createClass({
);
- replyButton = (
-
- { _t('Reply') }
-
- );
-
if (this.state.canPin) {
pinButton = (
@@ -368,7 +353,6 @@ module.exports = React.createClass({
{ unhidePreviewButton }
{ permalinkButton }
{ quoteButton }
- { replyButton }
{ externalURLButton }
{ collapseReplyThread }
{ e2eInfo }
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 3543c41ace..fa020612c4 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -16,8 +16,11 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
+import {EventStatus} from 'matrix-js-sdk';
+
import { _t } from '../../../languageHandler';
import sdk from '../../../index';
+import dis from '../../../dispatcher';
import Modal from '../../../Modal';
import { createMenu } from '../../structures/ContextualMenu';
@@ -45,7 +48,14 @@ export default class MessageActionBar extends React.PureComponent {
);
}
- onOptionsClicked = (ev) => {
+ onReplyClick = (ev) => {
+ dis.dispatch({
+ action: 'reply_to_event',
+ event: this.props.mxEvent,
+ });
+ }
+
+ onOptionsClick = (ev) => {
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
const buttonRect = ev.target.getBoundingClientRect();
@@ -78,10 +88,33 @@ export default class MessageActionBar extends React.PureComponent {
}
render() {
+ const { mxEvent } = this.props;
+ const { status: eventStatus } = mxEvent;
+
+ // status is SENT before remote-echo, null after
+ const isSent = !eventStatus || eventStatus === EventStatus.SENT;
+
+ let replyButton;
+
+ if (isSent && mxEvent.getType() === 'm.room.message') {
+ const content = mxEvent.getContent();
+ if (
+ content.msgtype &&
+ content.msgtype !== 'm.bad.encrypted' &&
+ content.hasOwnProperty('body')
+ ) {
+ replyButton =
;
+ }
+ }
+
return
+ {replyButton}
;
}