Refactor Popup components to utilize DraggableContainer for improved drag-and-drop functionality and responsiveness. Update layout and styling in ParticipantsPopup, QRCodePopup, SharePopup, and ChatPopup to enhance user experience across different screen sizes.

2025-10-21 20:59:26 +05:00
parent 3f463b8ff3
commit 8d05e938be
5 changed files with 106 additions and 85 deletions
@@ -35,8 +35,7 @@ function SessionUsersPanel2() {
    <DraggableContainer
      enableSnapping={true}
      autoAlign={true}
-      // initialPosition={{ top: 20, left: 20 }}
-      initialCorner="bottom-right"
+      initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
      padding="1.111vw"
      className="flex gap-4"
    >
@@ -40,7 +40,7 @@ export default function ChatPopup() {
      initialPosition={{ right: "5vw" }}
    >
      <PopupWrapper title="Чат" className="sm:overflow-hidden">
-        <div className="flex flex-col 2xl:h-[27.778vw] relative 2xl:-m-[1.389vw] -m-5">
+        <div className="flex flex-col 2xl:h-[19.444vw] max-sm:h-[97.5dvh] 2xl:-m-[1.389vw] -m-5">
          <MessageFeed messages={messages} />
          <MessageInput onMessageSend={onMessageSend} />
        </div>
@@ -10,44 +10,52 @@ import ShareFilledIcon from "../icons/ShareFilledIcon";
 import HandRaisedOffFilledIcon from "../icons/HandRaisedOffFilledIcon";
 import MicrophoneOffFilledIcon from "../icons/MicrophoneOffFilledIcon";
 import { Fragment, useRef } from "react";
+import DraggableContainer from "../DraggableContainer";

 export default function ParticipantsPopup() {
  const participants = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  return (
-    <PopupWrapper title="Участники" draggable>
-      <div className="flex flex-col 2xl:gap-[1.667vw] gap-6 relative 2xl:-mt-[1.389vw] -mt-5">
-        <ul className="flex flex-col gap-0 2xl:gap-[1.111vw] 2xl:max-h-[calc(11.944vw+1.389vw)] overflow-y-auto 2xl:pt-[1.389vw] pt-5">
-          {participants.map((participant, index) => (
-            <Fragment key={index}>
-              <ParticipantItem id={participant.toString()} />
-              {index !== participants.length - 1 && (
-                <div className="w-full h-[1px] bg-[#F6F6F6]" />
-              )}
-            </Fragment>
-          ))}
-        </ul>
-        <Button
-          variant="primary"
-          onClick={() => {
-            if (navigator.share) {
-              navigator.share({
-                title: "Участники",
-                text: "Присоединяйся к моей встрече",
-                url: window.location.href,
-              });
-            } else {
-              navigator.clipboard.writeText(window.location.href);
-            }
-          }}
-        >
-          <p>Поделиться ссылкой</p>
-          <div className="2xl:size-[1.111vw] size-4">
-            <ShareFilledIcon />
-          </div>
-        </Button>
-      </div>
-    </PopupWrapper>
+    <DraggableContainer
+      enabled={window.innerWidth >= 640}
+      centerVertical
+      constrainToBounds
+      initialPosition={{ right: "5vw" }}
+    >
+      <PopupWrapper title="Участники">
+        <div className="flex flex-col 2xl:gap-[1.667vw] gap-6 relative 2xl:-mt-[1.389vw] -mt-5">
+          <ul className="flex flex-col gap-0 2xl:gap-[1.111vw] 2xl:max-h-[calc(11.944vw+1.389vw)] overflow-y-auto 2xl:pt-[1.389vw] pt-5">
+            {participants.map((participant, index) => (
+              <Fragment key={index}>
+                <ParticipantItem id={participant.toString()} />
+                {index !== participants.length - 1 && (
+                  <div className="w-full h-[1px] bg-[#F6F6F6]" />
+                )}
+              </Fragment>
+            ))}
+          </ul>
+          <Button
+            variant="primary"
+            onClick={() => {
+              if (navigator.share) {
+                navigator.share({
+                  title: "Участники",
+                  text: "Присоединяйся к моей встрече",
+                  url: window.location.href,
+                });
+              } else {
+                navigator.clipboard.writeText(window.location.href);
+              }
+            }}
+          >
+            <p>Поделиться ссылкой</p>
+            <div className="2xl:size-[1.111vw] size-4">
+              <ShareFilledIcon />
+            </div>
+          </Button>
+        </div>
+      </PopupWrapper>
+    </DraggableContainer>
  );
 }

@@ -4,6 +4,7 @@ import ChevronLeftIcon from "../icons/ChevronLeftIcon";
 import usePopupStore from "../../store/popupStore";
 import SharePopup from "./SharePopup";
 import QRCode from "react-qr-code";
+import DraggableContainer from "../DraggableContainer";

 interface QRCodePopupProps {
  link: string;
@@ -13,31 +14,37 @@ function QRCodePopup({ link }: QRCodePopupProps) {
  const { setPopup } = usePopupStore();

  return (
-    <PopupWrapper
-      className="w-[21.667vw]"
-      draggable
-      leftButton={
-        <Button
-          variant="secondary"
-          size="small"
-          onClick={() => setPopup(<SharePopup link={link} />)}
-        >
-          <div className="2xl:size-[1.111vw] size-4">
-            <ChevronLeftIcon />
-          </div>
-        </Button>
-      }
+    <DraggableContainer
+      enabled={window.innerWidth >= 640}
+      centerVertical
+      constrainToBounds
+      initialPosition={{ right: "5vw" }}
    >
-      <div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 items-center">
-        <QRCode value={link} className="2xl:size-[10.556vw] size-[152px]" />
-        <div className="2xl:space-y-[0.556vw] space-y-2">
-          <p className="title-m font-medium">Подключайтесь к сеансу</p>
-          <p className="caption-s font-medium text-center text-[#CCCCCC]">
-            Можно даже с мобильным интернетом
-          </p>
+      <PopupWrapper
+        className="w-[21.667vw]"
+        leftButton={
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={() => setPopup(<SharePopup link={link} />)}
+          >
+            <div className="2xl:size-[1.111vw] size-4">
+              <ChevronLeftIcon />
+            </div>
+          </Button>
+        }
+      >
+        <div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 items-center">
+          <QRCode value={link} className="2xl:size-[10.556vw] size-[152px]" />
+          <div className="2xl:space-y-[0.556vw] space-y-2">
+            <p className="title-m font-medium">Подключайтесь к сеансу</p>
+            <p className="caption-s font-medium text-center text-[#CCCCCC]">
+              Можно даже с мобильным интернетом
+            </p>
+          </div>
        </div>
-      </div>
-    </PopupWrapper>
+      </PopupWrapper>
+    </DraggableContainer>
  );
 }

@@ -5,6 +5,7 @@ import Button from "../ui/Button";
 import LinkShare from "../ui/LinkShare";
 import usePopupStore from "../../store/popupStore";
 import QRCodePopup from "./QRCodePopup";
+import DraggableContainer from "../DraggableContainer";

 function SharePopup({ link }: { link: string }) {
  const { setPopup } = usePopupStore();
@@ -22,37 +23,43 @@ function SharePopup({ link }: { link: string }) {
  }

  return (
-    <PopupWrapper
-      title="Пригласить"
-      draggable
-      leftButton={
+    <DraggableContainer
+      enabled={window.innerWidth >= 640}
+      centerVertical
+      constrainToBounds
+      initialPosition={{ right: "5vw" }}
+    >
+      <PopupWrapper
+        title="Пригласить"
+        leftButton={
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={() => setPopup(<QRCodePopup link={link} />)}
+          >
+            <div className="2xl:size-[1.111vw] size-4">
+              <QRIcon />
+            </div>
+          </Button>
+        }
+      >
+        <div className="2xl:mb-[1.389vw] mb-3 2xl:space-y-[0.833vw] space-y-3">
+          <p className="title-s font-medium">Скопировать ссылку</p>
+          <LinkShare link={link} />
+        </div>
        <Button
-          variant="secondary"
-          size="small"
-          onClick={() => setPopup(<QRCodePopup link={link} />)}
+          variant="primary"
+          size="large"
+          className="w-full"
+          onClick={handleShare}
        >
+          Отправить
          <div className="2xl:size-[1.111vw] size-4">
-            <QRIcon />
+            <ShareFilledIcon />
          </div>
        </Button>
-      }
-    >
-      <div className="2xl:mb-[1.389vw] mb-3 2xl:space-y-[0.833vw] space-y-3">
-        <p className="title-s font-medium">Скопировать ссылку</p>
-        <LinkShare link={link} />
-      </div>
-      <Button
-        variant="primary"
-        size="large"
-        className="w-full"
-        onClick={handleShare}
-      >
-        Отправить
-        <div className="2xl:size-[1.111vw] size-4">
-          <ShareFilledIcon />
-        </div>
-      </Button>
-    </PopupWrapper>
+      </PopupWrapper>
+    </DraggableContainer>
  );
 }