public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Checkbox text alignment and override checkboxes reorganized

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

9
client/src/campaigns/CUD.js
View file

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

22
client/src/lib/form.js
View file

@ -339,7 +339,8 @@ class CheckBox extends Component {
text: PropTypes.string.isRequired, text: PropTypes.string.isRequired,
label: PropTypes.string, label: PropTypes.string,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
format: PropTypes.string format: PropTypes.string,
overrideFormat: PropTypes.bool
} }
render() { render() {
@ -347,15 +348,28 @@ class CheckBox extends Component {
const owner = this.getFormStateOwner(); const owner = this.getFormStateOwner();
const id = this.props.id; const id = this.props.id;
const htmlId = 'form_' + id; const htmlId = 'form_' + id;
const overrideFormat = this.props.overrideFormat;
const className = owner.addFormValidationClass('form-check-input', id); 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"> <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))}/> <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> </div>
); );
}
} }
} }

10
client/src/lib/styles.scss
View file

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

8
client/src/send-configurations/CUD.js
View file

@ -231,13 +231,13 @@ export default class CUD extends Component {
<Fieldset label={t('emailHeader')}> <Fieldset label={t('emailHeader')}>
<InputField id="from_email" label={t('defaultFromEmail')}/> <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')}/> <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')}/> <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')}/> <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')}/> <InputField id="x_mailer" label={t('xMailer')}/>
</Fieldset> </Fieldset>