PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats 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 {
display: table;
table-layout: fixed;
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
@ -25,16 +24,17 @@ limitations under the License.
}
.mx_DevicesPanel_header {
display: table-header-group;
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
width: 20%;
}
.mx_DevicesPanel_header > div {
display: table-cell;
.mx_DevicesPanel_header th {
padding: 0px;
text-align: left;
vertical-align: middle;
}
@ -46,16 +46,9 @@ limitations under the License.
width: 30%;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
width: 20%;
}
.mx_DevicesPanel_device {
display: table-row;
}
.mx_DevicesPanel_device > div {
display: table-cell;
.mx_DevicesPanel_device td {
vertical-align: baseline;
padding: 0px;
}
.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");
return (
<div className={classes}>
<div className="mx_DevicesPanel_header">
<div className="mx_DevicesPanel_deviceId">{ _t("ID") }</div>
<div className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</div>
<div className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</div>
<div className="mx_DevicesPanel_deviceButtons">
{ this.state.selectedDevices.length > 0 ? deleteButton : null }
</div>
</div>
{ devices.map(this.renderDevice) }
</div>
<table className={classes}>
<thead className="mx_DevicesPanel_header">
<tr>
<th className="mx_DevicesPanel_deviceId">{ _t("ID") }</th>
<th className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</th>
<th className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</th>
<th className="mx_DevicesPanel_deviceButtons">
{ this.state.selectedDevices.length > 0 ? deleteButton : null }
</th>
</tr>
</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 (
<div className={"mx_DevicesPanel_device" + myDeviceClass}>
<div className="mx_DevicesPanel_deviceId">
<tr className={"mx_DevicesPanel_device" + myDeviceClass}>
<td className="mx_DevicesPanel_deviceId">
{ device.device_id }
</div>
<div className="mx_DevicesPanel_deviceName">
</td>
<td className="mx_DevicesPanel_deviceName">
<EditableTextContainer initialValue={device.display_name}
onSubmit={this.onDisplayNameChanged}
placeholder={device.device_id}
/>
</div>
<div className="mx_DevicesPanel_lastSeen">
</td>
<td className="mx_DevicesPanel_lastSeen">
{ lastSeen }
</div>
<div className="mx_DevicesPanel_deviceButtons">
</td>
<td className="mx_DevicesPanel_deviceButtons">
<StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
</div>
</div>
</td>
</tr>
);
}
}