Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 20:59:44 +02:00
Code Issues Releases Activity

fix: Disable pointer events when dragging

Browse source
This commit is contained in:
Maksim Eltyshev 2024-11-17 23:45:29 +01:00
parent 1a70b2b7e6
commit 5a3c3bb39b
5 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Board/Board.jsx
View file

@ -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)

4
client/src/components/Boards/Boards.jsx
View file

@ -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;
}

4
client/src/components/CardModal/Tasks/Tasks.jsx
View file

@ -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;
}

9
client/src/components/LabelsStep/LabelsStep.jsx
View file

@ -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 && (
<DragDropContext onDragEnd={handleDragEnd}>
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Droppable droppableId="labels" type={DroppableTypes.LABEL}>
{({ innerRef, droppableProps, placeholder }) => (
<div

4
client/src/styles.module.scss
View file

@ -142,6 +142,10 @@
}
:global(#app) {
&.dragging>* {
pointer-events: none;
}
/* Backgrounds */
.backgroundBerryRed {