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

Add more checkbox styles (#7058)

Browse source 
Add a "kind" param for StyledCheckbox, allowing designers to choose different styles of checkbox as needed.  In addition to the preexisting default kind (now called Solid), there's an Outline kind with a green checkmark and a transparent fill.  This is used in the device trust view, since the default checkbox style looks too much like the green "verified" shield and it's awkward to have those next to each other.
This commit is contained in:
Faye Duxovni 2021-10-29 21:57:32 -04:00 • committed by GitHub
parent d88b8efd19
commit 71244f3b3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,6 +21,7 @@ import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { formatDate } from '../../../DateUtils';
import StyledCheckbox from '../elements/StyledCheckbox';
import { CheckboxStyle } from '../elements/StyledCheckbox';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import AccessibleButton from "../elements/AccessibleButton";
import Field from "../elements/Field";
@ -153,7 +154,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
<span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
</div> :
<div className="mx_DevicesPanel_checkbox">
<StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
<StyledCheckbox kind={CheckboxStyle.Outline} onChange={this.onDeviceToggled} checked={this.props.selected} />
</div>;
const buttons = this.state.renaming ?