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

Device manager - selectable device tile wrapper (PSG-637) (#9153)

Browse source 
* add selectabledevicetile wrapper

* set pointer cursor

* line up own device icon with new checkboxes
This commit is contained in:
Kerry 2022-08-09 15:07:25 +02:00 • committed by GitHub
parent 5fbeb20df8
commit 5a9c2e530a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 255 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,6 @@ import { logger } from "matrix-js-sdk/src/logger";
import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import StyledCheckbox, { CheckboxStyle } from '../elements/StyledCheckbox';
import AccessibleButton from "../elements/AccessibleButton";
import Field from "../elements/Field";
import Modal from "../../../Modal";
@ -28,6 +27,7 @@ import SetupEncryptionDialog from '../dialogs/security/SetupEncryptionDialog';
import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDialog';
import LogoutDialog from '../dialogs/LogoutDialog';
import DeviceTile from './devices/DeviceTile';
import SelectableDeviceTile from './devices/SelectableDeviceTile';
interface IProps {
device: IMyDevice;
@ -133,14 +133,6 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
</AccessibleButton>;
}
const left = this.props.isOwnDevice ?
<div className="mx_DevicesPanel_deviceTrust">
<span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
</div> :
<div className="mx_DevicesPanel_checkbox">
<StyledCheckbox kind={CheckboxStyle.Outline} onChange={this.onDeviceToggled} checked={this.props.selected} />
</div>;
const buttons = this.state.renaming ?
<form className="mx_DevicesPanel_renameForm" onSubmit={this.onRenameSubmit}>
<Field
@ -162,12 +154,22 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
</AccessibleButton>
</React.Fragment>;
return (
<div className={"mx_DevicesPanel_device" + myDeviceClass}>
{ left }
if (this.props.isOwnDevice) {
return <div className={"mx_DevicesPanel_device" + myDeviceClass}>
<div className="mx_DevicesPanel_deviceTrust">
<span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
</div>
<DeviceTile device={this.props.device}>
{ buttons }
</DeviceTile>
</div>;
}
return (
<div className={"mx_DevicesPanel_device" + myDeviceClass}>
<SelectableDeviceTile device={this.props.device} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
{ buttons }
</SelectableDeviceTile>
</div>
);
}