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

Merge pull request #6955 from andybalaam/table-for-devicespanel

Browse source 
Switch DevicesPanel to use table (for screen readers)
This commit is contained in:
Andy Balaam 2021-10-15 14:16:45 +01:00 • committed by GitHub
commit 9c753765d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

23
res/css/views/settings/_DevicesPanel.scss
View file

@ -15,7 +15,6 @@ limitations under the License.
*/ */
.mx_DevicesPanel { .mx_DevicesPanel {
display: table;
table-layout: fixed; table-layout: fixed;
// Normally the panel is 880px, however this can easily overflow the container. // Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy // TODO: Fix the table to not be squishy
@ -25,16 +24,17 @@ limitations under the License.
} }
.mx_DevicesPanel_header { .mx_DevicesPanel_header {
display: table-header-group;
font-weight: bold; font-weight: bold;
} }
.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons { .mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
height: 48px; // make this tall so the table doesn't move down when the delete button appears height: 48px; // make this tall so the table doesn't move down when the delete button appears
width: 20%;
} }
.mx_DevicesPanel_header > div { .mx_DevicesPanel_header th {
display: table-cell; padding: 0px;
text-align: left;
vertical-align: middle; vertical-align: middle;
} }
@ -46,16 +46,9 @@ limitations under the License.
width: 30%; width: 30%;
} }
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons { .mx_DevicesPanel_device td {
width: 20%; vertical-align: baseline;
} padding: 0px;
.mx_DevicesPanel_device {
display: table-row;
}
.mx_DevicesPanel_device > div {
display: table-cell;
} }
.mx_DevicesPanel_myDevice { .mx_DevicesPanel_myDevice {

26
src/components/views/settings/DevicesPanel.tsx
View file

@ -218,17 +218,21 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
const classes = classNames(this.props.className, "mx_DevicesPanel"); const classes = classNames(this.props.className, "mx_DevicesPanel");
return ( return (
<div className={classes}> <table className={classes}>
<div className="mx_DevicesPanel_header"> <thead className="mx_DevicesPanel_header">
<div className="mx_DevicesPanel_deviceId">{ _t("ID") }</div> <tr>
<div className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</div> <th className="mx_DevicesPanel_deviceId">{ _t("ID") }</th>
<div className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</div> <th className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</th>
<div className="mx_DevicesPanel_deviceButtons"> <th className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</th>
{ this.state.selectedDevices.length > 0 ? deleteButton : null } <th className="mx_DevicesPanel_deviceButtons">
</div> { this.state.selectedDevices.length > 0 ? deleteButton : null }
</div> </th>
{ devices.map(this.renderDevice) } </tr>
</div> </thead>
<tbody>
{ devices.map(this.renderDevice) }
</tbody>
</table>
); );
} }
} }

20
src/components/views/settings/DevicesPanelEntry.tsx
View file

@ -66,23 +66,23 @@ export default class DevicesPanelEntry extends React.Component<IProps> {
} }
return ( return (
<div className={"mx_DevicesPanel_device" + myDeviceClass}> <tr className={"mx_DevicesPanel_device" + myDeviceClass}>
<div className="mx_DevicesPanel_deviceId"> <td className="mx_DevicesPanel_deviceId">
{ device.device_id } { device.device_id }
</div> </td>
<div className="mx_DevicesPanel_deviceName"> <td className="mx_DevicesPanel_deviceName">
<EditableTextContainer initialValue={device.display_name} <EditableTextContainer initialValue={device.display_name}
onSubmit={this.onDisplayNameChanged} onSubmit={this.onDisplayNameChanged}
placeholder={device.device_id} placeholder={device.device_id}
/> />
</div> </td>
<div className="mx_DevicesPanel_lastSeen"> <td className="mx_DevicesPanel_lastSeen">
{ lastSeen } { lastSeen }
</div> </td>
<div className="mx_DevicesPanel_deviceButtons"> <td className="mx_DevicesPanel_deviceButtons">
<StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} /> <StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
</div> </td>
</div> </tr>
); );
} }
} }