Rework slightly the true/false and yes/no fields to make clearer they are switches

This commit is contained in:
Florian Rival
2022-02-10 16:44:08 +01:00
parent 7258da9927
commit ab619bdd2a
2 changed files with 36 additions and 40 deletions

View File

@@ -2,7 +2,6 @@
import { Trans } from '@lingui/macro';
import { type ParameterInlineRendererProps } from './ParameterInlineRenderer.flow';
import React, { Component } from 'react';
import RaisedButton from '../../UI/RaisedButton';
import { Line, Column } from '../../UI/Grid';
import {
type ParameterFieldProps,
@@ -12,11 +11,10 @@ import { focusButton } from '../../UI/Button';
import Text from '../../UI/Text';
import FormHelperText from '@material-ui/core/FormHelperText';
import { MarkdownText } from '../../UI/MarkdownText';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Button from '@material-ui/core/Button';
const styles = {
button: {
margin: 5,
},
description: {
marginRight: 5,
},
@@ -26,7 +24,7 @@ export default class TrueFalseField extends Component<
ParameterFieldProps,
void
> {
_trueButton = React.createRef<RaisedButton>();
_trueButton = React.createRef<Button>();
focus() {
focusButton(this._trueButton);
@@ -44,27 +42,27 @@ export default class TrueFalseField extends Component<
return (
<Column noMargin>
<Line>
<Line alignItems="center">
<Text style={styles.description} displayInlineAsSpan>
{description}
</Text>
<Column noMargin>
<RaisedButton
style={styles.button}
label={<Trans>True</Trans>}
primary={effectiveValue === 'True'}
<ButtonGroup>
<Button
variant={effectiveValue === 'True' ? 'contained' : 'outlined'}
color={effectiveValue === 'True' ? 'secondary' : 'default'}
onClick={() => this.props.onChange('True')}
ref={this._trueButton}
/>
</Column>
<Column noMargin>
<RaisedButton
style={styles.button}
label={<Trans>False</Trans>}
primary={effectiveValue !== 'True'}
>
<Trans>True</Trans>
</Button>
<Button
variant={effectiveValue !== 'True' ? 'contained' : 'outlined'}
color={effectiveValue !== 'True' ? 'secondary' : 'default'}
onClick={() => this.props.onChange('False')}
/>
</Column>
>
<Trans>False</Trans>
</Button>
</ButtonGroup>
</Line>
{longDescription ? (
<FormHelperText variant="filled" margin="dense">

View File

@@ -2,7 +2,6 @@
import { Trans } from '@lingui/macro';
import { type ParameterInlineRendererProps } from './ParameterInlineRenderer.flow';
import React, { Component } from 'react';
import RaisedButton from '../../UI/RaisedButton';
import { Line, Column } from '../../UI/Grid';
import {
type ParameterFieldProps,
@@ -12,18 +11,17 @@ import { focusButton } from '../../UI/Button';
import Text from '../../UI/Text';
import FormHelperText from '@material-ui/core/FormHelperText';
import { MarkdownText } from '../../UI/MarkdownText';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Button from '@material-ui/core/Button';
const styles = {
button: {
margin: 5,
},
description: {
marginRight: 5,
},
};
export default class YesNoField extends Component<ParameterFieldProps, void> {
_yesButton = React.createRef<RaisedButton>();
_yesButton = React.createRef<Button>();
focus() {
focusButton(this._yesButton);
@@ -41,27 +39,27 @@ export default class YesNoField extends Component<ParameterFieldProps, void> {
return (
<Column noMargin>
<Line>
<Line alignItems="center">
<Text style={styles.description} displayInlineAsSpan>
{description}
</Text>
<Column noMargin>
<RaisedButton
style={styles.button}
label={<Trans>Yes</Trans>}
primary={effectiveValue === 'yes'}
<ButtonGroup>
<Button
variant={effectiveValue === 'yes' ? 'contained' : 'outlined'}
color={effectiveValue === 'yes' ? 'secondary' : 'default'}
onClick={() => this.props.onChange('yes')}
ref={this._yesButton}
/>
</Column>
<Column noMargin>
<RaisedButton
style={styles.button}
label={<Trans>No</Trans>}
primary={effectiveValue !== 'yes'}
>
<Trans>Yes</Trans>
</Button>
<Button
variant={effectiveValue !== 'yes' ? 'contained' : 'outlined'}
color={effectiveValue !== 'yes' ? 'secondary' : 'default'}
onClick={() => this.props.onChange('no')}
/>
</Column>
>
<Trans>No</Trans>
</Button>
</ButtonGroup>
</Line>
{longDescription ? (
<FormHelperText variant="filled" margin="dense">