add redact button

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

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;

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 (<div className="mx_MessageActionBar">
+            <AccessibleButton onClick={this._onRedactClick} disabled={!this.state.canRedact}>{_t("Remove")}</AccessibleButton>
+        </div>);
+    }
+
     render() {
         const {mxEvent} = this.props;
         const originalContent = mxEvent.getOriginalContent();
@@ -55,6 +67,7 @@ export default class EditHistoryMessage extends React.PureComponent {
             <div className="mx_EventTile_line">
                 <span className="mx_MessageTimestamp">{timestamp}</span>
                 { contentContainer }
+                { this._renderActionBar() }
             </div>
         </li>;
     }