diff --git a/client/src/components/Board/Board.jsx b/client/src/components/Board/Board.jsx index 481eaedf..b3b8acd3 100755 --- a/client/src/components/Board/Board.jsx +++ b/client/src/components/Board/Board.jsx @@ -11,6 +11,7 @@ import ListAdd from './ListAdd'; import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg'; import styles from './Board.module.scss'; +import globalStyles from '../../styles.module.scss'; const parseDndId = (dndId) => dndId.split(':')[1]; @@ -31,11 +32,14 @@ const Board = React.memo( }, []); const handleDragStart = useCallback(() => { + document.body.classList.add(globalStyles.dragging); closePopup(); }, []); const handleDragEnd = useCallback( ({ draggableId, type, source, destination }) => { + document.body.classList.remove(globalStyles.dragging); + if ( !destination || (source.droppableId === destination.droppableId && source.index === destination.index) diff --git a/client/src/components/Boards/Boards.jsx b/client/src/components/Boards/Boards.jsx index fad20475..b2453856 100755 --- a/client/src/components/Boards/Boards.jsx +++ b/client/src/components/Boards/Boards.jsx @@ -13,6 +13,7 @@ import AddStep from './AddStep'; import EditStep from './EditStep'; import styles from './Boards.module.scss'; +import globalStyles from '../../styles.module.scss'; const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => { const tabsWrapper = useRef(null); @@ -24,11 +25,14 @@ const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMo }, []); const handleDragStart = useCallback(() => { + document.body.classList.add(globalStyles.dragging); closePopup(); }, []); const handleDragEnd = useCallback( ({ draggableId, source, destination }) => { + document.body.classList.remove(globalStyles.dragging); + if (!destination || source.index === destination.index) { return; } diff --git a/client/src/components/CardModal/Tasks/Tasks.jsx b/client/src/components/CardModal/Tasks/Tasks.jsx index 1f947e07..0d6ef5f3 100755 --- a/client/src/components/CardModal/Tasks/Tasks.jsx +++ b/client/src/components/CardModal/Tasks/Tasks.jsx @@ -10,16 +10,20 @@ import Item from './Item'; import Add from './Add'; import styles from './Tasks.module.scss'; +import globalStyles from '../../../styles.module.scss'; const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onMove, onDelete }) => { const [t] = useTranslation(); const handleDragStart = useCallback(() => { + document.body.classList.add(globalStyles.dragging); closePopup(); }, []); const handleDragEnd = useCallback( ({ draggableId, source, destination }) => { + document.body.classList.remove(globalStyles.dragging); + if (!destination || source.index === destination.index) { return; } diff --git a/client/src/components/LabelsStep/LabelsStep.jsx b/client/src/components/LabelsStep/LabelsStep.jsx index aeabc4d6..3d09fa3f 100755 --- a/client/src/components/LabelsStep/LabelsStep.jsx +++ b/client/src/components/LabelsStep/LabelsStep.jsx @@ -13,6 +13,7 @@ import EditStep from './EditStep'; import Item from './Item'; import styles from './LabelsStep.module.scss'; +import globalStyles from '../../styles.module.scss'; const StepTypes = { ADD: 'ADD', @@ -77,8 +78,14 @@ const LabelsStep = React.memo( [onDeselect], ); + const handleDragStart = useCallback(() => { + document.body.classList.add(globalStyles.dragging); + }, []); + const handleDragEnd = useCallback( ({ draggableId, source, destination }) => { + document.body.classList.remove(globalStyles.dragging); + if (!destination || source.index === destination.index) { return; } @@ -159,7 +166,7 @@ const LabelsStep = React.memo( onChange={handleSearchChange} /> {filteredItems.length > 0 && ( - + {({ innerRef, droppableProps, placeholder }) => (
* { + pointer-events: none; + } + /* Backgrounds */ .backgroundBerryRed {