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

Correct tab order in room preview dialog (#7302)

Browse source 
* tab order

* lint fixes

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test RoomPreviewBar

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add copyright header

Signed-off-by: Kerry Archibald <kerrya@element.io>

* Update src/components/views/rooms/RoomPreviewBar.tsx

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* fix tabs/spaces lint for reformatted actions

Signed-off-by: Kerry Archibald <kerrya@element.io>

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Kerry 2021-12-09 11:48:58 +01:00 • committed by GitHub
parent 0c850b2f13
commit d7a6e3ec65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 753 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/views/rooms/RoomPreviewBar.tsx
View file

@ -593,11 +593,26 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
);
}
const isPanel = this.props.canPreview;
const classes = classNames("mx_RoomPreviewBar", "dark-panel", `mx_RoomPreviewBar_${messageCase}`, {
"mx_RoomPreviewBar_panel": this.props.canPreview,
"mx_RoomPreviewBar_dialog": !this.props.canPreview,
"mx_RoomPreviewBar_panel": isPanel,
"mx_RoomPreviewBar_dialog": !isPanel,
});
// ensure correct tab order for both views
const actions = isPanel
? <>
{ secondaryButton }
{ extraComponents }
{ primaryButton }
</>
: <>
{ primaryButton }
{ extraComponents }
{ secondaryButton }
</>;
return (
<div className={classes}>
<div className="mx_RoomPreviewBar_message">
@ -606,9 +621,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
</div>
{ reasonElement }
<div className="mx_RoomPreviewBar_actions">
{ secondaryButton }
{ extraComponents }
{ primaryButton }
{ actions }
</div>
<div className="mx_RoomPreviewBar_footer">
{ footer }