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}
; }