From 941b77503465e4ba19d67d747441456a30f19894 Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Wed, 22 Oct 2025 14:23:15 +0500 Subject: [PATCH] Enhance Modal and Popup components with drag-and-drop functionality for mobile responsiveness. Implement drag handling in ModalContainer and PopupContainer, and adjust layout in ModalWrapper and PopupWrapper for better user experience. Update Tooltip and ActionsPopover for improved positioning and visibility. Clean up unused code and comments in HomePage and popupStore. --- client/src/components/ModalContainer.tsx | 38 +++++-- client/src/components/ModalWrapper.tsx | 14 ++- client/src/components/PopupContainer.tsx | 18 ++-- client/src/components/PopupWrapper.tsx | 2 +- client/src/components/indicators/Warning.tsx | 2 +- .../src/components/modals/SettingsModal.tsx | 7 +- client/src/components/popups/ChatPopup.tsx | 6 +- .../components/popups/ParticipantsPopup.tsx | 30 ++---- client/src/components/ui/ActionsPopover.tsx | 79 ++++---------- client/src/components/ui/Avatar.tsx | 6 +- client/src/components/ui/ControlsPopover.tsx | 55 +++++----- client/src/components/ui/PopoverWrapper.tsx | 49 ++++++++- client/src/components/ui/Tooltip.tsx | 100 +++++++++++++----- client/src/pages/HomePage.tsx | 31 +----- client/src/store/popupStore.ts | 4 - 15 files changed, 242 insertions(+), 199 deletions(-) diff --git a/client/src/components/ModalContainer.tsx b/client/src/components/ModalContainer.tsx index 1d52d3e..f0aed15 100644 --- a/client/src/components/ModalContainer.tsx +++ b/client/src/components/ModalContainer.tsx @@ -2,14 +2,17 @@ import { useEffect, useRef } from "react"; import useModalStore from "../store/modalStore"; import clsx from "clsx"; -import { AnimatePresence, motion } from "motion/react"; +import { AnimatePresence, motion, type PanInfo } from "motion/react"; function ModalContainer() { const { modal, setModal, position } = useModalStore(); + const divRef = useRef(null); const backdropRef = useRef(null); const modalRef = useRef(null); + const isMobile = innerWidth < 640; + function handleResize() { if (!modalRef.current) return; @@ -25,6 +28,16 @@ function ModalContainer() { setModal(null); } + const handleDragEnd = ( + _event: MouseEvent | TouchEvent | PointerEvent, + info: PanInfo + ) => { + // Закрываем модалку если свайпнули вниз больше чем на 100px или со скоростью > 500 + if (info.offset.y > 100 || info.velocity.y > 500) { + setModal(null); + } + }; + useEffect(() => { window.addEventListener("resize", handleResize); window.addEventListener("keydown", handleKeydown); @@ -47,19 +60,32 @@ function ModalContainer() {
-
-
+
+
setModal(null)} /> {modal} -
+
diff --git a/client/src/components/ModalWrapper.tsx b/client/src/components/ModalWrapper.tsx index d17bae6..36500d8 100644 --- a/client/src/components/ModalWrapper.tsx +++ b/client/src/components/ModalWrapper.tsx @@ -17,12 +17,22 @@ function ModalWrapper({ return (
+ {/* Полоска-ручка для свайпа на мобильных */} +
+
+
+ -
+
{children}
diff --git a/client/src/components/PopupContainer.tsx b/client/src/components/PopupContainer.tsx index fe46d6b..0a01e4c 100644 --- a/client/src/components/PopupContainer.tsx +++ b/client/src/components/PopupContainer.tsx @@ -1,15 +1,18 @@ -import { AnimatePresence, motion } from "motion/react"; +import { AnimatePresence, motion, type PanInfo } from "motion/react"; import usePopupStore from "../store/popupStore"; -import { useEffect } from "react"; function PopupContainer() { - const { popup } = usePopupStore(); + const { popup, setPopup } = usePopupStore(); const isMobile = innerWidth < 640; - useEffect(() => { - console.log(popup); - }, [popup]); + const handleDragEnd = ( + _event: MouseEvent | TouchEvent | PointerEvent, + info: PanInfo + ) => { + // Закрываем попап если свайпнули вниз больше чем на 100px или со скоростью > 500 + if (info.offset.y > 100 || info.velocity.y > 500) setPopup(null); + }; return ( @@ -20,6 +23,9 @@ function PopupContainer() { animate={{ opacity: 1, y: isMobile ? "0%" : undefined }} exit={{ opacity: 0, y: isMobile ? "100%" : undefined }} transition={{ bounce: 0, ease: "easeInOut" }} + drag={isMobile ? "y" : false} + dragConstraints={{ top: 0, bottom: 0 }} + onDragEnd={handleDragEnd} > {popup} diff --git a/client/src/components/PopupWrapper.tsx b/client/src/components/PopupWrapper.tsx index 94624c7..5db65a0 100644 --- a/client/src/components/PopupWrapper.tsx +++ b/client/src/components/PopupWrapper.tsx @@ -18,7 +18,7 @@ function PopupWrapper({ return (
diff --git a/client/src/components/indicators/Warning.tsx b/client/src/components/indicators/Warning.tsx index 9e45f27..bc57cbf 100644 --- a/client/src/components/indicators/Warning.tsx +++ b/client/src/components/indicators/Warning.tsx @@ -10,7 +10,7 @@ export default function Warning({ return (
+