OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Simplify ReplyPreview implementation (#8516) 

- 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>
pull/28217/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
res/css/views/rooms/_ReplyPreview.scss
View File

@ -25,30 +25,31 @@ limitations under the License.
.mx_ReplyPreview_section { .mx_ReplyPreview_section {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
display: flex;
flex-flow: column;
row-gap: $spacing-8;
padding: $spacing-8 $spacing-8 0 $spacing-8;
.mx_ReplyPreview_header { .mx_ReplyPreview_header {
margin: 8px; display: flex;
justify-content: space-between;
column-gap: 8px;
color: $primary-content; color: $primary-content;
font-weight: 400; font-weight: 400;
opacity: 0.4; opacity: 0.4;
}
.mx_ReplyPreview_tile { .mx_ReplyPreview_header_cancel {
margin: 0 8px; background-color: $primary-content;
} mask: url('$(res)/img/cancel.svg');
mask-repeat: no-repeat;
.mx_ReplyPreview_title { mask-position: center;
float: left; mask-size: 18px;
} width: 18px;
height: 18px;
.mx_ReplyPreview_cancel { min-width: 18px;
float: right; min-height: 18px;
cursor: pointer; }
display: flex;
}
.mx_ReplyPreview_clear {
clear: both;
} }
} }
} }

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

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