Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Align correctly input fields in form

Browse Source 
[MAILPOET-2809]
This commit is contained in:
Pavel Dohnal
2020-04-27 15:03:21 +02:00
committed by Veljko V
parent 880d53d8f0
commit ea09f3de05
4 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts Normal file
View File

@@ -0,0 +1,12 @@
function convert(alignment: 'left' | 'center' | 'right'): string {
if (alignment === 'right') {
return '0 0 0 auto';
}
if (alignment === 'center') {
return '0 auto';
}
return 'auto 0';
}
export default convert;

8
assets/js/src/form_editor/blocks/custom_select/edit.jsx
View File

@@ -14,6 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx';
import formatLabel from '../label_formatter.jsx'; import formatLabel from '../label_formatter.jsx';
import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx'; import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
import mapCustomFieldFormData from '../map_custom_field_form_data.jsx'; import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
import convertAlignmentToMargin from '../convert_alignment_to_margin';
const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => { const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
const settings = useSelect( const settings = useSelect(
@@ -104,12 +105,7 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
if (settings.alignment !== undefined) { if (settings.alignment !== undefined) {
inputStyles.textAlign = settings.alignment; inputStyles.textAlign = settings.alignment;
if (inputStyles.textAlign === 'right') { inputStyles.margin = convertAlignmentToMargin(inputStyles.textAlign);
inputStyles.margin = '0 0 0 auto';
}
if (inputStyles.textAlign === 'center') {
inputStyles.margin = '0 auto';
}
} }
return ( return (

6
assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
View File

@@ -15,6 +15,7 @@ import CustomFieldSettings from '../custom_text/custom_field_settings.jsx';
import formatLabel from '../label_formatter.jsx'; import formatLabel from '../label_formatter.jsx';
import mapCustomFieldFormData from '../map_custom_field_form_data.jsx'; import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx'; import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
import convertAlignmentToMargin from '../convert_alignment_to_margin';
const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => { const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
const settings = useSelect( const settings = useSelect(
@@ -134,6 +135,11 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
inputStyles.padding = settings.inputPadding; inputStyles.padding = settings.inputPadding;
} }
if (settings.alignment !== undefined) {
inputStyles.textAlign = settings.alignment;
inputStyles.margin = convertAlignmentToMargin(inputStyles.textAlign);
}
inputStyles.resize = 'none'; inputStyles.resize = 'none';
const textarea = useRef(null); const textarea = useRef(null);

10
assets/js/src/form_editor/blocks/text_input_edit.jsx
View File

@@ -4,6 +4,7 @@ import { useSelect } from '@wordpress/data';
import ParagraphEdit from './paragraph_edit.jsx'; import ParagraphEdit from './paragraph_edit.jsx';
import formatLabel from './label_formatter.jsx'; import formatLabel from './label_formatter.jsx';
import { inputStylesPropTypes } from './input_styles_settings.jsx'; import { inputStylesPropTypes } from './input_styles_settings.jsx';
import convertAlignmentToMargin from './convert_alignment_to_margin';
const TextInputEdit = ({ const TextInputEdit = ({
label, label,
@@ -35,6 +36,15 @@ const TextInputEdit = ({
inputStyles.padding = settings.inputPadding; inputStyles.padding = settings.inputPadding;
} }
if (settings.inputPadding !== undefined) {
inputStyles.padding = settings.inputPadding;
}
if (settings.alignment !== undefined) {
inputStyles.textAlign = settings.alignment;
inputStyles.margin = convertAlignmentToMargin(inputStyles.textAlign);
}
if (styles.fullWidth) { if (styles.fullWidth) {
inputStyles.width = '100%'; inputStyles.width = '100%';
} }