Checkbox text alignment and override checkboxes reorganized

This commit is contained in:
Carlos 2019-03-13 13:09:37 +01:00
parent bdacf92917
commit 83267a7e28
4 changed files with 36 additions and 13 deletions

View file

@ -609,21 +609,20 @@ export default class CUD extends Component {
const addOverridable = (id, label) => {
if(this.state.sendConfiguration[id + '_overridable'] == 1){
sendSettings.push(<CheckBox key={id + '_overriden'} id={id + '_overriden'} label={label} text={t('override')}/>);
if (this.getFormValue(id + '_overriden')) {
sendSettings.push(<InputField key={id + '_override'} id={id + '_override'}/>);
sendSettings.push(<InputField label={t(label)} key={id + '_override'} id={id + '_override'}/>);
} else {
sendSettings.push(
<StaticField key={id + '_original'} id={id + '_original'} className={styles.formDisabled}>
<StaticField key={id + '_original'} label={t(label)} id={id + '_original'} className={styles.formDisabled}>
{this.state.sendConfiguration[id]}
</StaticField>
);
}
sendSettings.push(<CheckBox key={id + '_overriden'} id={id + '_overriden'} text={t('override')} overrideFormat={true}/>);
}
else{
sendSettings.push(<AlignedRow label={t(id)}></AlignedRow>);
sendSettings.push(
<StaticField key={id + '_original'} id={id + '_original'} className={styles.formDisabled}>
<StaticField key={id + '_original'} label={t(label)} id={id + '_original'} className={styles.formDisabled}>
{this.state.sendConfiguration[id]}
</StaticField>
);

View file

@ -339,7 +339,8 @@ class CheckBox extends Component {
text: PropTypes.string.isRequired,
label: PropTypes.string,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
format: PropTypes.string
format: PropTypes.string,
overrideFormat: PropTypes.bool
}
render() {
@ -347,15 +348,28 @@ class CheckBox extends Component {
const owner = this.getFormStateOwner();
const id = this.props.id;
const htmlId = 'form_' + id;
const overrideFormat = this.props.overrideFormat;
const className = owner.addFormValidationClass('form-check-input', id);
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
if(overrideFormat){
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
<div className={styles.overrideCheckboxForm}>
<input className={className} type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
<label className={styles.checkboxText} htmlFor={htmlId}>{props.text}</label>
</div>
);
}
else{
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
<div className="form-group form-check my-2">
<input className={className} type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
<label className="form-check-label" htmlFor={htmlId}>{props.text}</label>
<label className={styles.checkboxText} htmlFor={htmlId}>{props.text}</label>
</div>
);
);
}
}
}

View file

@ -124,6 +124,16 @@
text-align: right;
}
.checkboxText{
padding-top: 3px;
}
.overrideCheckboxForm{
position: relative;
margin-top: -15px;
margin-bottom: 30px;
margin-left: 20px;
}
.dropZone{
padding-top: 20px;
padding-bottom: 20px;

View file

@ -231,13 +231,13 @@ export default class CUD extends Component {
<Fieldset label={t('emailHeader')}>
<InputField id="from_email" label={t('defaultFromEmail')}/>
<CheckBox id="from_email_overridable" text={t('overridable')}/>
<CheckBox id="from_email_overridable" text={t('overridable')} overrideFormat={true}/>
<InputField id="from_name" label={t('defaultFromName')}/>
<CheckBox id="from_name_overridable" text={t('overridable')}/>
<CheckBox id="from_name_overridable" text={t('overridable')} overrideFormat={true}/>
<InputField id="reply_to" label={t('defaultReplytoEmail')}/>
<CheckBox id="reply_to_overridable" text={t('overridable')}/>
<CheckBox id="reply_to_overridable" text={t('overridable')} overrideFormat={true}/>
<InputField id="subject" label={t('subject')}/>
<CheckBox id="subject_overridable" text={t('overridable')}/>
<CheckBox id="subject_overridable" text={t('overridable')} overrideFormat={true}/>
<InputField id="x_mailer" label={t('xMailer')}/>
</Fieldset>