mirror of https://github.com/vector-im/riot-web
Switch DevicesPanel to use table (for screen readers)
parent
af55ac7b8c
commit
7edec291ac
|
@ -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,16 @@ 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
|
||||
}
|
||||
|
||||
.mx_DevicesPanel_header > div {
|
||||
display: table-cell;
|
||||
.mx_DevicesPanel_header th {
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
@ -50,12 +49,9 @@ limitations under the License.
|
|||
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 {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue