Tasks: adds colored radio buttons

available as widget, they are being used for priority in Task Edit
master
Andrew P Maney 5 years ago committed by Tom Hacohen
parent add95621af
commit 0436e9ccd0

@ -17,7 +17,6 @@ import InputLabel from '@material-ui/core/InputLabel';
import * as colors from '@material-ui/core/colors'; import * as colors from '@material-ui/core/colors';
import FormLabel from '@material-ui/core/FormLabel'; import FormLabel from '@material-ui/core/FormLabel';
import RadioGroup from '@material-ui/core/RadioGroup'; import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import IconDelete from '@material-ui/icons/Delete'; import IconDelete from '@material-ui/icons/Delete';
import IconCancel from '@material-ui/icons/Clear'; import IconCancel from '@material-ui/icons/Clear';
@ -42,6 +41,8 @@ import { TaskType, TaskStatusType, timezoneLoadFromName, TaskPriorityType } from
import { History } from 'history'; import { History } from 'history';
import ColoredRadio from '../../widgets/ColoredRadio';
interface PropsType { interface PropsType {
collections: EteSync.CollectionInfo[]; collections: EteSync.CollectionInfo[];
initialCollection?: string; initialCollection?: string;
@ -310,10 +311,10 @@ class TaskEdit extends React.PureComponent<PropsType> {
value={this.state.priority} value={this.state.priority}
onChange={(e) => this.handleChange('priority', Number(e.target.value))} onChange={(e) => this.handleChange('priority', Number(e.target.value))}
> >
<FormControlLabel value={TaskPriorityType.Undefined} control={<Radio />} label="None" /> <ColoredRadio value={TaskPriorityType.Undefined} label="None" color={colors.grey[600]} />
<FormControlLabel value={TaskPriorityType.Low} control={<Radio />} label="Low" /> <ColoredRadio value={TaskPriorityType.Low} label="Low" color={colors.blue[600]} />
<FormControlLabel value={TaskPriorityType.Medium} control={<Radio />} label="Medium" /> <ColoredRadio value={TaskPriorityType.Medium} label="Medium" color={colors.orange[600]} />
<FormControlLabel value={TaskPriorityType.High} control={<Radio />} label="High" /> <ColoredRadio value={TaskPriorityType.High} label="High" color={colors.red[600]} />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>

@ -0,0 +1,29 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Radio from '@material-ui/core/Radio';
import { Omit } from '@material-ui/types';
import FormControlLabel, { FormControlLabelProps } from '@material-ui/core/FormControlLabel';
interface Props {
color: string;
label: string;
}
const useStyles = makeStyles({
root: {
color: (props: Props) => props.color,
},
});
export default function ColoredRadio(props: Props & Omit<FormControlLabelProps, keyof Props | 'control'>) {
const { color, label, value, ...other } = props;
const { root } = useStyles(props);
return <FormControlLabel
className={root}
label={label}
control={<Radio color="default" className={root} value={value} />}
{...other}
/>;
}
Loading…
Cancel
Save