imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify ReplyPreview implementation (#8516)

Browse source 
- Use AccessibleButton for cancel button, following other cases on UI
- Use flexbox for RTL layout to remove clear: both

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-06 18:06:32 +00:00 • committed by GitHub
parent 4d5a063cda
commit cce0833c21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/views/rooms/ReplyPreview.tsx
View file

@ -22,6 +22,7 @@ import { _t } from '../../../languageHandler';
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import ReplyTile from './ReplyTile';
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
import AccessibleButton from "../elements/AccessibleButton";
function cancelQuoting(context: TimelineRenderingType) {
dis.dispatch({
@ -44,25 +45,17 @@ export default class ReplyPreview extends React.Component<IProps> {
return <div className="mx_ReplyPreview">
<div className="mx_ReplyPreview_section">
<div className="mx_ReplyPreview_header mx_ReplyPreview_title">
{ _t('Replying') }
</div>
<div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
<img
className="mx_filterFlipColor"
src={require("../../../../res/img/cancel.svg").default}
width="18"
height="18"
<div className="mx_ReplyPreview_header">
<span>{ _t('Replying') }</span>
<AccessibleButton
className="mx_ReplyPreview_header_cancel"
onClick={() => cancelQuoting(this.context.timelineRenderingType)}
/>
</div>
<div className="mx_ReplyPreview_clear" />
<div className="mx_ReplyPreview_tile">
<ReplyTile
mxEvent={this.props.replyToEvent}
permalinkCreator={this.props.permalinkCreator}
/>
</div>
<ReplyTile
mxEvent={this.props.replyToEvent}
permalinkCreator={this.props.permalinkCreator}
/>
</div>
</div>;
}