diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss index 951b863e6a..38188974ac 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss @@ -42,5 +42,10 @@ limitations under the License. .mx_EventTile_line, .mx_EventTile_content { margin-right: 0px; } + + .mx_MessageActionBar .mx_AccessibleButton { + font-size: 10px; + padding: 0 8px; + } } diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 7ac0e95e81..b7ba2ef27d 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -30,9 +30,9 @@ limitations under the License. z-index: 1; > * { + white-space: nowrap; display: inline-block; position: relative; - width: 27px; border: 1px solid $message-action-bar-border-color; margin-left: -1px; @@ -55,6 +55,11 @@ limitations under the License. } } + +.mx_MessageActionBar_maskButton { + width: 27px; +} + .mx_MessageActionBar_maskButton::after { content: ''; position: absolute; diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js index fef9c362c6..5b00257e87 100644 --- a/src/components/views/messages/EditHistoryMessage.js +++ b/src/components/views/messages/EditHistoryMessage.js @@ -20,6 +20,8 @@ import * as HtmlUtils from '../../../HtmlUtils'; import {formatTime} from '../../../DateUtils'; import {MatrixEvent} from 'matrix-js-sdk'; import {pillifyLinks} from '../../../utils/pillify'; +import { _t } from '../../../languageHandler'; +import sdk from '../../../index'; export default class EditHistoryMessage extends React.PureComponent { static propTypes = { @@ -27,6 +29,9 @@ export default class EditHistoryMessage extends React.PureComponent { mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired, }; + _onRedactClick = async () => { + }; + componentDidMount() { pillifyLinks(this.refs.content.children, this.props.mxEvent); } @@ -35,6 +40,13 @@ export default class EditHistoryMessage extends React.PureComponent { pillifyLinks(this.refs.content.children, this.props.mxEvent); } + _renderActionBar() { + const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + return (
+ {_t("Remove")} +
); + } + render() { const {mxEvent} = this.props; const originalContent = mxEvent.getOriginalContent(); @@ -55,6 +67,7 @@ export default class EditHistoryMessage extends React.PureComponent {
{timestamp} { contentContainer } + { this._renderActionBar() }
; }