- updated form builder styles;
This commit is contained in:
@@ -106,12 +106,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.formBuilder__elementNew {
|
.formBuilder__elementNew.formBuilder__elementNew {
|
||||||
border: 1px solid var(--button-secondary-borderColor);
|
border: 1px solid var(--button-secondary-borderColor);
|
||||||
background-color: var(--button-secondary-borderColor);
|
background-color: var(--button-secondary-borderColor);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
color: white;
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formBuilder__aside {
|
.formBuilder__aside {
|
||||||
|
|||||||
@@ -10,10 +10,13 @@ const BuilderDropzone = () => {
|
|||||||
|
|
||||||
const [, drop] = useDrop({
|
const [, drop] = useDrop({
|
||||||
accept: ItemTypes.FIELD,
|
accept: ItemTypes.FIELD,
|
||||||
|
drop(item, monitor) {
|
||||||
|
return item;
|
||||||
|
},
|
||||||
hover(item, monitor) {
|
hover(item, monitor) {
|
||||||
storeSet.main.moveElement(-1, 0, item);
|
storeSet.main.moveElement(-1, 0, item);
|
||||||
item.index = 0;
|
item.index = 0;
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
drop(dropzoneRef);
|
drop(dropzoneRef);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import React, { useRef } from 'react'
|
import React, { useRef } from 'react'
|
||||||
import { useDrag, useDrop } from 'react-dnd'
|
import { useDrag, useDrop } from 'react-dnd'
|
||||||
import { ItemTypes } from '../ItemTypes';
|
import { ItemTypes } from '../ItemTypes';
|
||||||
|
import { __ } from '@wordpress/i18n';
|
||||||
|
|
||||||
// store
|
// store
|
||||||
import { storeSet, useStore } from '../../../../store';
|
import { storeSet, useStore } from '../../../../store';
|
||||||
@@ -98,7 +99,9 @@ const BuilderElement = ({ id, name, label, index }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
draggingElementId === id
|
draggingElementId === id
|
||||||
? <div ref={ref} className="formBuilder__elementNew"></div>
|
? <div ref={ref} className="formBuilder__elementNew">
|
||||||
|
{__('lascia qui', 'gepafin')}
|
||||||
|
</div>
|
||||||
: <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
|
: <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
|
||||||
<div className="meta">
|
<div className="meta">
|
||||||
<Tag value={name} severity="info"/>
|
<Tag value={name} severity="info"/>
|
||||||
|
|||||||
@@ -27,6 +27,7 @@ export const actionsBeta = (set, get, api) => ({
|
|||||||
},
|
},
|
||||||
moveElement: (dragIndex, hoverIndex, item) => {
|
moveElement: (dragIndex, hoverIndex, item) => {
|
||||||
const prevFields = get.formElements();
|
const prevFields = get.formElements();
|
||||||
|
|
||||||
if (dragIndex === -1) {
|
if (dragIndex === -1) {
|
||||||
const configs = get.elementItems();
|
const configs = get.elementItems();
|
||||||
const itemCfg = head(configs.filter(o => o.id === item.dbId));
|
const itemCfg = head(configs.filter(o => o.id === item.dbId));
|
||||||
|
|||||||
Reference in New Issue
Block a user